超初心者向け!5分でわかるReact.jsの基礎の基礎

reactのロゴ

どうも、Rubyエンジニア目指して修行中Yuta(@yuta)です。

今回は、エンジニア業界で話題沸騰中(わだいふっとうちゅう)のJavascriptライブラリ、Reactについて取り上げています。

この記事は、

「よくReactって最近聞くけどなんだろう」
「オンラインレッスンで学んだけど、難しい用語ばっかりで意味がわからない」

と感じているあなたに向け。移動中にサクッと概要を知りたいと思っていたら、この記事はやくにたつことでしょう。 

まずはReact.jsの基礎の基礎から学ぶ

Reactは、Angular・Vue.jsなどと同じ、JavaScriptMVCフレームワークの一種です。

MVCとは、アプリケーションを構成するレイヤー構造のことで、Model – View – Controllerをさします。
Reactは、コンポーネントと呼ばれる小さなUIの部品を組み合わせて、巨大なアプリケーションを作成することを得意としています。

Javascript初学者にとって難しい単語が並んでいますね。まず、「DOMってなに?」と思った人も多いと思います。
ググってみると、Document Object Model(ドキュメント・オブジェクト・モデル)の略とのこと。

DOMをメリットは、Javascriptのコードを通じてHTMLやCSSを編集できるみたいですよ。

これだと個人開発や少人数での共同開発のシーンで、少ない労力でコードの編集や修正ができそうですね。詳しい解説をしたサイトを見つけたので、乗せておきます。

JavaScript初心者でもすぐわかる!DOMとは何か?
JavaScrip超初心者によるJavaScript入門講座

今これを読んでいるあなたが使っているカバンも、ファスナーやストラップなどを細かいパーツを組み合わせて作られていますよね。

それと同じで、ReactもJavascriptで書かれたパーツをたくさん組み合わせることで、最終的に使い勝手がいいアプリになります。

パーツだから、RailsやCakePHPといった他のフレームワークに使えるのも特徴。

実際に、海外ではReactによる開発が盛んらしいので、興味のある方はGitHubに転がっているソースコードをのぞき見してみるといいでしょう。

React.jsにおけるコンポーネントの仕組み

ReactDOM.renderは、Reactのもっとも根幹をなすもので、作成したコンポーネントを実際のHTMLの中のどの場所を起点に描画するかを指定するために利用します。
ReactDOM.renderで指定された起点をコンテナと呼び、Reactはこのコンテナの中にコンポーネントを展開します。

まず、コンポーネント(component)とは、直訳すると成分部品という意味です。
例えば、次のようなソースコードがあったとしましょう。

このコード、一見するとHTMLのように見えますが、実はJSX(Javascript XML)と呼ばれる言語です。Facebookが作成した言語し、JavascriptによってHTMLのように見せています。

でも、難しく考えなくて大丈夫。書き方はほとんどHTMLと同じで、開始タグと終了タグで要素を囲めばOKです!

開始タグと終了タグで囲まれた要素をJSXとしてReactが読み込むことで、ブラウザにはHTMLとして表示されるんだなー。

今はこのようにな感覚をつかめていれば、やっていくうちに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ですが、少しずつほぐして解釈すると、以外とシンプルな考え方だったりしますね。

プログラミングを学んでどんどんスキルアップしちゃいましょう!