2023年7月のアップデート！「JSX」解説ページの追加、Dateの問題点についての解説の追加など

こんにちは、『サバイバルTypeScript』の執筆チームです。アップデートをお知らせします！

「JSX」について扱うページを追加しました。 by @suin in #749

主に以下のトピックについて、詳しく解説しています。

• JSXとECMAScriptの違い
• JSX構文とHTML構文の違い
• JSX構文の詳細（要素、テキスト要素、ループなど）
• JSXのベストプラクティス
• JSXとコンパイルの関連性

特にJSXについてはReactなどで使われていて、JavaScriptの拡張構文として非常に一般的ですが、その詳細な構文や適用例について詳しく説明しています。JSXを使うことで、JavaScriptのコード内にHTMLタグのような構文が埋め込み可能となり、より直感的かつ読みやすい形でUIのコードを表現することが可能となります。

また、忘れてはならないのが、JSXとはJavaScriptの構文を独自に拡張した言語であるため、直接ブラウザで解釈することはできません。そこでは「トランスパイル」という過程が必要となり、その手助けとなるツールとして、BabelやTypeScriptコンパイラーが使われます。その詳細な説明も合わせて解説しています。

さらに、JSX構文とHTML構文の微妙な違いや、JSXで扱う要素や属性、ジェネリクスについて、そして何がベストプラクティスなのかという部分にも踏み込んで解説しました。

JSXのページはこちらから

引き続き『サバイバルTypeScript』をよろしくお願い申し上げます！新版が皆さんのTypeScript学習の一助となりますように。

コンテンツのブラッシュアップ

• 「TypeScriptの射程」のサーバーレスの実例にAzure Functionsも追加しました。 by @suin in #745
• ビルトインAPIのDateの問題点を詳しくし、なぜこの問題が生まれたのかについてのコラムを追加しました。 by @suin in #751
• 「インデックスアクセス型」にて配列型とタプル型を分けて解説するように変更しました。 by @suin in #753

軽微な修正

• 誤植「シングルプロレス」→「シングルプロセス」 by @suin in #734
• 「明確な割り当てアサーション」の「より安全なコードを書くには」の項のサンプルコードで非nullアサーションを使わないようにしました。 by @suin in #735
• 文中でのメソッドの表記を統一しました。(例: then → Promise.prototype.then、month.toFixed → monthのtoFixedメソッド) by @jamashita in #741
• 「関数宣言」に貼られたリンク先のページが「関数式」になっている誤りを訂正しました。 by @jamashita in #742
• 「Vercelにデプロイしてみよう」を「Next.jsで猫画像ジェネレーターを作ろう」と整合するように修正しました。 by @suin in #744
• 誤植「早期リータン」→「早期リターン」 by @suin in #750
• 表記の修正をしました:「bool」→「boolean」「メソッドチェイン」→「メソッドチェーン」 by @jamashita in #754
• 「薄れないTypeScriptの強み」で「2020年の今日でも」と陳腐化する表現になっていたところを経年により陳腐化しない表現に変更しました。 by @sontixyou in #756

執筆者向けのアップデート

• Node.jsをv14からv18に、Docusaurusをv2.0からv2.4にアップグレードしました。 by @suin in #730
• GitHub Actionsでyarn buildするようにしました。 by @suin in #736
• faviconをDocusaurusのデフォルトアイコンからサバイバルTypeScriptのロゴに変更しました。 by @suin in #740

New Contributors

• @sontixyou in #756

フルの変更履歴: 2023.6...2023.7

2023年6月のアップデート！「型定義ファイル」ページへの「型定義ファイルで登場するキーワード」の追加など

