本セミナーは、WPJプレミアムメンバー向けのセミナー「LIVE LESSON」の一環として開催されたもの。ドーナツ本として有名な書籍『Web制作の現場で使う jQueryデザイン入門』の著者・西畑一馬さん（株式会社トゥーアール代表取締役）を講師に迎え、実際に手を動かしながら、Reactとは何なのか？ 何ができるのか？ どうやって書くのか？ といった基本を学びました。
なぜReactが必要なのか
JavaScriptライブラリーといえばjQueryが長らくデファクトとして使われてきましたが、昨今は「脱jQuery」を唱えるブログや記事を見かけることが多くなり、「Reactを使うのがいまっぽい、jQueryはオワコンと言われている」（西畑さん）状況。ところがW3Techsの調べでは、jQueryを使っているサイトはJavaScriptを使っているサイトの96.5％に上り、トレンドとは裏腹にほとんどのサイトでjQueryが使われているのが実態です。
西畑さんは、「Reactを初めとする、jQuery以降のフレームワーク／ライブラリーは、（残りの数パーセント、jQueryではきつくなってきた領域の課題を解決するために生み出されたツール」だと説明します。
というのも、jQueryのコードは直感的に自由に書けるものの、他人が書いたコードが読めない、あるいは以前自分が書いたコードですら読めなくなることがしばしば。「特にWebアプリの開発にはjQueryは不向き。Reactのようなフレームワーク／ライブラリーはルールに沿って制限の中でコードを書くことで、属人的な要素を減らすことができる」（西畑さん）。
ReactでToDoリストアプリを作ろう
こうした背景を踏まえて、セミナーではCodePenを使ってReactのコードの書き方を学びました。Reactを使うには開発環境の構築が必要ですが、CodePenを利用することでブラウザー上でコードを書いてすぐに結果を確認できます。前半はReactの基本として、ReactでDOMを出力するために使うJSXの構文を学習。JSXはHTMLによく似ていますが、「ルート要素は1つ」「属性名が一部異なる」などの違いもあります。そうした注意点を交えつつ、Reactの肝であるコンポーネントの概念と作り方、ステート、Props、イベントといった基礎をコードを書きながら学んでいきました。
すぐに質問できるのは、LIVE LESSONならでは。
後半ではReactでToDoリストアプリを作成。フォームの入力値を取得して表示する機能からスタートし、取り消しボタンが押されたら取り消し線を引く、要素を取り除くなど、ステップアップしながら、最終的にToDoアプリを組み上げました。
これからの勉強法
今回のセミナーはReactの「超入門」。より本格的なWebアプリの開発には、さらに学習が必要です。今回作成したToDoリストアプリを基に、今後の学習の進め方、拡張例を挙げてセミナーは終了しました。
- 日付の項目を追加
- 削除機能を強化
- 編集機能を追加
- ページング機能を追加
- react-routerを使ってみる
- Reduxを使ってみる
- APIと連携
セミナー終了後のアンケートでは、
- 簡潔に説明いただいたのでわかりやすかった
- 3時間ではなく、1日時間をかけて、さらに先を学びたい
- スペシャリストの方のお話を聞けるだけでも意味のあるセミナーでした。もちろんReactを使う機会を作れたことも自分にとってプラスになりました
- 環境構築がこれからですが、しっかり勉強してみたいと思いました
といったご意見をいただきました。いざReactを学ぼうとしても入門者向けの書籍やWebコンテンツはまだまだ少なく、これから学びたい人には有意義なセミナーとなったようです。
プレミアムメンバーなら当日の動画も視聴できます
本セミナーの資料と当日の動画はWPJプレミアムメンバー限定で公開しています。LIVE LESSONに参加できなかったプレミアムメンバーの方もぜひご覧ください。
また、WPJでは「明日から使えるスキルを持ち帰る」をコンセプトに、今後も各分野の第一人者を講師にお迎えした少人数制セミナー「LIVE LESSON」を年4回開催する予定です。現在、以下のラインナップを計画しています（計画中のため、変更になる可能性があります）。
- React / JavaScript講座（セミハンズオン）
- Sketch入門（セミハンズオン）
- Webライティング（ワークショップ）
- デジタルマーケターのための統計学入門（セミハンズオン）
WPJプレミアムメンバー（月額972円）を購読して、高品質なセミナーをぜひご体験ください。
「3時間で体験！これから始める React超入門」を再演します
募集開始後すぐに申し込み数が定員に達した今回のLIVE LESSON。たくさんのご要望をいただき、5月に再演版を開催します（内容は同じです）。詳細はこちらから。
