【PR】

プログラム

Windows 環境だけど React 入門(三目並べ)してみた【たぶん最新環境】

投稿日:

色々あって、React を触ってみようかなと思ったけど Windows 環境で試している人が少なかったので、何となくまとめてみる。

何故、React を学ぼうとしたのか

以前のエントリで「Web サービス作りたいわ」とほざきましたが、実際のところ何で作ろうかなと思案しておりました。これまで趣味で使ったことのある延長で行くと、Ruby On Rails で作ることになるかなと思っているんですが、同時に最近のフロントエンド開発のあたりも触っておきたいなと。ということで、データの管理・登録などのバックエンドは Rails で作り、フロントで利用するための Web API を生やしつつ、フロントエンドは何か最近の流行りもので作ろうかなと思ったわけです。
で、何を使おうかなと思っていたんですが、最近の Rails 5.1 から、Webpack(プロジェクト内の JS、CSS ファイルなどの依存関係を考慮して、最終的にいくつかのファイルに分割してくれたり、ES6 や SCSS などのプリプロセスをやってくれたりするタスクの実行者)のサポートが開始されて、Vue.js や React も同時に導入できるようになった様です。最近だと周囲では React 使っている人の話を聞くので、まずは React やってみるべ、という流れで今に至ります。

でも、私は Windows 環境なんです……

ということで、さっそく周囲に聞いたりしてみましたが、軒並み Mac ユーザばっかりで導入から違うじゃねぇか!という叫びが出そうになります。ネット上にもそれなりに情報はありますが、Windows 環境でこの手のことをするケースは Mac に比べると少ない(無いわけではない)のが現状の様です。時に、解説通りにコマンド打って見ても、Windows だとうまくいかない的なケースもある様でなかなか悲しい思いをしますね。Mac 買ってもいいかなと思っているんですが、もうちょい粘ってみて限界が見えたらにしようかなと。

最初に ~Node.js をインストールする~

さてさて、まずはフロントエンド開発に欠かせないと思われる Node.js をインストールしてみます。「Node.js って何なん?」という疑問についての自分なりの答えとしては、「ブラウザ上で動作する通常の JavaScript とは異なり、それ以外でも実行ができる様な JavaScript で、ローカルで動くツールやサーバサイドのプログラムも書けちゃうらしいっすよ」って感じです。フロントエンド開発においては、いろいろなコマンドラインツールを使ったりしますが、それらは Node.js で書かれた npm(Node Package Manager)を使ってインストールされます。今回の目的は React のチュートリアルをやり遂げることですが、そのために必要なツールもやはり npm 経由でインストールすることになります。

Node.js を Windows にインストールする方法はいくつかあります。

  1. Chocolatey を利用する方法
    Windows 用のパッケージマネージャーとして使われている Chocolatey を導入してから node を入れる方法
  2. nodist を利用する方法
    Node.js のインストールやバージョン管理をしてくれる nodist を導入してから入れる方法
  3. 愚直に Node.js をそのままインストールする
    Node.js 公式サイト からいきなりインストールする「パッケージ管理?そんなもん必要ねぇ」という男気があふれる方法です

今回は最速で導入するために3を選びましたが、ちゃんとバージョン管理などをしたい人は他の方法を検討の上、選択してください。ちなみに Node.js の公式サイトには Chocolatey を利用した時のインストール手順も書いてくれています。

さて、インストールが完了したら、コマンドプロンプトを起動し、【node -v】や【npm -v】などのコマンドを実際に叩いてみて、ちゃんとバージョンが返ってくるかを確認しておきましょう。うまくいかない場合はパスが通ってなかったりするかもしれません。

Proxy の罠があるので注意

会社内などで利用する場合、Proxy を通しておかないとパッケージの取得に失敗したりするケースがあります。Node.js(npm) は Windwos の環境変数を見てくれるようなので、シンプルにやるのであれば環境変数 【HTTP_PROXY】にプロキシのアドレスを設定しておけば概ね問題はないはずです。【HTTPS_PROXY】の方を利用するかは定かではないので、その辺りは必要そうなら設定をどうぞ。

入門者にありがたい create-react-app

さて、後は公式のチュートリアルページ通りに進めていけば良いわけですが、個人的にその中でありがたいなぁと思ったのは、create-react-app というパッケージです。これまでは「さて、React 学んでみるか!」となった時に、npm でいくつかのパッケージを導入する必要がありました。さらにその確認もファイル保存後にプリプロセスを行ったうえでやっと確認できる、といった感じになり敷居が高かった様です。ある程度この環境構築に慣れている人なら問題ないですが、初学者の場合は躓きポイントになります。そんな迷える子羊のために公式が用意したのが create-react-app です。

前述のようなプリプロセス関連のパッケージ導入はもちろん、ファイルの変更を検知して自動で更新・反映されますし、ローカルサーバを立ち上げてくれるので確認も簡単です。さらに成果物として React アプリを出力することもコマンド1つでできてしまいます。

create-react-app 導入

create-react-app の導入とアプリ作成を行うためのコマンドは以下の2行だけです。

[bash]
> npm install -g create-react-app
> create-react-app 【作りたいアプリ名】
[/bash]

2行目の create-react-app の実行が失敗する場合はパスが通っていない可能性があります。1行目のインストールでこけていなければ、PC 内を検索すると create-react-app.cmd があるので、それを直接指定すれば実行できるはずです。ただ、今後の動作に不安もあるので、node.js のインストールから見直すのも視野に入れて置いたほうがいいかもしれません。

アプリ作成が終わったら、後は開発に必要なタスクを走らせるだけです。

[code]
> npm start
[/code]

これだけです。あとは少し時間がかかりますがローカルサーバが立ち上がり、ブラウザが自動的にサンプルページを表示してくれるはずです。ビルドする場合は

[code]
> npm run build
[/code]

すると、build フォルダが作成されてその中に静的ファイルが一式出力されるので、配置したい Web サーバにそのまま置けば OK です。

準備完了!いざ、公式チュートリアルへ!

これで準備は完了しているので、公式のチュートリアル を読みつつ実際にコードを編集していきましょう。「英語か~……」って人は 和訳されている素晴らしいページ があるのでそちらを読み進めればよいかと。素晴らしいですね。

 

【PR】

-プログラム

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Ruby】Twitter 検索結果をまとめたページを作成するスクリプト【Windows】

動的に Twitter の検索結果を取得&表示してみたかった かなり前になっちゃいますが、御朱印の Web サービスを作ってみようかなと思っていたんですが、その中で神社・仏閣の御朱印についてのつぶやき …

別の PC で作った Unity プロジェクトを開いたら真ピンクだった件とその対応策

Unity プロジェクトを開いたらそこはピンク色の世界だった 最近は Unity も趣味でポチポチといじっていたりするのですが、家の PC が複数台ありその間でプロジェクトを共有しようと思いました。具 …

eslint logo

ESLint の導入がうまくいかなかった件のメモ書き【Windows】

目次1 ESLint を導入しようとしたらトラブった2 ESLint 導入からトラブル発生まで3 とりあえずバージョンを落とす作戦へ ESLint を導入しようとしたらトラブった JavaScript …