Skip to content

Node.js を使わない React + Redux 最速環境構築

Redux の入門記事はすでにいろんな方が書いてくださっているのですが、読んでみると Redux の実装に入る前にまず npm 経由で gulp やら babel やら webpack やらをインストールして、さらにサーバーを用意して、といった内容になっているものが多いです。

普段からこれらのツールに慣れている方であれば問題ないのですが、私のようにあまり慣れていない人間によっては、これらの使い方を理解して設定するだけでひと苦労で、やりたいと思っていたテーマの勉強を始めるころには疲労困憊してしまっている、ということも少なくありません。

そこでこの記事では、npm の使用に慣れていない方でも苦労することなく必要な環境をそろえるための方法を紹介したいと思います。

環境

Windows10 64bit

必要なものの整理

まず、今やりたいこと、やりたくないことは何か、そして必要なものは何か、整理します。

いまやりたいこと

  • React + Redux の実装

いまやりたくないこと

  • npm を利用した開発環境構築

必要なツール

  • React ライブラリ
  • Redux ライブラリ
  • その他 JavaScript ライブラリ
  • Sass コンパイル
  • ES2015 トランスパイル
  • Web サーバー
  • (エディタ)
  • (ブラウザ)

ツール

今回は、各種ライブラリの利用に CDN、コンパイルや Web サーバー構築に Prepros を利用することにして、最速で開発環境を整備していきます。

CDN

CDN とは、Content Delivery Network の略で、JavaScript ライブラリなどをオンラインで公開してくれているサービスのことをいいます。ダウンロードせずに各種ライブラリを利用できるので非常に便利です。

cdnjs.comというサイトで必要なライブラリを提供している CDN を検索することができるので、 React, Redux 関連の4つのライブラリを検索しましょう。

cdnjs.com:https://cdnjs.com/

  • react.js:React 本体
  • react-dom.js:React のブラウザ描画処理部分(※ react-dom.js は react.js のページにあります。)
  • redux.js:Redux 本体
  • react-redux.js:React と Redux の連携用ライブラリ

ライブラリの URL を検索したら、それを HTML で読み込みましょう。次のように読み込みを記述するだけでそのライブラリを利用することが可能です。

ちなみに、ライブラリによってはバージョンがずれると連携がうまくいかなくなったりということもあるので、公式サイトや github にも目をとおして、適切なバージョンを入手するのがポイントです。今回利用する4つはアップデートも頻繁なのであまり気にしなくてよいとは思います。

ちなみに cdnjs.com では、検索すれば babel-standalone なども入手することができます。ただ、今回トランスパイルは他のツールを使おうと思っているのでこちらは使いません。

Prepros

Sass コンパイル、JavaScript のトランスパイル、開発用の Web サーバーの立ち上げをやってくれる GUI ツールで、無料で利用することができます。

Prepros:https://prepros.io/

有料版もありますが、無料版でも十分な機能を利用可能で、Sass → CSS のコンパイル、ES2015 → ES5 のトランスパイル、ウェブサーバーの立ち上げを行うことができます。さらに、CSS, JS のオートコンパイル、ブラウザのオートリロードなどの便利な機能もそろっているので、十分使えるツールだと思います。

プレフィックスの細かい指定や、他の人と設定を共有するといったことはできないので、業務などで使うには少々不安が残りますが、個人で使う分には十分なツールだと思います。

Prepros をインストールする

公式ページからインストーラを入手し、実行すれば完了です。

Welcome to the Prepros 5.10.2 Setup Wizard

install01

Choose Install Location

install02

特にこだわりがなければデフォルトで大丈夫です。

Completing the Prepros 5.10.2 Setup Wizard

install03

Prepros にプロジェクトを登録する

任意の場所にプロジェクト用のディレクトリを作成したら、そのフォルダを Prepros にドラッグアンドドロップすれば完了です。

コンパイルの設定をする

Prepros で .scss ファイルや .js ファイルを選択すると、OUTPUT PATH、FILE OPTIONS、OUTPUT STYLE を設定することができます。ES2015 で記述するのであれば、FILE OPTIONS で Convert ES6 to ES5 にチェックを入れておきましょう。

Web サーバーにブラウザからアクセスする

index.html のような最小限のファイルを作成したら、右上にある NETWORK というボタンをクリックしてみましょう。Prepros の Web サーバーの URL が表示されるのでブラウザからアクセスしてみてください。プロジェクトディレクトリに HTML ファイルなどを作成していれば、それを見ることができるはずです。

エディタ

どんなエディタでも大丈夫ですが、ES2015, JSX の文法を解釈できるものがオススメです。

ちなみに Atom であれば、プラグインを入れることで JSX でも Emmet を利用できるようになります。

参考:Enable tab completion for JSX with Emmet in Atom
https://gist.github.com/mxstbr/361ddb22057f0a01762240be209321f0

ブラウザ

今さら必要なツールというと大袈裟ですが、Google Chrome が JavaScript の関数の実装も進んでいるのでオススメです。

まとめ

以上、Node.js を使わずに開発環境を構築する方法を紹介しました。

最近のフロントエンドは npm を使って環境を構築するのが主流なのでもちろんそれも使えるようになっておきたいところですが、必要がなければラクな方法を選ぶのも悪くない選択だと思います。

関連記事はこちら

【Redux入門】 React + Redux の考え方を理解する

Comments are closed.