1 - 40 件 / 62件
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコ
Rails の問題は Rails のベストプラクティスがフロントエンドのベストプラクティスの邪魔になるどころか全く逆方向で相反してる点です。DHHの思想がフロントエンドと根本的に逆行してる。そういう人が作るフレームワークなのでwebpackerの抽象化を根本的に間違ったりする。 — prev.js (@mizchi) December 1, 2020 昨日もリプライで少し書いたけど、DHH自体が直近のHeyの開発でも明確にJavaScriptというものを触れないようにすることを是としているような主張をしているので、DHH wayが色濃く反映される以上この状態はもう避けられない気がしている — potato4d / Takuma HANATANI (@potato4d) December 1, 2020 Railsがフロントエンドの最先端をゆく人々1から良く思われないのは事実として。 Vie
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。(まだあまり更新は進んでいませんが...) このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう! 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう! エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎(gfx)さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
2章はプログラミング初心者に式と文という概念を伝えるのによさそう。コンパイラの概念が透けてみえるようになる。 let を避けろというコラムわかる。 BigInt の解説するんだ。 全体的にJSの言語仕様をTSという側面から解釈しつつ学ぶ、という構成になってる。この構成が初学者に伝わるかというと、完全なJS初学者には無理で他のプログラミング言語の経験は多少要求される。 3章 object への型注釈の文法解説が結構しんどく感じた。文法的に似てるがそれ故に混乱する。そういえば自分も複雑なインラインの型書いてると、今型なのかインスタンスなのか、結構間違ってる気がするので、言語自体が抱える特徴かもしれない。 type と interface の使い分け、今となっては何が何だかわからない気がした。type がない時代があってそれ以降は〜と書いてあるけど、昔の type はジェネリクスとれなくて、途中
元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
SOW@ @sow_LIBRA11 作家のはしくれでございます。「戦うパン屋と機械じかけの看板娘」(HJ文庫)全10巻。「剣と魔法の税金対策」(ガガガ文庫)全6巻「機動戦士ガンダムSEED ECLIPSE(ストーリー担当)」全4巻 SOW@ @sow_LIBRA11 「なんで女体化したら自動的に美少女になると思ってんだよ。オマエが女になったとして、最も近い容姿は理論上オマエのお母さんだぞ」 という呪いを積極的に広げていく会を立ち上げようかな。 2022年07月16日 19:56:54
2024年08月06日 TSKaigi サブイベント #1 フロントエンド
TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです(もちろん知っていたら便利ではありますが、初学者向けではない)。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules(以後ESMと表記)がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
新型コロナウイルスの感染拡大により、急激に需要が高まったMedTech分野。注目度が高まる中、医療機関と提携し、夜間往診と24時間対応可能なオンライン診療のプラットフォームを提供しているのがファストドクター株式会社です。代表かつ医師である菊池 亮さんと、共同代表を務める水野敬志さんがForbes JAPANの「日本の起業家ランキング2023」で1位を獲得したことでも話題を集めています。 患者数が増大した2022年7月の新型コロナ第7波では、リアルタイムで業務負荷が高まっているシステムの問題提起から開発、リリースまでを1カ月以内に完了させるなど、スタートアップならではのスピード感で開発に取り組んできました。 また2022年12月にはRuby on Rails中心の開発から、Vue.jsとNestJSを組み合わた新しい技術スタックを採用。加えてテック部門の組織再編も行いフロントエンドとバックエ
JavaScript PrimerのNotebookLMが利用可能になりました。 NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。 次のリンクから、JavaScript PrimerのNotebookLMにアクセスできます。 📖 JavaScript Primer - 迷わないための入門書 - NotebookLM JavaScript Primer on NotebookLM JavaScript PrimerのコンテンツがNotebookLMに入ってることで、読者は書籍の内容についてNotebookLMに直接質問したり、Podcastとして音声で聞いたりすることができるようになります。 NotebookLMを活用することで、JavaScript Primerを読み進める中で生じた疑
Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。 Effect-TS(正式名称は Effect)は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect System という概念を取り入れており、Scala や Haskell といった関数型プログラミング言語に影響を受けています。 TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性(concu
【TypeScript】カリー化・部分適用は便利だよ! カリー化・部分適用利用してますか? 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
はじめに 最近話題の frourio をご存知でしょうか? TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。 こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。 この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。 全体構成 デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。 選択理由 選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。 基本的に無料で利用可能なこと インフラレイヤを意識せずに簡単なセットアップで利用可能なこと Vercel と Heroku について Vercel Vercel は Next.js を
こんにちは、taroです! 今回は、ベースマキナのTypeScriptのプロジェクトで不要なコードの検知・削除で使用しているKnipについて紹介します。 Knip とは Knipは、TypeScript/JavaScriptのコードベースの不要なコードを検出するCLIツールです。 以下が検出できる不要なコードの例です。 package.jsonのdependencies/devDependenciesの中で使われていないpackage exportされているがどこからもimportされていない変数、関数、型など 使用していないファイル その他、検出できる内容の一覧はこちらで確認できます。 またExperimentalな機能(2024年7月現在)として不要なコードの自動削除も可能です。 ちなみにTypeScript/JavaScriptの不要なコードの検出するツールではts-pruneも知ら
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack(任意) Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
{ "extends": "@tsconfig/strictest/tsconfig.json", } 以上です! tsconfig.json ってどんなふうに書いていますか?? tsconfig.json をこんな感じで書いている人はいないでしょうか { "compilerOptions": { "strict": true, "allowUnusedLabels": false, "allowUnreachableCode": false, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noPropertyAccessFromIndexSignature": true, "noU
この記事でのusing宣言の動作はBabelのtransform及びes-shimsのpolyfill実装に依存しており、実際のV8エンジンやTypeScriptのトランスパイル出力の挙動とは異なる可能性があります。 以下の挙動がusing宣言に対応している処理系の実際の挙動と異なる場合はコメントをいただけると幸いです。 導入 先日、Twitterでこんなツイートが回ってきました。 TypeScript 5.2で新しい「using宣言」が追加されるというものです。 しかも、TypeScriptの独自構文かと思いきや、JavaScriptのStage 3のProposalをTypeScriptで先行実装するという通常のTypeScriptの実装プロセスに則ったものでした。 新しい変数宣言の追加はES 2015(ES6)の「let」「const」以来でなんと8年ぶりで、JavaScript/T
はじめに TypeScript の型は世界一自由度の高い設計になっていると思います。 その根拠として、型を関数型のように書けるというのが大きいと思います。 type Trim<S extends string> = S extends ` ${infer R}` | `${infer R} ` ? Trim<R> : S; 例えば、これは文字列の両端から空白を取り除く、str.trim() 相当のジェネリクスを含んだ型です。 (ジェネリクスは、型で用いられる引数のような存在だと思って貰えれば大丈夫です。) 実際に見てみましょう。 TypeScript Playground (この記事では、TypeScript v5.8 を使用します。) しっかり、str.trim() 相当の処理が型のみで推論できていることが分かります。 こんな事をここまで簡単に出来る言語は、TypeScript ぐらいで
「奥野さんと社員のリファクタリング部屋」は、リファクタリングに励むトレタの社員と技術顧問の奥野さん ( @okunokentaro ) の間で実際に行われた会話を切り取った開発現場実録コンテンツです。 技術顧問: 奥野さん 三度の飯よりリファクタリングが好き。 今回の質問者: 武市さん トレタ在籍2年。沖縄在住のフロントエンジニア 今回の質問 今回は初期リリースを終えたWebアプリケーション(Next.js)のプロダクトを担当している武市さんから、複数人で開発を進めてきて統率が取れなくなったディレクトリ構造のリファクタリングについての質問です。 APIで外部とやり取りしている部分をリファクタリングして、クリーンアーキテクチャに沿ってリポジトリを作ろうと考えています。 その中で、GraphQL APIレスポンスの結果を変換するアダプター関数(adaptGetIServiceItemsAggr
はじめに TypeScript は静的型付け言語として、コードの品質を向上させ、多くのバグを未然に防ぐ強力な型システムを提供しています。しかし、その構造的型システム(structural typing)には限界があります。似た構造を持つ型が互いに互換性を持ってしまうことで、意図しない代入や関数呼び出しが可能になり、論理的なエラーを引き起こす可能性があるのです。 このような問題に対処するために「Branded Types(ブランド型)」という手法が使われます。これは、TypeScript の型システムを拡張して名前的型システム(nominal typing)の特性を模倣し、似た構造でも異なる役割を持つ型を区別できるようにする手法です。 本記事では、Branded Types の基本概念から実装方法、実践的な活用例まで、段階的に解説していきます。 構造的型システムとその課題 TypeScrip
この記事では、Java、Scala、TypeScriptなど、サブタイピング(subtyping)をサポートする言語であれば間違いなくサポートしているであろう「反変(contravariant)」・「共変(covariant)」について、視覚的なアナロジーを用いつつ解説したいと思います。コード例を含め全てTypeScriptを前提とした説明ですが、同様の機能を持った言語であれば概ね同じことが言えるはずです。 そもそもサブタイピングとは サブタイピングとは、型と型との間にサブタイプ(subtype)・スーパータイプ(supertype)という関係を定めて、スーパータイプである型の代わりとして、サブタイプである型を利用できるようにする仕組みです。 例えば、TypeScriptではstring型はObject型のサブタイプであるので、次のようにObject型の変数にstring型の値を代入するこ
Result 型 (類似するものとして Either Monad の方が有名かもしれません) を導入する場合、アプリケーション全体の設計を変えたり、全箇所を書き換える必要はありません。 neverthrow は部分的に使用でき影響範囲も閉じるので、局所的に使い始めることができます。 (Rust のような) Result 型 とは ざっくり言うと関数の処理の結果と成否を 1 つの型 Result<T, E> で表したものです。(T は期待する結果の型、 E はエラーを表現する型) 筆者は詳しくはないのですが、 Haskell 等にある Either<L, R> とは厳密には違うようです(Either は両方の値が使用可能であることを前提としている?) 参考: Rust ではなぜ、Either 型ではなく Result 型を採用しているのか neverthrow とは TypeScript で
2025年06月19日追記: 弊社のメンバーが、TypeScriptの新しいResult型ライブラリ「@praha/byethrow」を作りました! NeverThrowを使用中の方、もしくは使用を検討している方は、ぜひ@praha/byethrowも試してみてください! 紹介記事:TreeShakableなResultライブラリを作りました 会社でNeverThrowというライブラリを使っています。 とても便利なので、とても便利だよ〜という記事を書きます。 NeverThrowとは? NeverThrowは、TypeScriptで「Result型」を実現できるライブラリです。 Result型とは? Result型は、関数の中でエラーをthrowする代わりに、エラーを戻り値として返すようにすればいいじゃね?な仕組みのことをいいます。 もっと噛み砕いて説明します。 たとえば「50%の確率で足
みなさん、TypeScript書いてますか? ふと気づくと、もうTypeScript 1.0から数えても11年が経過しているんですね。筆者も2015年くらいから本格的に触り始めた組なので、そろそろTypeScript 10年選手を名乗ってもよさそうです。 さて、これだけ長いことTypeScriptを触っていると、昔の文法を前提とした手癖というものも蓄積されていくものです。同僚と雑談していたところ、手癖を改めるべき便利なイディオムを教えてもらったので、備忘録として残しておきます。 Before: 手癖で書いていたexhaustiveness check TypeScriptには、exhaustiveness checkというテクニックがあります。これは、TypeScriptの型システムを利用して、switch文やif文でユニオン型やEnum型の全てのケースを網羅しているかをチェックする手法で
ESLint コアルールの TypeScript 対応について ESLint v9.23.0 で ESLint のコアルールの TypeScript 対応が開始しました。 その後の ESLint のアップデートでもコアルールの TS 対応が進んでいます。ESLint コアの責務を増やすような機能追加は少し意外だと感じたので、その背景について調べてみました。 背景: 従来のコアルールの拡張方法の課題 ESLint のコアルールは JavaScript を想定して書かれたものであるが、TypeScript に対してもほぼ期待通り動作するルールが多い。TypeScript は JS のほぼ上位互換な言語であるため、TypeScript 用のパーサー (@typescript-eslint/parser) が吐き出す AST もほぼ上位互換であり、パーサーさえ TS 用のものを使えば多くの ESL
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く