クライアントサイドの JavaScript フレームワークを理解する

クライアントサイドのフレームワークを学習する前に、ウェブ開発で用いる主要な言語の基礎を学ぶ必要があります。それは HTML と CSS、そして特に JavaScript です。

ウェブプラットフォームの基本的な機能を理解すれば、その上で構築されているフレームワークのトラブルも自信を持って解決できるでしょう。そうすれば、あなたの書くコードはより豪華でプロフェッショナルなものになるはずです。

1. クライアントサイドフレームワークの紹介

フレームワークの一般的な概要から始め、 JavaScript とフレームワークの簡単な歴史、フレームワークがなぜ存在し、何を与えてくれるのか、学習するフレームワークを選ぶにはどう考え始めるべきか、クライアント側のフレームワークにどんな選択肢があるのか、について見ていきます。

2. フレームワークの主な機能

主要な JavaScript フレームワークでは、 DOM の更新、ブラウザーイベントの処理、および楽しい開発体験を提供するために、それぞれ異なる手法が採用されています。この記事では、「4大フレームワーク」の主な機能を調べ、フレームワークがどのように動作する傾向があるのかを高いレベルから見ていき、フレームワーク間の違いについて見ていきます。

1. React を始める

この記事では React のはじめかたを説明します。React の背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。

2. React ToDo リストをはじめる

例えば、React でアイディアを検証するためにアプリを試作してみることになったとします（いわゆる、Proof of Concept - 概念実証）。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な App コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。

3. React アプリのコンポーネント化

この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです！この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。

4. React での対話: イベントと状態

コンポーネント計画がうまくいったら、今度はアプリを完全に静的な UI から、実際に対話したり変更したりできるような UI に更新し始めましょう。この記事では、イベントと状態について調べながら、この作業を行います。

5. React の対話性: 編集、フィルタリング、条件付きレンダリング

React の旅が終わりに近づくにつれて（少なくとも今は）、Todo リスト アプリの主要な機能領域に最後の仕上げを追加します。これには、既存のタスクを編集できるようにすることと、タスクのリストをすべて、完了、未完了の間でフィルタリングすることが含まれます。その過程で、条件付きUIレンダリングについても見ていきます。

6. React におけるアクセシビリティ

最後のチュートリアル記事では、 React のフォーカス管理など、キーボードのみのユーザーとスクリーンリーダーユーザーの両方にとってユーザビリティを向上させ、混乱を軽減することができる（シャレた）アクセシビリティに焦点を当てます。

7. React のリソース

この記事の最終回では、さらに学習を進めるために使用できる React のリソースの一覧を提供しています。

1. Ember を始める

最初の Ember 記事では、Ember がどのように作業し、何のために有益なのかを見、Ember ツールチェーンをローカルにインストールし、サンプルアプリを作成し、そして開発に必要な初期設定を行います。

2. Ember アプリの構成とコンポーネント化

この記事では、TodoMVC Ember アプリの構造を計画し、そのための HTML を追加し、その HTML 構造をコンポーネントに分割することに、すぐに取りかかりましょう。

3. Ember の対話: イベント、クラス、状態

この点では、アプリに対話機能を追加し、新しい ToDo アイテムを追加して表示する機能を提供することを始めます。その過程で、Ember のイベントの使用、インタラクティブ機能を制御する JavaScript コードを含むコンポーネント クラスの作成、アプリのデータ状態を追跡するサービスの設定を見ていきます。

4. Ember の対話性: フッター機能、条件付きレンダリング

これで、このアプリのフッター機能に取り組み始める時刻になりました。ここでは、まだ完了していない ToDo の数を正しく表示するために ToDo カウンターを取得し、完了した ToDo (チェックボックスがチェックされているもの) に正しくスタイルを適用します。また、「完了をクリアする」ボタンの配線も行います。その過程で、テンプレートで条件付きレンダリングを使用する方法について学びます。

5. Ember におけるルーティング

この記事では、ルーティングまたは URL ベースのフィルタリングについて学びます。これを使用して、 3 つの Todo ビュー（"All"、"Active"、"Completed"）それぞれに固有の URL を提供することにします。

6. Ember のリソースとトラブルシューティング

最後の Ember 記事では、学習をさらに進めるために使用できるリソースのリストと、有益なトラブルシューティングなどの情報を提供しています。

1. Vue を始める

これで、フレームワークの 3 つ目である Vue を紹介することができます。この記事では、 Vue の背景を少し見て、インストールと新しいプロジェクトの作成方法を学び、プロジェクト全体と個々のコンポーネントのハイレベルな構造を勉強し、プロジェクトをローカルで実行する方法を確認し、例の構築を始めるために取得します。

