こんにちはyoshidaです。

javascriptのWEB系フレームワークといえば、Angularjs・vue.js・React.js・jqueryなどがありますよね。

友人からこの中で最近流行っているのはvue.jsとReact.jsで、今から始めるなら難しいけどReact.jsがいいと聞いたので本格的に学んで見ることにしました。

Reactの公式チュートリアル

Reactには公式のチュートリアルがあるので触ってみます。

↓公式チュートリアル

内容は○✕ゲームのWEBアプリ作成となっており、Reactを使う上で重要なprops・state・render()の使い方やReactクラスの呼び出し方・作り方などを学ぶことが出来ます。

ソースをコピペすれば何も考えずに完成させることは出来ますが、本文の説明を読まないと仕組みや挙動が理解できないので難しくても時間をかけて内容を理解することをおすすめします。

しかしチュートリアルだけで100％理解するのは難しいと思うので終わった後に何個かWEBアプリを作成するとより理解が深まると思います。

Reactで電卓のWEBアプリを作ってみた

上記のチュートリアルを踏まえてWEBアプリを作成してみました。

参考にしたのは以下のプレーンなjavascriptで作成された電卓アプリです。

これをReactで作成してみました。

内部の計算部分は出来ているのでReactの機能を使って実装することを意識して作成しました。

ソースは以下のGitHubに上げました。

かなり苦戦したのがチュートリアルのクラス構造を真似した所、「TypeError: Class extends value undefined is not a constructor or null」のエラーが発生したことです。

チュートリアルのクラス構造としてはクラスの中でタグ化したクラスを呼び出すような構造で上記のエラーメッセージは一度も出たことがありませんでした。

色々調査や試行錯誤したのですが結局エラー原因の特定が出来なかったので、チュートリアルのクラス構造を真似るのを諦めてクラスを1つにし、他の機能はクラス内のメソッドにすることで解決しました。

githubのコミット履歴を漁ればエラー発生時のソースが残っているとは思いますが、未だに原因がわかりません。。

他にもメソッド内の変数は1度きりで処理が終われば保存されないがthis.stateで設定した変数は保存されるなど、プレーンなjavascriptとの違いがありsetStateを元のソースを改良する必要があったことですね。

まとめ

Reactは・・・・難しいですね。

特有の仕組みや書き方が多いのでマスターするまで時間がかかりそうです。

次はどんなWEBアプリを作るか考えておきます。