ようやく最近っぽいJavascriptを書くことに挑戦してみた

今まではずっとJQueyかAngularJS1使っていて
それ以外はJavascript全然触ってなかったんですが
いよいよ必要になってきたので、構築しながらいろいろメモ

ほとんどは利用するライブラリとかの簡単な説明になると思います。
ただ、現状が『業務で必要になれば触る』程度のJavascript知識
(nodejsもほとんど触ったことない)なので不足や誤りがある可能性があります。

もしお気づきの点がありましたら、Twitter等でご連絡いただけたら喜びます。

1. まずは環境構築でいろいろ

node (and npm)

まぁ既に入れていたんですが
クライアントサイドJavascriptですね。
これを入れないと始まらない。

yo

これは別に入れなくてもいいんだけど、僕はいちいちApacheとかでWebサーバ
立てるのも面倒だし、でもRailsやPlay frameworkの新規プロジェクト作るのも
面倒だし・・・とにかくブラウザ上で手軽にJavascript動かしたい!
という用途で入れました。

色々なひとが作ってくれたWebアプリのテンプレートのジェネレータがダウンロードできて
それを元にWebアプリケーションの雛形を作ってくれます。

ただ、あまりにも色々なテンプレートが存在するので
個人的には、とりあえず webapp-gulp 入れておけば便利かなぁーと思います

※react-fullstackというジェネレータがあったので
お、ちょうどいい!どんな風に作ればいいか見てみよう、と思ったら
結構大規模なテンプレートで怖気づきました。

※結局のところ、簡単に試すためにbrowser-syncのタスクとかが入ってて
最小構成だったら僕はなんでもよかったです。

※React限定でよければFacebookがすすめているのはgithub react-boilerplate
みたいです。これをcloneするだけでもOK

2. 入れたら便利なもの

便利っていうか割と当たり前のように僕のまわりの
フロントエンドエンジニアの人たちは使ってるので、まぁほとんど必須かも。
なくてもできるけど。

bower

フロントエンド用ライブラリのパッケージ管理ツール。
最近はnpmでもbowerでも存在しているパッケージも多くあるらしいです。
僕は使い分けたいので、可能な限り

  • サーバサイド(gulp,node)が使うものはnpmで
  • クライアントサイド(webページが参照するようなもの)はbowerで

という方針でいきたいと思ってます。

プロジェクトのルートディレクトリのbower.jsonに
その定義を記述します。

gulp

grantに代わって最近はJavascriptのタスク管理ツールの代表的なもの。
好きなタスクを定義できるだけでなく、特定のファイルやディレクトリを
監視して、何かをするようなタスクも簡単に定義できる
(ファイルに変更があったらTypescrptをjavascriptにコンパイルしたり)

プロジェクトのルートディレクトのgulpfile.jsにタスクを
記述します(後述しますが、ES6で書いてbabelに通すことも可能です)

babel

ECMAScript6に沿って書かれたJavascriptをCommonJSのECMAScript5の仕様に
変換してくれるもの(トランスパイラ)

ES6には開発をより大規模に容易にしてくれる様々な新機能が追加されましたが
まだまだブラウザもnodejsも対応がおいついていないので、これで変換して利用します。

後述しますが、babelで変換してくれるのはCommonJS形式のものです。
importはbabelを利用してもrequireに変換されるので、そのままでは
ブラウザでは利用できません。

browserify

これはnodejsのように、必要な外部モジュールをrequire('hogehoge')という
書き方をしたJavascript(CommonJS)をブラウザでも実行できるようにしてくれるもの。
(ES6ではネイティブにimport文をサポートしています)

例えばa.jsというファイルにrequire('b')と記述すると
nodejsではネイティブにモジュールbを読み込みますが、ブラウザで実行される
jsはこれに対応していません。そこでこのbrowserifyを通すと、それを
単一ファイルにまとめてくれます。

これと似たようなものにrequire.jsというライブラリがありますが
これは、あらかじめ単一ファイルにするのではなく、必要に応じて
動的に他のモジュールをロードする仕組みのようです。
(Asynchronous Module Definition)

3. フレームワーク、ライブラリ

これは好きなものを選べばよいと思いますが、僕は
React.jsを使いたくて、いままでちゃんとやってなかったJavascriptの
環境を構築してみました。それに付随して色々入れた利用したライブラリの紹介

