サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ブラックフライデー
typescriptbook.jp
本書の目標は、本読者がTypeScriptをすぐに実務で利用できるよう、最短ルートに読者を導く一冊になることです。本書は、TypeScriptの網羅的なドキュメントではありません。逆に、実務であまり使わないTypeScriptの機能は割愛します。扱う内容は、頻出する機能にしぼりにしぼって、「実務でTypeScriptを使うなら、ここだけはおさえておこう」「ここだけはおさえておけば、実務で死なない(=サバイバルできる)」という観点で執筆しています。 本書はTypeScriptを中心に扱いますが、実務上、必要になる知識としてJavaScriptの仕様、フロントエンドフレームワークのReactなどについても扱います。 誰に向けて書かれた本か？本書は、プログラミング経験はあるが、これからTypeScriptをはじめる人、もしくは、始めたばかりという人を対象にしています。たとえば、次のような属性の
TypeScriptの判別可能なユニオン型は、ユニオンに属する各オブジェクトの型を区別するための「しるし」がついた特別なユニオン型です。オブジェクトの型からなるユニオン型を絞り込む際に、分岐ロジックが複雑になる場合は、判別可能なユニオン型を使うとコードの可読性と保守性がよくなります。 通常のユニオン型は絞り込みが複雑になるTypeScriptのユニオン型は自由度が高く、好きな型を組み合わせられます。次のUploadStatusはファイルアップロードの状況を表現したユニオン型です。アップロード中InProgress、アップロード成功Success、アップロード失敗Failureの組み合わせです。
型システムの背景理論プログラミング言語の型システムにはそれぞれ固有の世界観があり、言語ごとに型の機能が異なります。 その一方で複数の言語で共通している機能もあり、それらのさまざまな型の機能は唐突にどこからともなく出現してきたわけではありません。背景として大きくは型理論(type theory)と呼ばれる数学的な研究分野があり、各言語の型システムは型理論に基づいて実装されています。 たとえば、TypeScriptのunknown型やnever型のような一見何のためにあるか分からないような型であっても、型理論においてはその役割や機能を一般的に説明することができます。これらの型はトップ型やボトム型と呼ばれる型の種類に分類され、部分型関係が作る階層構造の両端点に位置する型として振る舞います。 部分型階層の両端点に位置する型型理論的な観点からの知識を持つことで似たような型システムを持つ他の言語にお
ウェブアプリケーションのフロントエンドを開発するのに、最低限の必要となる言語はHTMLやCSSを除けばJavaScriptだけです。JavaScriptさえ使えれば、かなり自由にフロントエンドを実装できます。それなのに、なぜJavaScriptではなくTypeScriptを使ったほうがいいのでしょうか？ここでは、TypeScriptを使うべき理由を大きく分けて4つ見ていきます。 TypeScriptは大規模開発に最適な言語TypeScriptが発明されるに至った歴史的背景を「TypeScript誕生の背景」で見ましたが、JavaScriptではまかないきれなくなった大規模アプリケーション開発を克服するために生まれたのがTypeScriptです。 📄️ TypeScript誕生の背景TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発
TypeScriptには本書や開発元のMicrosoftが提供しているものを含め、学習や調査に役立つ数多くのリソースが存在しています。 このページでは本書の解説を読んだ後や、読んでいる途中でも利用できるTypeScriptについての情報源を紹介します。さらにこのページの後半では学習や開発において非常に重要となる公式ドキュメントについて構造と読み方などを含めた攻略方法を解説します。
プロパティへのインターセプター(参照・代入・監視などの意味)としGetter/Setterがあります。 記述方法のサンプルは次のようになります。
このチュートリアルでは、Reactコンポーネントのテストを書くことを学びます。 本章で学べること本章では、簡単なコンポーネントのテストを書くことを目標に、具体的には次のことをやっていきます。 UIテストのためのライブラリ群testing-libraryを使ったテストの作成Jestを使ったスナップショットテストの作成本章の目的はコンポーネントのテストを完全に理解することではありません。むしろ、それがどういったものなのか、その雰囲気を実際に体験することに主眼を置いています。そのため、内容はかなり最低限のものとなりますが、逆に言えば少しの時間でコンポーネントテストを試してみれるシンプルな内容にまとまってますから、ぜひ手を動かしてみてください。 このチュートリアルで作成するテストコードの完成形はGitHubで確認することができます。 このチュートリアルに必要なものこのチュートリアルをやるに当た
パッケージを使う人にもTypeScriptによる型の享受を目指すパッケージを公開するときは、動作する形で公開するのが前提なのでjsにする必要があります。つまりコンパイルは必須です。ですがせっかくTypeScriptで作ったのだからパッケージの型情報も提供しましょう。 型定義ファイルも出力する型定義ファイルを一緒に出力しましょう。そのためにはtsconfig.jsonにあるdeclarationの項目をtrueに変更します。
TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。 ユニオン型の型注釈ユニオン型の型注釈は、2つ以上の型をパイプ記号(|)で繋げて書きます。たとえば、number型もしくはundefined型を表す場合は、number | undefinedのように書きます。
このチュートリアルでは、テストフレームワーク「Jest」を使い、ユニットテストをTypeScriptで書くことを学びます。 本章で学べること本章では、簡単な関数のテストをJestで書くことを目標に、次のことを学びます。 Jestを使ってTypeScriptの関数をテストする方法Jestの導入方法Jestでのテストの書き方テストの実行方法結果の見方本章の目的はJestを完全に理解することではありません。むしろ、Jestがどういったものなのか、その雰囲気を実際に体験することに主眼を置いています。そのため、内容はかなり最低限のものとなりますが、逆に言えば少しの時間でJestを試してみれるシンプルな内容にまとまってますから、ぜひ手を動かしてみてください。 JestとはJestはJavaScriptのテストフレームワークです。TypeScriptでテストを書くこともできます。Jestは、フロント
オーバーロード関数(overload function)は、TypeScriptの機能で、ひとつの関数に異なる関数シグネチャを複数もつ関数です。関数シグネチャとは、どのような引数を取るか、どのような戻り値を返すかといった関数の型のことです。要するに、異なる引数や戻り値のパターンがいくつかある関数をオーバーロード関数と言います。 オーバーロード関数の文法TypeScriptでは、オーバーロード関数は、関数シグネチャと実装の2つの部分に分けて書きます。
TypeScriptのunknown型は、型が何かわからないときに使う型です。 unknown型にはどのような値も代入できます。
コピーこの章では、インターフェースと型エイリアスの違いについて詳しく説明していきます。 インターフェースと型エイリアスの違い内容インターフェース型エイリアス
JavaScriptにはJavaに似た例外処理の構文があります。例外にはErrorオブジェクトを使い、throw構文で例外を投げます。try-catch構文で例外を捕捉できます。
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
考え方はユニオン型と相対するものです。ユニオン型がどれかを意味するならインターセクション型はどれもです。言い換えるとオブジェクトの定義を合成させることを指します。 インターセクション型を作るためには合成したいオブジェクト同士を&で列挙します。
JavaScriptの関数は、関数宣言、関数式、アロー関数の3通りの方法で作れます。 アロー関数は後発JavaScriptの歴史を紐解くと、元々は関数宣言と関数式しかありませんでした。この2つの機能上の違いはほぼありません。この2つはまとめて「従来の関数」と呼びます。アロー関数は、従来の関数の問題点を解決するために、あとで導入されたものです。 構文の簡潔さ従来の関数は構文の長さが問題でした。JavaScriptではよくコールバック関数を書きます。コールバック関数とは、関数の引数として渡される関数を言います。従来の関数は、関数を書くたびにfunctionキーワードを書く必要があります。処理が1行だけでも、複数行要するコーディングスタイルもあります。書くのも読むのもわずらわしいコードになりがちです。一方で、アロー関数は短くシンプルな記述になります。
コピーまた、any型の変数については、これ以上コンパイラーが型チェックを行いません。実行してみるとエラーになるようなコードでも、コンパイラーはその問題を指摘しません。次の例では、数値を変数strに代入しています。しかし、2行目のtoLowerCaseはstring型のメソッドでnumber型には存在しないため、実行してみるとエラーになります。このような単純な矛盾はTypeScriptコンパイラーで発見できますが、型注釈でanyにした値についてはコンパイラーが警告しなくなります。
Pick<T, Keys>は、型TからKeysに指定したキーだけを含むオブジェクトの型を返すユーティリティ型です。 Pick<T, Keys>の型引数T型引数Tにはオブジェクトの型を代入します。 KeysKeysにはオブジェクトの型Tのプロパティキーを指定します。object型Tに存在しないプロパティーキーを指定するとコンパイルエラーになります。 Pickの使用例
MapはJavaScriptの組み込みAPIのひとつで、キーと値のペアを取り扱うためのオブジェクトです。Mapにはひとつのキーについてはひとつの値のみを格納できます。 Mapオブジェクトの作り方Mapオブジェクトを作るにはMapクラスをnewします。たとえば、キーがstring、値がnumberのMap<string, number>は次のように作ります。
TypeScriptの関数は1値のみ返却できます。ですが実際は複数の値を返したくなる時もあります。そんな時は配列に返したいすべての値を入れて返すことがあります。 次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
コピーこれらのクラスは、walkメソッドを持つ点で似ています。このようなとき、Person型とDog型は「互換性がある」とみなすことができるでしょうか。それとも、まったく異なる型として扱うべきでしょうか。 こうした問題を扱うために、プログラミング言語はさまざまな型システムを採用しています。どのように型を区別すべきか、また、どのように型同士の互換性を判断するべきか、このような観点から型システムの仕様を考える必要があります。TypeScriptでは、「構造的型付け」という型システムが採用されています。構造的型付けがどのように型を区別し、逆にどのように型同士に互換性があると判断するのか、こうした言語仕様を知ることは、よいコードを書くために役立ちます。 型の区別に関する2つのアプローチプログラミング言語における型の区別や互換性の判定には、主に次の2つのアプローチが存在します。 名前的型付け構造的
コピーobject型、Object型、{}型の違いobject型やObject型、{}型の3つは類似する部分がありますが、object型と他の2つは異なる点があります。 object型object型はオブジェクトだけが代入できる型です。JavaScriptの値はプリミティブ型かオブジェクトの2つに大分されるので、object型はプリミティブ型が代入できない型とも言えます。
本章では、ESLintイーエスリントを使って、TypeScriptをチェックするためのノウハウをチュートリアル形式で学びます。 本章で学べること本章では次のことを学んでいただきます。 コーディング規約の必要性とコーディング規約の問題点ESLintでJavaScriptやTypeScriptをチェックする方法ESLintのルールの設定のしかたAirbnbのコーディング規約をESLintで活用する術エラーを解消する方法チェックを部分的に無効化する方法VS CodeやJetBrains IDEとESLintを統合する方法チュートリアルをやり終えると、ご自身のプロジェクトにESLintを導入できるようになったりと、実務で役立つ基本的なスキルが身につくはずです。 本章の流れと読み進め方本章は次の3部構成です。 背景知識ESLintでJavaScriptをリントしようESLintでTypeScri
もしJavaScriptで本格的に何かを作りたいのであれば、非同期処理とは切っても切れない関係になるでしょう。初めのうちは理解に苦しむことが多いですが今では非同期処理を直観的に操作できる機能が実装されたのでハードルは大きく下がりました。 JavaScriptにおける非同期処理JavaScriptはシングルプロセス、シングルスレッドで動作する言語です。この特徴については別のページにもありますが、これはすべてのプログラムは直列に処理されるということを意味します。 📄️ シングルプロセス・シングルスレッドとコールバックコンピューティング。特に並列、並行処理をするプログラミングに入ってくるとプロセス、スレッドという言葉を耳にするようになります。 これだけ聞けばすべてのJavaScriptのプログラムは上から下に同期的に処理されるようにも聞こえます。 ですがこの特徴には弱点があります。直列に処理
ここではJavaScriptのプロトタイプベースの概要を説明します。JavaやPHPなどでクラスを使ったことがある方や、オブジェクト指向プログラミングに触れたことがある方を念頭に書いています。また、ここでは主に次の疑問に答えていきます。 プロトタイプベースとはどのような考え方なのか？プロトタイプベースのJavaScriptは、クラスベースのPHPやJavaとどんなところが違う？なぜJavaScriptはプロトタイプベースを採用したのか？プロトタイプベースの利点は何か？オブジェクトの生成オブジェクト指向プログラミング(OOP)では、オブジェクトを扱います。オブジェクトを扱う以上は、オブジェクトを生成する必要があります。 しかし、オブジェクトの生成方式は、OOPで統一的な決まりはありません。言語によって異なるのです。言語によりオブジェクト生成の細部は異なりますが、生成方法は大きく分けて「クラ
TypeScriptの列挙型(enum)にはいくつか問題点が指摘されていてます。ここでは、その問題点と代替手段を説明します。 列挙型の問題点列挙型はTypeScript独自すぎるTypeScriptは、JavaScriptを拡張した言語です。拡張といっても、むやみに機能を足すのではなく、追加するのは型の世界に限ってです。こういった思想がTypeScriptにはあるため、型に関する部分を除けば、JavaScriptの文法から離れすぎない言語になっています。 JavaScriptの文法からドラスティックに離れたAltJSもあります。その中で、TypeScriptが多くの開発者に支持されているのは、JavaScriptから離れすぎないところに魅力があるからというのもひとつの要因です。 TypeScriptの列挙型に目を向けると、構文もJavaScriptに無いものであるだけでなく、コンパイル
JavaScriptのオプショナルチェーン?.は、オブジェクトの参照がnullやundefinedの場合でも、エラーを起こさずにプロパティを参照できる安全な方法です。 プロパティ参照がエラーになる問題JavaScriptではnullやundefinedのプロパティを参照するとエラーが発生します。
Partial<T>は、オブジェクトの型Tのすべてのプロパティをオプションプロパティにするユーティリティ型です。 Partial<T>の型引数T型引数Tにはオブジェクトの型を渡します。 Partialの使用例
次のページ
このページを最初にブックマークしてみませんか？
『TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
