Blog

CodePenでReactを試してToDoリストを作ってみた

2017.11.14Cat:javascript プログラマー

少し前にReactを体験するために、CodePenで簡単に始められるとのことでやってみました。
今はcreate-react-appというツールがあり環境構築は簡単になっていますが、当時は環境構築が大変と言われていました。

CodePenならcdnをいくつか読みこむだけでOKです。

なので今更ではありますが、やっと触ってみました。

Reactって?

facebook製のjavascriptライブラリです。(正式にはフレームワークではないらしいです)
UIに特化していることで、フレームワークではないみたいですね。
ただ、他のライブラリーを組み合わせればフレームワーク同等に使えるようです。

特徴としては、JSXを使用する点で、
ほぼhtmlは書かず、DOM部分もjavascriptで記述します。
javascriptといってもhtmlに近い形で記述することが出来るので少し注意すれば問題ないかと思います。

特徴の説明は下記ブログでわかり易く説明されているので、ご覧ください。

JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators' blog(ドワンゴクリエイターズブログ)

今回はタイトルにもあるように、reactでTodoリストを作ってみました。

See the Pen reactで簡単todoリスト by abe on CodePen.

CodePenの設定

JavaScript Preprocessorを「Babel」を設定し、
reactのcdnを読み込ませます。

この時は以下の2つを読み込んでいました。(※今はもう新しいverがでていますね…)

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js

ToDoリスト作成

今回作ったTodoリストの内容としては、
・ToDoの追加・編集・削除
・ToDoの完了
・ToDoのソート
といったシンプルなもので、
データはlocalStorageを使用しました。

jsのコードをとりあえず載せます。

細かい解説は省かせてもらいますが、
・ToDo
・TodoItem
・TodoAdd
という3つのコンポーネントを作って構成してます。

コンポーネントを親子関係にした時に、子と親のデータのやりとりが最初戸惑うので、
理解するまでは参考のコードを見てその通りにするのがいいと思います。

長く複雑に見えるかもしれませんが、お作法的な文が長いだけでやっている事自体はそこまで難しいわけではないので、
これも慣れてくれば心地よいのかもしれません。

ルールがしっかりと決まっているので、自分で作ってしばらくした後に見ても(実際このコードを半年ぶりに見ました…)
他人が見てもある程度流れがわかるので、コードの質としてはそれなりに担保されたものが出来るかと思います。
複数人数でやるのにいいですね!

残念ながら実務の案件でReactをやることがないので、なかなか触ることはありません。。。
今度はAngularに挑戦してみたいと思います。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