こんにちは。あやおり子です。
今回は、WordPressサイト制作者が、公式サイトを見ながらReact.jsでTodoリスト作ってみましたので、その記録をまとめました。
- WordPressでのサイト制作経験はあるが、React.jsは触ったことがない人
- React.jsの公式チュートリアルを一通り読んだ後のイメージが掴めない人
- AI（ChatGPT / Copilot）を使いながらReactを学んでいるが、理解が追いついているか不安な人
- 実際にReact.jsで作ったTodoリストを見てみたい人
- WordPressとReact.jsの考え方の違いに違和感を覚えている人
完成品のTodoリスト
まず結論から。完成したTodoリストはこちらです！
- カテゴリーとテキストを入力したら、追加ボタンを押してリストに追加する機能
- リストのチェックを入れたら、残り数がカウントされる機能
- リストの各項目の編集・削除機能
- カテゴリーの編集・削除機能の追加
- 完了済みを隠す機能の実装
私のスキル
私はWordPressを中心にWEBサイト制作をしてきましたが、React.jsをはじめとするモダンなJavaScriptを実務で使ったことがありません。
- 新卒から8年間WEBサイト制作を行う。
- 複数の会社を経て、現在はWordPress専門のWEBサイト制作会社に所属。
- HTML&CSSでサイトのコーディングやWordPressでのテンプレート制作を行う
- WordPressはテーマだけではなく、プラグインを作成することも可能
- Javascriptは調べながらだとある程度できる
- 大学でC言語を軽くやってたため、プログラミング経験が全くないわけではない。
- 数年前にVue.jsを勉強していたが、実務で使う機会なし。
- WEB解析士、ITパスポートの資格所有
なぜReact.jsなのか？
WordPressではReact.jsが使われており、ブロックエディターを活用したサイトを作るには、React.jsの知識が多少なりとも必要でした。
もちろん今の時代、ChatGPTに聞けば、大枠を知らなくてもある程度のものが作れます。
しかし、制作者たるもの、不具合があったときに修正できなくちゃならないと思い、ちゃんとReact.jsを理解する必要性を感じていました。
どうしてToDoリストなのか
私は、新卒の時にプログラミング課題としてToDoリストを制作した思い出から、「ToDoリストはWEBアプリ作る上で基本中の基本」という印象がありました。
また、ChatGPTに相談したら、追加・挿入・削除・編集をまとめてCRUD 操作というらしく、エンジニアに転職する際もこの4つの操作ができるかを見られるらしいです。
TodoリストはこのCRUD の練習台にもってこいだと思いました。
React.jsの勉強方法：公式チュートリアルの内容をまとめたGitリポジトリを作る
私の具体的な勉強方法は、チュートリアルの内容をまとめたGitリポジトリを作ることでした。
スクールや本もあるのを知っていますが、モダンなフレームワークでは情報が追いつかない印象でした。また、WordPressの不具合や新機能調べていても「公式の情報には勝たん」と思うことも度々ありました。
そのため、今回は公式の情報とAIだけで、React.jsを勉強してみることにしました。
基本的な方針は以下の通りです。
- チュートリアルの内容をまとめたGitリポジトリを作ってから、Todoリストを作る。
- 時間が経ってもReactの内容を思い出せるように、 Reactの動かし方をまとめる
- Tailwind CSSやReact Routerなど、ちょっとトリッキーなことをやった場合の再現方法をまとめる
- チュートリアルに書いてあったコードをコメントアウトで補足して理解
- 発展的な内容にも挑戦し、どうしてこの記述になったかをコメントで都度追記
Qiitaの記事を参考にローカル環境で動かす
まずはとりあえずReactで何かを表示させるところまでやりたいと思いました。
しかし、チュートリアルにはアプリのインストール方法しか表示されておらず、動かすイメージがつきませんでした。
そこでネットで調べたところ、ローカル環境でReact開発を始めるまで、シンプルに説明してある記事を発見。
【React入門】ローカル環境でReact開発を始めるには？
https://qiita.com/y_kato_eng/items/68e6c971358ddffbc5ff
この記事を参考にローカル環境でreactの環境構築を進め、特に問題は発生せず、無事にローカルで動かすことができました。
クイックスタートの三目並べとにリスト作成挑戦
次に、実際にアプリがどう動くかの全体像を確認したいと思い、公式のクイックスタートに書いてあった三目並べに挑戦。
主なフローは以下の通り。
- チュートリアルの四目並べ各ステップを理解しながらコードを写す
- わからないところはChatGPTで詳しく聞きコメント追記
- 記述で改善したいなと思う箇所があったら、記述変更追加に挑戦してみる。
- 3.で詰まったらChatGPTに聞く
これらの手順を繰り返すことで、三目並べを構築していきました。
公式チュートリアルの三目並べは3×3しか対応していないため、融通が効きにくい仕様でした。そのため、サイズを指定することで4×4や5×5のマスでも対応する仕様変更に挑戦しました。
そして、クイックスタートの「React の流儀」に記載されているリストも作成。
- 検索機能
- 在庫が0の商品の表示非表示機能
- チェックボックスの商品の料金の合計を計算してくれる機能※オリジナル
- 残数表示機能、および各商品をチェックしたら残数が1つ減る機能※オリジナル
- 残数が0の商品はチェックできないようにする機能※オリジナル
このように、クイックスタートの機能だけではなく、オリジナル機能も作成しました。
公式サイトのチュートリアルの項目を進める
「React の流儀」の内容ってリスト作成でいいのかな？？？と悩んでいたら、三目並べとReactの流儀はあくまでクイックスタート扱いであり、チュートリアルは別にあることを発見しました。
公式チュートリアルの記載順
なぬー！三目並べやリスト作成に時間をかけてたのに、より単純なチュートリアルがあったんかい！！！
どうやら、三目並べはReact.jsで一度アプリを動かしてみたい人向けのコンテンツだったようです。
基本的なReact.jsの記述方法はチュートリアルで丁寧に説明されていましたので、チュートリアルを1ページずつやり直しました。
UI の記述：Reactで使うJSXがHTMLとどう違うのか的な書き方が中心。Reactでよく使うJavascriptのmap() や filter() などのメソッドについても丁寧に書かれていて、初心者でも理解しやすかったです。
インタラクティビティの追加：Reactで使われるstateの基本的な使い方について解説されており、三目並べの内容をより具体的に学べる内容でした。
state の管理：reduceのような新たな要素が出てくるため、急に難易度が跳ね上がった印象に。これって、どこまでやればいいんだろう？と頭を抱えてたら、「INTERMEDITATE（中級）」の文字があり、一通りざっくりやればいいんだなと理解しました。
避難ハッチ：「ADVANCED（上級）」と記載されていたため、この項目は飛ばして、実際にアプリを作って理解を深めることを優先しました。
Todoリスト制作開始
そして、ようやくTodoリスト制作開始しました。
時間をかけて作り込むよりも、早い段階で全体像を掴んで動くものを作ってから改修していきたいと思い、おおよそ1週間を目処に作成しました。
ToDoリストのデザイン（制作期間：1.5日）
CanvaのTodoリストのデザインを参考にしながら、Figmaでデザインをし直しました。背景のドットはFigmaで作成したもので、アイコンはフリー素材です。
Reactの環境構築〜制作方針決め〜HTMLコーディング（制作期間：1.5日）
次に、ToDoリストのデザインをもとに、作り込む土台を構築していきました。
CSSはSCSSを採用
あまりCSS周りで時間をかけたくないと思い、React.jsで推奨されているTailwind CSSではなく、Sass（SCSS）を使ってコンパイルする方針にしました。
なお、別途リセットCSSを用意すると複雑になるになる可能性があるので、リセットCSSだけTailwind CSSのものを利用しました。
HTMLコーディング
次に、HTMLのコーディングを行いました。
Reactでコンポーネント分割しやすいように、画面を構成するパーツをあらかじめコンポーネント単位で分け、クラス設計を考えながらCSSを当てていきます。
このとき意識したのは、後からコンポーネントをさらに分割する可能性を残すことです。そのため、CSSは入れ子構造にしすぎず、できるだけフラットな指定を心がけました。
また、〜-list と 〜-list-item のように、クラス名だけで親子関係が想像できる命名を意識しています。
あわせて、各コンポーネントには将来的なデータの受け渡しを想定し、state 変数の設計や追加も並行して行いました。
実際に分割を進めていくと、当初想定していなかった div タグの追加が必要になる場面も多く、「クラスとCSSが直接ひも付く」Tailwind CSS が推奨される理由も、身をもって理解できたように思います。
デザインカンプでわかるアイテム追加・挿入機能の実装（制作期間：2日）
コンポーネント分割した各パーツにて、具体的なCRUD操作を追加していきます。
チュートリアルの内容をもとにしたクイズ感覚でコーディングを行い、どうしてもわからない場合はChatGPTに質問していました。
「カテゴリーを追加する」のボタンは、 モーダルのデザインを1から作成する手間を抑えるため、あえてテキストの入力ボックス付きメッセージを表示するprompt() 関数を利用しました。
デザインカンプになかった削除機能や編集機能などを追加していく（制作期間：2日）
土台となったToDoリストが紙ベースのデザインであったため、初めは削除機能や編集機能は想定していませんでした。
しかし、せっかくToDoリストを作ったんだから、CRUD 操作（追加・挿入・削除・編集）は全部できることをこのアプリで証明したいよな…と思い、別途機能を追加しました。
機能変更に伴い、カテゴリーとアイテムにそれぞれIDを設ける仕様に変更し、カテゴリーとアイテムのどちらも編集できるように工夫しました。
まとめ：Todoリストが完成して感じたこと
そんなこんなで、おおよそ1週間でToDoリストが完成しました。
AIのサポートもあり、初めてにしてはかなり順調に制作できたのではないかと思います。
何かしらのアプリを0から作ることの大切さを学んだ
チュートリアルを終えたことで、Reactの基本的な構造やstateの概念は理解できましたが、白紙からアプリを作る感覚はまだ掴めませんでした。
実際にTodoリストを作ることで、Reactの状態管理や配列・オブジェクトの扱い方を、初めて実務的に理解できました。
配列やオブジェクトの概念に苦戦
一番意外だったのは、配列やオブジェクトがかなり出てきたことでした。
React.jsでは配列やオブジェクトを利用して、値の出し入れをしていきます。
WordPress上でPHPを使う分には、配列やオブジェクトを使う機会が出てこないため、馴染みがあまりないfill()関数やmap関数あたりの理解に苦戦しました。
モダンな記述を書く特訓になった
WordPressでは、触る人の知識レベルがバラバラなため、三項演算子やアロー関数のようなモダンな記述をあえて使わずに書いていました。
一方、React.jsは比較的新しいJavaScriptのフレームワークということもあり、三項演算子やアロー関数を前提とした書き方が多いです。
波括弧を使って記述していた処理がどんどん省略されて出てくることに最初は戸惑いましたが、公式サイトのチュートリアルの記述のほかに、AIが提示する公式推奨の書き方を読み解いていく中で、コードを読む力はかなり鍛えられたと感じました。
ChatGPTとCoplitの使い分け
Coplitに質問するとファイル全体を調べてくれるので、エラーが発生した時に修正箇所を具体的に指示してくれるのがわかりやすいと思いました。
また、コメントを追記しようとしている内容を予測して表示してくれる機能には大変感動しました。自分の書きたいことを別の言葉で説明してくれているようで、大変理解が深まりました。
一方で、Coplitに質問したら私が作業中の内容を上書きで修正してしまうのがかなり厄介でしたので、詳しい解説を聞きたいときにはChatGPTに質問していました。
なお、ChatGPTも聴き方によっては、まだ考え途中の内容まで全て回答されてしまうので、ChatGPTに「勉強中だから聞かれたこと以外回答しないで」と注意した上で、自分が理解しているかを一文ずつ確認しながら利用していました。
実務で使うには、Reactの他にAPI連携をするスキルも必要。
Todoリストを作ってみて、React.jsの基本構造やstate管理の理解だけでなく、配列やオブジェクトの扱い、コンポーネント分割の考え方まで学ぶことができました。
一方で、WordPress経験があるからこそ、React.jsだけではTodoリストを保存できないことがもどかしく感じました。Todoリストだけでは実務とは少し離れており、本格的に運用するにはLaravelなどで別途API連携が必要だと実感しました。
今後は、React.jsでAPIを利用したブログ制作にも挑戦し、学んだ知識をより実務寄りに活かしていきたいと思います。