「型定義ファイル (.d.ts)」ページに「型定義ファイルで登場するキーワード」セクションを新たに追加しました！ (by @t-yng in #722)

新たに作成されたセクションでは、以下の内容を詳しく掘り下げています。

• declare：JavaScript に存在する変数、関数、クラスなどを TypeScript が認識するためのキーワードとその活用方法
• namespace：型名の衝突を回避するための名前空間の定義について
• module：過去のキーワードとの混同及び現在の推奨事項
• トリプルスラッシュ・ディレクティブ：TypeScript 独自のコンパイラへの指示機能とその使用例

これらのキーワードや概念は型定義ファイルを扱う上で欠かせないため、理解を深めるのに役立つでしょう。

型定義ファイルは TypeScript が JavaScript コードとスムーズに連携するための重要な道具であり、それらを適切に使用するためには、キーワードやディレクティブの理解が不可欠です。この新たなセクションは、これらの概念を理解し、型定義ファイルをより効率よく利用するための知識の一助となることでしょう。

新たに追加された「型定義ファイルで登場するキーワード」セクションを活用し、TypeScript のより深い理解を得ることをお勧めします。あなたのフィードバックはいつでも大歓迎です。お気づきの点や提案がありましたら、遠慮無くお知らせください。

素晴らしい TypeScript ライフを！🚀

新規ページの追加

• 「型定義ファイル (.d.ts)」ページに「型定義ファイルで登場するキーワード」セクションを追加しました。 by @t-yng in #722

新バージョンへの追従

なし

コンテンツのブラッシュアップ

• 「TypeScriptの学習リソース」ページの一部表現を改善しました。 by @yo-goto in #717
• 型の表記ゆれを統一しました。(例:「文字列型」→「string型」) by @jamashita in #714

軽微な修正

• 「ジェネリクスが使われている標準ライブラリ」ページからTypeScript公式リポジトリへのリンク切れを修正しました。 by @kyanagi in #720

執筆者向けのアップデート

なし

新規貢献者

• @kyanagiが初めて寄稿しました in #720

フルの変更履歴: 2023.5...2023.6

2023年5月のアップデート！「TypeScriptの学習リソース」「await」の追加など

What's Changed

「TypeScriptの学習リソース」のページを追加しました by @yo-goto in #693

TypeScript学習リソースの紹介ページが追加されましたので、ぜひ役立ててください！🚀 このページでは、Microsoft公式の情報源やサードパーティの情報源など、様々なTypeScriptに関するリソースを探検できます。また、公式ドキュメントの構成要素や攻略方法もわかりやすく解説しています。✍️

学習や調査に役立つ情報が満載のこのページを活用し、TypeScriptスキルを磨いていきましょう！🎓🎉

リソースの詳細やリンクは、このページでご覧いただけます。良い学習を！📚

awaitのページが追加されました by @jamashita in #687

await解説ページが追加されました。このページでは、async/await構文を用いた非同期処理の簡潔な記述方法について詳しく解説しています。awaitはPromiseを解決するまで実行を待機し、解決された値を返す機能を提供します。ただし、awaitは基本的にasync関数内でのみ使用できます。このページを通じて、async/awaitを活用した効果的なコーディングテクニックを学びましょう。

https://typescriptbook.jp/reference/asynchronous/await

新バージョンへの追従

• 「コンポーネントテストの「ボタンをクリックするとON/OFFの表示が切り替わる」がtesting-library/user-event@14でFAILになる問題を解決しました by @suin in #716

コンテンツのブラッシュアップ

• 非同期処理とawaitのページができたためリンク先を変更しました by @jamashita in #691
• 「TypeScriptの学習リソース」のページをブラッシュアップしました by @yo-goto in #697
• 「TypeScriptの特徴」をブラッシュアップしました by @suin in #712
• 「TypeScriptの学習リソース」のページに「JavaScriptの学習リソース」のセクションを追加しました by @yo-goto in #706

軽微な修正

• 誤植の修正: Regexp.prototype.match→String.prototype.match by @jamashita in #688
• 誤植の訂正: swicth → switch by @tojimasan in #695
• 誤植の修正:「値が有無を確認する」→「値の有無を確認する」 by @yoshi2no in #703
• 「Reactでいいねボタンを作ろう」のサンプルコードで不要な「import logo from "./logo.svg";」の行を削除しました by @kamadakohei in #715
• 誤植の修正:「.modules.css」→「.module.css」 by @YusukeOno in #713

執筆者向けのアップデート

• プルリクエストを書きやすいように、PRのテンプレートにクローズするissueの番号を書く場所を追加しました by @t-yng in #694

New Contributors

• @yo-goto made their first contribution in #693
• @tojimasan made their first contribution in #695
• @yoshi2no made their first contribution in #703
• @kamadakohei made their first contribution in #715

Full Changelog: 2023.4...2023.5

初版

GitBook: [master] one page modified