libro
www.tuyano.com
初心者のためのReact入門

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

作成:2017-03-25 08:54
更新:2017-03-25 08:54

■Reactを準備する

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

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

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

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


■Reactのインストール

では、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アプリを作成し開発できるようになります。

※プログラムリストが表示されない場合

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


※関連コンテンツ

「初心者のためのReact入門」に戻る