ReactでToDoアプリを作成

はじめに

WEBアプリのフロントエンドに触りたいと思い、ToDoアプリを作成してみました。
Reactの基本的な用語や環境構築について記載しているため、初学者の方でもわかりやすい内容かと思います。

アプリケーションの概要

タイトルにもありますが、ToDoアプリを作成します。
タスクはチェックで完了/未完了を判別でき、フィルターで
絞り込むことができます。

環境構築

npm/Node.jsのインストール

Node.js:JavaScriptの実行環境で、サーバーサイドまで含めたアプリケーションの開発が可能となります
npm:JavaScriptのパッケージ管理ツールです

インストール手順

以下のサイトから自分のPCのOSにあった推奨版インストーラーを選択します。

※ダウンロードサイト
Node.jsダウンロードサイト

動作確認

Macの場合は、Windowsの場合はコマンドプロンプトを開いて、以下のコマンドを実行します。

正常にインストールされていれば、以下のようにバージョンが表示されます。

 

Bulma、classNamesのインストール

Bulmaとは無料で提供されているCSSフレームワークです。
classNamesはクラスの振り分けを便利にしてくれるnpmパッケージです。

以下のコマンドを実行します。

 

開発プロジェクトの作成

npm/Node.jsが正常にインストールできたら、開発プロジェクトを作成します。

ターミナル(コマンドプロンプト)で、プロジェクトを作成したい場所に移動して、以下のコマンドを実行します。

正常に実行されると、todoフォルダと配下に様々なファイルが作成されます。

また、ターミナル(コマンドプロンプト)に以下のような表示がされています。

作成したフォルダに移動し、以下のコマンドを入力します。

ブラウザに以下の画面が出れば成功です。

 

  • 以下のエラーが表示される場合

You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).

以下のコマンドを実行

※参考
Create React Appでプロジェクトがつくれない

Reactの基本用語

アプリを作成する上で基本用語について説明していきます。

component(コンポーネント)

見た目と機能を持つ部品のことをコンポーネントと言います。
今回作成するアプリでは、4つのコンポーネントで構成されています。

※参考
コンポーネントと props

props(プロップス)

親コンポーネントから子コンポーネントへ値を渡すためのデータをプロップスと言います。
子コンポーネントにpropsとしてデータを渡すことで、ToDoが表示されます。

※参考
コンポーネントと props

state(ステート)

ユーザーの動作の合わせて変わる値のことをstateと言います。
コンポーネントの内部で宣言・制御されるデータです。

propsとstateの主な違いは以下になります。

・propsは不変のデータだが、stateは可変のデータ
・propsは親コンポーネントから渡されるデータ、コンポーネント内部で保持されるデータ

※参考
React における State と Props の違い

 

アプリケーションの作成

componentsフォルダの作成

src直下にcomponentsフォルダを作成します。
このフォルダにコンポーネントを配置していきます。

コンポーネントの作成

InputToDoの作成

各コンポーネントのコードを書いていきます。
InputToDo.jsxに以下のコードを記述(貼り付け)します。

InputToDo.jsxでは入力欄とEnter押下時の動作を記載しています。
空白文字が入力された場合は、ToDoを追加せずに終了します。

Filterの作成

Filter.jsxに以下のコードを記述(貼り付け)します。

Filter.jsxではフィルターを押下した時の動作を記載しています。

ToDoの作成

ToDo.jsxに以下のコードを記述(貼り付け)します。

ToDo.jsxでは入力されたToDoをチェックボックスと共に表示しています。
チェックボックスが押下された時は、propsのonCheck関数を呼び出しています。

ToDoAppの作成

ToDoApp.jsxに以下のコードを記述(貼り付け)します。

ToDoApp.jsxでは各コンポーネントをimportして、フィルターの切り替えによるToDoの表示、チェックボックスの判定を
行っています。

index.jsxの作成

コンポーネントをまとめてimportできるようindex.jsxを作成します。
以下のコードを記述(貼り付け)します。

importする際は、以下のようにindex.jsxから複数のコンポーネントをimportします。

App.jsの修正

src直下にあるApp.jsに以下のコードを記述(貼り付け)します。

作成したToDoApp.jsxを記載しています。

まとめ

備忘録を兼ねて、環境構築からToDoアプリの作成についてご紹介いたしました。
まだまだ説明不足な点があるかと思いますが、React学習の手助けになれば幸いです。

  • このエントリーをはてなブックマークに追加