React開発準備をしよう (1/4)

Reactは、JavaScriptの「フロントエンド・フレームワーク」です。つまり、フロントエンド（クライアント側に表示される部分）の開発のために作られたフレームワークというわけですうね。

多くの人は、Webアプリケーションのフレームワークというと、RailsのようなMVCアプリケーションフレームワークをイメージするでしょう。JavaScriptで、フロントエンドのためのフレームワークというと、「そんなものいるのか？　普通にHTMLとJavaScriptで書けばいいじゃん」と思うかも知れません。

が、最近のWebを見ればわかるように、もはやWebページの表示というのは「テキストとイメージをHTMLで組み立てれば完成」といった牧歌的なものではありません。Webの画面の中に自由自在にコンテンツが配置され、動き回っています。何かを操作すればリアルタイムに表示が変わり、更新されます。――これ、全部手作業でコードを打ち込んで作るとなると相当に大変だと思いませんか？

高度なフロントエンド表現は、もう手書きする時代でない、といっていいでしょう。そんなフロントエンド開発のために作られたのがReactなのです。Reactは、Facebookによって開発されており、実際にFacebookで使われているものなので、その実力は保証済といってよいでしょう。



では、Reactを使えるようにしましょう。Reactのインストールには、いくつかの方法がありますが、もっともわかりやすいのはnpmを使った方法でしょう。

npmというのは、「Node Package Manager」のことです。これは本来、Node.js（JavaScriptランタイム環境）のパッケージ管理のために作られたものですが、JavaScriptのライブラリ管理に打ってつけということで、JavaScriptのライブラリやフレームワークでも利用されるようになりました。Node.jsをインストールすれば自動的にnpmも入るので、使ったことのない人はこれを機会にインストールしておきましょう。

https://nodejs.org

Reacのインストールは、コマンドプロンプトあるいはターミナルから行います。React自体はただのスクリプトファイルですので、実はインストールという作業は必要ないのですが、Reacのアプリ環境を整えるのが面倒なので、「React利用のアプリを作るツール」というものを用意しています。これをインストールしておきましょう。

npm install -g create-react-app

このように実行して下さい。この「create-react-app」というのが、そのパッケージです。これでReactアプリを作成し開発できるようになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。