Laravelで業務システム

Laravel関連の記事掲載してます

Reactを知る

ReactについてはLaravelのカテゴリーで適当に扱おうと思ってましたが、煩雑になりそうだったので独立したカテゴリーにすることにしました。

今、Reactも勉強中なのですが、Reactについて学ぼうと、公式ページのチュートリアルからやり始めました。しかしながら、オッサンの頭ではなかなかReactについて身になっていく感じがしませんでした。

こういう時はたいていの場合、段取りをスキップしすぎているときです。チュートリアルから始めるといい場合もありますが、私にとっては飛ばしすぎだと思いました。

そこで、Reactってそもそもな何なのかというところから、見ていこうと思います。

Reactって何?


wikiによれば"Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリ"らしい、なるほどこういうのを聞くとすごく親近感がわくし、人気がでるのもなんとなくわかりますね。

Reactの使うメリットとは?


いろいろとメリットはありますが、小生的には公式ページに記載されている"アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。"というところが一番の肝だと思ってます。

私が、Reactを使うとしたら、ここが生かせるアプリケーション開発に使いたいですね。

Reactの文法はJavaScriptなのか?


ReactはJavaScriptですが、ECMAScript 2015(ES6)というJavaScript規格とJSXというJavaScriptの構文の拡張によりコーディングしていく形となります。

ここが重要で、ここをすっ飛ばしてReactのチュートリアルやっていて、まったく頭にはいってきませんでした。

特に、ES6に関する勉強はある程度しといたほうがいいです。Reactの公式ページにも一応、解説されてますが、ES6の基礎ないと私にはきつかったです。

JavaScriptに規格があることは知っていたのですが、Reactやるまでほとんど意識することはありませんでした。基本的に現在のブラウザでサポートされているJavaScriptの規格はES5でReactはES6規格で記述したJavaScriptをBabelという下位のJavaScript構文に変換するトランスコンパイラを用いて変換しこの変換されたJavaScriptを利用するイメージです。尚、JSXはBabel標準では変換できないので、JSXも変換できるプラグインを含んだBabelを利用します。

しかし、ES5に慣れすぎていて、ES6のコーディングをミスることが多いです。先入観というかなんというか、まだまだ先は長そうです。

普段からES5やJqueryに慣れている人はES6で新しくなった構文をよく理解しておくことをお勧めします。

次回からLaravelでReactを扱うための手順等、学んでいきたいと思います。Laravel使うことはお許しください。Reactメインで業務システム構築する自身まったくないので・・。

では今日はここまで