2. 最初の Vue コンポーネントの作成

これで、 Vue をより深く掘り下げ、自分自身でカスタムコンポーネントを作成する時が来ました。まず、 Todo リストの各項目を表すコンポーネントを作成するところから始めます。その過程で、他のコンポーネントの内部でコンポーネントを呼び出すこと、 props を介してデータを渡すこと、データの状態を保存することなど、いくつかの重要な概念について学びます。

3. Vueコンポーネントの一覧の表示

この点で、完全に動作するコンポーネントを保有することができました。これで、アプリに複数の ToDoItem コンポーネントを追加する準備が整いました。この記事では、 App.vue コンポーネントに Todo データの集合を追加し、それをループさせて v-for ディレクティブを使用して ToDoItem コンポーネント内に表示するところを見ていきます。

4. 新しい todo フォームの追加: Vue のイベント、メソッド、モデル

これでサンプルデータを所有し、各データを受け取ってアプリの ToDoItem 内にレンダリングするループができました。次に本当に必要なのは、ユーザーが自分自身でアプリに ToDo 項目を入力できるようにする機能です。そのためには、テキスト <input> と、データが送信されたときに発行されるイベント、送信時にデータを追加してリストを再レンダリングするメソッド、データを制御するモデルが必要になります。この記事で扱うのは、このようなものです。

5. CSS による Vue コンポーネントのスタイル設定

いよいよ、アプリの見栄えを少しばかり良くする時刻が到来しました。この記事では、 Vue のコンポーネントを CSS でスタイル設定するための異なる形を探ります。

6. Vue の computed プロパティの使用

この記事では、 Vue の computed プロパティと呼ばれる機能を使用して、完了した Todo アイテムの数を表示するカウンターを追加します。この著作物はメソッドと似たような作業をしますが、依存関係の 1 つが動作したときだけ再実行されます。

7. Vue の条件付きレンダリング: 既存の TODO の編集

これで、まだ欠けている機能の主要な部分の一つである、既存のTodoアイテムを編集する機能を追加する時が来ました。この機能を実現するために、 Vue の条件付きレンダリング機能である v-if と v-else を利用して、既存の Todo アイテムビューと、 Todo アイテムのラベルを更新できる編集ビューを切り替えられるようにします。また、 Todo アイテムを削除する機能の追加も見ていきます。

8. Vue のフォーカス管理のための refs と lifecycle メソッド

Vue の使用はほぼ終了しました。最後に見るべき機能は、フォーカス管理です。別の言い方をすれば、アプリのキーボードアクセシビリティをどのように向上させるか、ということです。この処理に Vue refs を使用することを見ていきます。この機能は、仮想 DOM の下にある基礎 DOM ノードに直接アクセスしたり、あるコンポーネントから子コンポーネントの内部 DOM 構造に直接アクセスしたりすることができる先進的な機能です。

9. Vue のリソース

これで、 Vue の学習の締めくくりとして、さらに学習を進めるために使用できるリソースのリストと、他にも有益なヒントを提供します。

1. Svelte を始める

この記事では、 Svelte フレームワークの簡単な紹介をします。 Svelte がどのように動作するのか、そしてこれまで見てきた他のフレームワークやツールと何が違うのかを見ていきます。その後、開発環境を構築し、サンプルアプリを作成し、プロジェクトの構造を理解し、ローカルで実行し、本番用にビルドする方法を学びます。

2. Svelte Todo リストアプリを始める

さて、 Svelte でこれらがどのように動作するのか基本的な理解ができたところで、例のアプリであるTodoリストの作成を始めてみましょう。この記事では、まずアプリに求められる機能を見ていきます。次に Todos.svelte コンポーネントを作成し、静的なマークアップとスタイルを所有し、 ToDo リストアプリの機能を開発し始めるための準備をすべて整えます（この後の記事で詳しく説明します）。

3. Svelte の動的な動作: 変数とプロップを一緒に作業する

これでマークアップとスタイルが保有されたので、 Svelte の ToDo リストアプリに必要な機能の開発に取り掛かることができます。この記事では、変数と props を使用してアプリを動的にし、 ToDo を追加したり削除したり、完了マークをつけたり、ステータスでフィルタリングしたりできるようにします。

4. Svelte アプリのコンポーネント化