flux

Facebookが公開したWebアプリケーションのアーキテクチャと
同名のライブラリ。実際にはDispatcherがあるだけ。
FluxのDispatcherの代替としてkefir
というものもあるみたいです(サンプルコード色々探してたら見つけた。EventEmitterの代わりもしてくれるらしい)

EventEmitter

nodejsに標準で含まれているeventモジュール内に存在するオブジェクトで
nodejsでイベントハンドラとかを設定したり、監視したりするのに利用するらしい。

詳細はこちらを参考にしてみてください。

object-assign

ES6のObject.assignを提供してくれるライブラリ。
いい感じに複数のオブジェクトをマージしたものを返してくれたりする。

詳細はこちら

keymirror

object-assingに似てるけど、こっちはキーバリュー作ってくれるやつ

詳細はこちら

4. 構築後のtips

gulpfile.jsをES6で書いてbabelに通したい

babel-coreいれてgulpfile.jsをgulpfile.babel.jsにするだけで
gulp build とかタスク実行すると自動でbabelで変換を通してくれます。

いちいちリロードがめんどくさい

browser-sync

JSXをコンパイルしたい

  • ES5で書くならならreactify(React.js用browserify plugin)
  • ES6で書くならbabelify(Broserify用のBabel変換ライブラリ)

babelifyではES6 -> CommonJS -> ブラウザで実行可能なものに一発で変換してくれるので
便利です(もちろんJSXのコンパイルも。reactifyはCommonJSから。)

勘違いしてたbabelとbrowserify

  • babelでES6の構文が利用できる => importが利用できる
  • browserifyでrequireが利用できる

ならこれ両方使わなくていいじゃん!って勘違いしてたんですが
babelで変換してくれるのはES6->CommonJSのES5なんですね。(なんか言い方間違えてるかもですが)

つまり、babelで変換しただけのJavascriptはブラウザでそのまま実行できない場合があります。
それを更にbrowserifyすることでブラウザで実行できる状態になります。
ブラウザで読み込ませるためのJavascriptを書く必要がある場合は注意が必要です。

※考えてみれば、たしかにbabelで一発でブラウザで実行できる状態まで
もっていっちゃうと、逆にnodejsで使いづらいですもんね。

4. ES6とES5の違い

最終的にはこれ
やりたくて、『あ、そろそろちゃんとやらないとまずいな・・・』と思って始めたのが
きっかけ。

これは自分がちゃんと把握したうえで、別記事で書きます。

5. React.jsの日本語チュートリアルが不足している?

っていう声を割とよく見る気がしました。
僕も『React 入門』とかでググると、まぁ確かにそんなにはない気がする。
頑張ってQiitaとかで探すと結構ありました。

結局、つたない英語で公式チュートリアルを読んだのが一番
ピンときたし、その後もうちょっと色々確認するために、すぐにオライリーの
『入門React』注文しちゃいました。

Facebookに掲載されている公式のReactのチュートリアルは余裕があったら
翻訳してみます。

6. Reactだけじゃなくて併せてFluxのチュートリアルもやってみた

というか、Reactやりたいなら必ずここまでやったほうがいいと思います。
やってみてようやく感じを掴んだのでメモ(間違ってそう)

  1. storeはDispatcherにコールバック登録しておく
  2. アプリはComponentの組み合わせで構成する
  3. イベントはそれぞれのComponentがもってる
  4. イベント発生したらAction呼び出す
  5. ActionはDispatcherにイベントの通知をする
  6. Dispatcherはそれに応じてコールバックを呼んだりする
  7. コールバックに応じてstoreが色々やる(外部とのやり取りとか、バリデーションとか)
  8. storeに変更があると、それをviewが更新される(ここは難しいことはReactがやってくれてる)

本当に間違ってたらすいません&教えてほしいんですが
Reactはよく『MVCのViewだけやります』と言われてますが
チュートリアル終わったときの感覚としては、ちゃんとcontroller-viewって言ったほうが
いいんじゃないかなぁ・・・と思いました。
(強いてMVCに当てはめるなら、ってことかなぁ・・・)

これも別記事で書きたいと思います。

7. 蛇足

Javascript慣れてきたらElectronとかもやってみたいですね。
簡単なら。

コメントを残す

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