LoginSignup
12

More than 5 years have passed since last update.

Browserify, Babelify, React, Arda で画面遷移を表現する その1

Last updated at Posted at 2015-08-17

タイトルのキーワード通り、React を使った Javascript 開発の入門的なのをやってみました。
考えたり試行錯誤したことを丁寧に記述してみた(つもり)ため前置きが長いです。ご了承ください。

この記事では、

  • Browserify の働きと使い方
  • Baberify を組み合わせる
  • React のコンポーネントを表示してみる
  • Arda でコンポーネントの切り替えをしてみる

というのがトピックです。

作業したリポジトリがあるので、こちらも良かったらご覧ください。

当方は、仕事上 jQuery で DOM をこねくり回していますが、このままではいけない危機感と、もう一つ上の男になりたく行動した次第です。

この界隈、いろいろググってみましたが、こう!といったベストプラクティスが見えるような見えないような…そんな感じです。
その中で色々考えてみた結果、タイトルのキーワードを選んでみました。

道具

Browserify

node環境で動作するような記述をしたコードを、ブラウザで動作するような形へ変換してくてます。
(require されたライブラリを結合することで呼び出し可能にしたり、なんだか難しいクロージャで囲ってよしなにしてくれます)

Babelify

次世代の Javascript である ES6 のシンタックスで記述した JS を ES5 (現在のJavascript) に変換してくれるものです。

ES6 で記述しない場合は必要ありませんが、色々便利なシンタックスもありますし、2015年現在ブラウザ側での実装は進んでいませんが、近い将来に移行したり、サンプルコードにあらわれてくるでしょうから予習しておいて損は無いはずです。

(といってもネイティブで動かせるのは10年くらい先でしょうか…やはりIE対応が足を引っ張るのでは…)

React

何かと話題の React です。難しい話はうまく説明できる自信がないので他に譲るとして、幾つか乱立している実装としては一番情報もあるので選択しました。

(むしろそれ以外については名前すらよく知りません…)

Arda

React の画面遷移を助けてくれるライブラリ。
1ページだけのサンプルはみかけますが、実際何か作ろうと思ったら画面を切り替えたいですよね。

ルーティングという意味では、React-router というものがありますが、ちょっと書いてみた感じ、何か不穏な空気を感じたので何か他にいいものは無いかと探したところ良さそうなのに行き着いた感じです。

Android のライフイベントを参考に実装されているとのことで、Activity を重ねたりポップしたり、そんなフィーリングで画面遷移を実現できるようです。

Noタスクランナー

なお、今回は gulp に頼らないでやってみることにしました。

辺りに触発されたというのもありますが、まずは物事をシンプルにして、把握して行きたいと思うからです。

CoffeeScript や TypeScript を使わないのも同様の理由です。
それぞれだいぶ市民権を得たようですが、やはりその分学習しなければならないことやまつわるトラブルが増える可能性は避けたいですし、何より ES6 の予習も兼ねてのことです。
(もちろん、不満があればどんどん使っていくべきだとは思います。怠惰の精神)

Browserify を動かしてみる

さて、実際にコードを準備していきます。

mkdir demo & cd demo
npm init // 適当に設定

適当にプロジェクトディレクトリを作り、その中で package.json を作るために npm init します。

とりあえず必要なパッケージを入れます。

npm install browserify babelify react arda --save-dev

今回の主役、browserify を実行してみます。

$(npm bin)/browserify

何かしらコマンドヘルプがでるはずです。
browserify の動作を確認できたところで、ソースを用意してみます。

// src/main.js
var Sub = require(‘./sub.js’);
Sub(); // => hello! browser.

// src/sub.js
module.exports = function () {
  console.log(‘hello! browser.');
}

パスのようなファイルとディレクトリを用意します。
まずはこれをnode環境で実行してみます。

node src/main.js
hello! browser.

コンソールにメッセージがでました。
コードの内容の説明は省きますが、少なくとも別ファイルを読み込む require はブラウザで動きそうにありませんし、実際動作しません。

では、browserify にファイルを通して、ブラウザで動作する js を吐かせてみます。

$(npm bin)/browserify src/main.js > public/bundle.js

そして、public/index.html として、public/bundle.js を読み込む html を用意して下さい。
index.html を開くと、コンソールに hello! browser. と表示されます。
先ほどのコードがブラウザで動作しました!

では、生成された public/bundle.js を見てみます。

(public/bundle.js をエディタで開いて下さい…)

書いたコードがなんだか禍々しいコードにくるまれています。
require したモジュールは結合され、一つのファイルとしてひっくるめ、ブラウザで動作するコードを生成してくれました。
これが browserify の働きです。

もし、他に使いたいモジュールがあれば、npm install foo で入れて、require(‘foo’); すればよいです。例えば、

npm install lodash --save-dev
// src/main.js
var _ = require(‘lodash');
var Sub = require(‘./sub.js’);
Sub(); // => hello! browser.

var a = _.map([1,2,3,4], function(val){
  return val * 2
});
console.log(a);

こんな感じ。実行してソースとコンソール出力を確認してみましょう。

Babelify を使って ES6 記法で書いてみる

次に、ES6 記法を使って記述してみます。
アロー関数を使ってみましょう。

// src/main.js

// 中略…

var a = _.map([1,2,3,4], (val) => {
  return val * 2;
});

// src/sub.js
module.exports = () => {
  console.log(‘hello! browser.’);
}

それぞれ、function() を () => に変更してみました。
アロー関数については他を参考にしてください。

node で実行してみると内容自体は変えてないので、当然同じ出力でした。
(ただし node/iojs が対応してないと ES6 記法が処理できません)

では、browserify を通して、ブラウザで実行してみましょう。

シンタックスエラーが出ました。
当然、アロー関数に対応してないからです。

そこで、babelify を用います。

$(npm bin)/browserify -t babelify src/main.js > public/bundle.js

-t babelify というオプションを付けるだけです。
これでブラウザ側でも実行できるようになりました。

public/bundle.js を見てみると、() => {} を使っていた場所が function () {} になっていることが確認できます。ES6 から ES5 に修正されて出力されました。

タスク登録

ここで、毎度先のコマンドを叩くのも長ったらしいので、もっと短く実行できるように、package.json に登録してしまいます。

先ほどまでのコマンドの、 $(npm bin)/ をとった部分を任意のキーで scripts 部分に追記します。

"scripts": {
    "build:js": "browserify -t babelify src/main.js > public/bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},

するとこれは npm run build:js として呼び出して、実行することができます。
次回以降はこれを実行して、bundle.js を生成していきます。

だいぶ長くなったので、React + Arda は次回へ持越します。

つづく

Browserify, Babelify, React, Arda で画面遷移を表現する その2 - Qiita

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12