この記事の主な目的は、アプリを管理しやすいコンポーネントに分割し、それらのコンポーネント間で情報を共有する方法を見ることです。アプリをコンポーネント化し、さらにユーザーが既存のコンポーネントを更新できるように機能を追加していきます。

5. 高度な Svelte: リアクティブ、ライフサイクル、アクセシビリティ

この記事では、アプリの最終的な機能を追加し、さらにアプリをコンポーネント化します。オブジェクトや配列の更新に関連するリアクティビティの問題に対処する方法について学びます。よくある落とし穴を避けるために、 Svelte のリアクティブシステムを少し深く掘り下げる必要があります。また、アクセシビリティのフォーカスに関する問題の解決や、その他の問題にも目を向けていきます。

6. Svelte のストアでの作業

この記事では、Svelteで状態管理を処理するもう一つの方法であるストアを示します。ストアは、値を格納するグローバルなデータリポジトリーです。コンポーネントはストアに格納され、その値が変更されたときに通知を受け取ることができます。

7. TypeScript support in Svelte

これで、 Svelte アプリケーションで TypeScript を使用する方法を学ぶことができます。まず、 TypeScript とは何か、そして TypeScript が私たちにもたらす好ましいこととは何かを学びます。次に、 TypeScript ファイルを使用して作業するために、プロジェクトをどのように設定するかを見ていきます。最後に、 TypeScript の機能を十分に活かすためにはどのような修正が必要なのか、アプリを確認します。

8. 展開と次の手順

この最終記事では、アプリケーションを展開してオンラインにする方法と、 Svelte の学習を継続するために取得すべきリソースをいくつか紹介します。

1. Angular を始める

この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリを設定し、Angular の基本的なアーキテクチャを確認します。

2. Angular todo リストアプリの事始め

この時点で、Angular を使用して todo リストアプリケーションの作成を開始する準備が整いました。 完成したアプリケーションには、やることのリストが表示され、機能の編集、削除、追加が含まれます。 この記事では、アプリケーションの構造を理解し、やることの基本的なリストを表示するようになります。

3. Angular アプリのスタイリング

基本的なアプリケーション構造がセットアップされ、アプリケーションが表示されるようになったので、次の段階へ移って、Angular がアプリケーションのスタイリングをどのように処理するかを見てみましょう。

4. item コンポーネントの作成

コンポーネントは、アプリケーションを整理するための方法を提供されます。この記事では、リスト内の個々の項目を処理するコンポーネントを作成し、チェック、編集、削除の機能を追加する方法を説明します。 Angular のイベントモデルについて説明します。

5. To Do アイテムのフィルタリング

これで、ユーザーが ToDo 項目をフィルタリングして、アクティブ、完了、すべての項目を表示できるようにする機能を追加することにしましょう。

6. Angular アプリケーションのビルドとその他のリソース

この最後の Angular の記事は、プロダクションに適したアプリを構築する方法を取り上げ、学習の旅を続けるためのさらなるリソースを提供します。

私たちは、 5 つのフレームワークに焦点を当てたガイド付きの記事の最初のセットを公開しています。そのうち4つのフレームワークは、 React/ReactDOM、Ember、Vue、Angular と非常に人気があり確立されたものですが、 Svelte は比較的新しいもので、多くのプロミスを示し、最近多くの人気を獲得しているものです。

これらを取り上げた理由は以下の通りです。

• どのようなソフトウェアツールでもそうですが、積極的に開発されているもので、来週には開発中止になっていないようなもの、また、就職活動で自分のスキルセットに加えるのに望ましいものを選ぶとよいでしょう。
• 強力なコミュニティと優れた文書化があります。特に始めたばかりの頃は、複雑なテーマを学習する際に助けを得られることがとても重要です。
• 私たちは現代のフレームワークをすべて網羅するためのリソースは持っていません。常に新しいものが現れるため、最新版を掲載するのはとても難しいでしょう。
• 初心者のうちは、利用できる膨大な数の選択肢の中から何に注目すべきかを選ぼうとするのは、とても難しい問題です。そのため、リストを短くすることが有効です。

前もって言っておきますが、取り上げたフレームワークは私たちがベストだと思うから選んだわけではありません。また推奨しているわけでもありません。ただ、上記の基準を満たしていると考えただけです。

初期の段階では、もっと多くのフレームワークを取り上げたいと考えていましたが、このコンテンツの公開を遅らせることよりも、後からフレームワークを追加する方が良いと考えました。もし、あなたのお気に入りのフレームワークがこのコンテンツに含まれておらず、それを変える手助けをしたいのであれば、私たちと気軽に意見を交わしましょう！