どうも、Rubyエンジニア目指して修行中フYuta（@yuta）です！
今回は、エンジニア業界で現在ではフロントエンドのフレームワークとして主流の一つであるJavascriptフレームワーク、Reactについて取り上げています。
今回の記事の対象者
- 「よくReactって最近聞くけどなんだろう」と気になっている方
- 「オンラインレッスンで学んだけど、難しい用語ばっかりで意味がわからない」とお悩みの初心者さん
もしあなたが、「スキマ時間にサクッとReactの概要を知りたい」なら、一読する価値があるでしょう。
まずはReact.jsの基礎の基礎から学ぶ
Reactは、Angular・Vue.jsなどと同じ、JavaScriptMVCフレームワークの一種です。
MVCとは、アプリケーションを構成するレイヤー構造のことで、Model – View – Controllerをさします。
Reactは、コンポーネントと呼ばれる小さなUIの部品を組み合わせて、巨大なアプリケーションを作成することを得意としています。
Javascript初学者にとって難しい単語が並んでいますね。まず、「DOMってなに？」と思った人も多いと思います。
ググってみると、
DOMのメリットは、Javascriptのコードを通じてHTMLやCSSを編集できることです。
個人開発や少人数での共同開発のシーンで、少ない労力でコードの編集や修正ができそうです。詳しい解説をしたサイトを見つけたので、乗せておきます。
JavaScript初心者でもすぐわかる！DOMとは何か？
JavaScrip超初心者によるJavaScript入門講座
例えば、今これを読んでいるあなたが使っているカバンも、ファスナーやストラップなどを細かいパーツを組み合わせて作られていますよね。
それと同じで、ReactもJavascriptで書かれたパーツをたくさん組み合わせることで、大規模なアプリを作成することが可能なんです。
React自体はあくまでビュー画面を使いやすくするためのものなので、RailsやCakePHPといったサーバーサイドフレームワークとの組み合わせも相性バツグン。
Reactの実用例は非常に多く、実はあの任天堂もNINTENDO eShopではReactを採用しているようですよ。
React.jsにおけるコンポーネントの仕組み
ReactDOM.renderは、Reactのもっとも根幹をなすもので、作成したコンポーネントを実際のHTMLの中のどの場所を起点に描画するかを指定するために利用します。
ReactDOM.renderで指定された起点をコンテナと呼び、Reactはこのコンテナの中にコンポーネントを展開します。
まず、コンポーネント（component）とは、直訳すると成分や部品という意味です。
例えば、次のようなソースコードがあったとしましょう。
このコード、一見するとHTMLのように見えますが、実はJSX(Javascript XML)と呼ばれる言語です。Facebookが作成した言語し、JavascriptによってHTMLのように見せています。
でも、難しく考えなくて大丈夫。書き方はほとんどHTMLと同じで、開始タグと終了タグで要素を囲めばOKです！
[speech_bubble type=”ln” subtype=”R1″ icon=”child2.jpg” name=””]開始タグと終了タグで囲まれた要素をJSXとしてReactが読み込むことで、ブラウザにはHTMLとして表示されるんだなー。[/speech_bubble]
今はこのようにな感覚をつかめていれば、やっていくうちにReactについて覚えていくハズ！
React.jsのベース部分！コンテナとコンポーネント
と書かれた部分は、ReactDOM.renderがReactを使うためのスタート地点として指定している場所。ブラウザに”Good morning Taro”と表示させるために、上記のように記述していて、Reactではこれをコンテナとして設定しています。コンテナという箱に入れることで、
getElementById
というメソッドに通し(“Greeting”という値を渡す)、”Good morning Taro”とブラウザに出力。その結果が、以下のコードになります。
getElementByIdってなに?
Get…取得する
Element…要素を
By…〜よって
Id…ID
という要素を取得するためのメソッドです。これはJavascriptを学ぶと必ず出てくるメソッドで、Reactでも登場する機会が多いので覚えておきましょう。
Javascriptを知らない！というあなたはこちらのサイトで動画を見ながら学ぶのがおすすめです。
最後に
今回はReactを学ぶための基礎中の基礎について学ぶことができました！
難しいと思われがちなReactですが、少しずつほぐして解釈すると、以外とシンプルな考え方だったりしますね。
プログラミングを学んでどんどんスキルアップしちゃいましょう！
