最近のJavaScriptの開発環境(On 仕事)

JavaScript

書く気力がある内に、少しでもブログを書いた方がいいなー、と思い、どれくらいぶりか忘れましたが、二日連続での更新です。

ここ二ヶ月ほど、仕事の都合ではありますが、かなり自由のきく状態で、ひたすらにJavaScriptの開発をやっていました。結構分量が多い開発でしたが、その過程で、今やっておかないともう無理や！と思い、JavaScriptの開発環境を整えました。

その前に

今のプロジェクトに約10ヶ月ほど参加していますが、その間にも少しずつですが、環境の改善を進めていってはいました。変遷は大体こんな感じです。

  • 最初
    • 約5万行〜のJavaScript。ほとんどがグローバルにぶちまけられている ＆ jspに「直接includeされている」ものが大半
    • デバッグがものすごい大変。別の.jsに書いてあるグローバル変数とか関数を使っていたりして、非常に読み解きづらい。というか無理。
    • セミコロンすら無いJavaScriptが大半。
  • 去年の10月頃まで
    • どうしようもなくなってきたので、少し時間を使って、namespaceとモジュール化。
    • ただ、既存があまりにもスパゲッティすぎて、これも付け焼刃にしかならなかった。
  • 去年の9月〜11月
    • Backbone.jsを真似した独自ライブラリを作成
      • ViewとModelとCollectionのみ
      • なぜかというと、jQuery1.4.4だから・・・
    • 一部の画面をこのライブラリで書き直してみたりして、多少手応えを得る。
    • このタイミングで、JSDeferredとunderscore.jsも導入。

今回の話は、ここから先の話になります。

今のJavaScript開発環境

ひとまず、色々とどうしようもなかったので、今回自分が弄った画面は、客先に「作り直しますんでいいっすか？」「(間に合うなら)いいよ」と言う会話を経て、本当にゼロから作り直しました。

作り直す過程で、Request.jsを使う、本物のBackbone.jsを使う、ということを決定しました。Backbone.jsについては、jQuery1.4.4でもイベント周りだけをなんとかすれば動作するということがわかったので、そこだけ自分で修正したものを利用してます。
それ以外にも、この際なので(ぉぃ)色々と導入することにしました

  • JST
    • テンプレートを管理するために導入。今のところ、underscore.jsのtemplateをMastache様に使えるようにしたもので必要十分です。
  • Sass
    • 今回の画面はかなり色々やらかさないとならなかったので、この際入れたれー、と導入しました。後悔はしていません。
  • YUIDoc
    • そもそもDocコメントすら無い部分が多過ぎたので、今回導入。今のプロジェクト形式では、JSDocよりもこっちの方が書いてて楽でした。

色々導入したのと、コンパイル系のツールが増えたので、Gruntを利用することにしました。それまでも、前までいた人がGruntでjshintをできるようにしてくれていたので、このGruntfileを十分に活用することにしました。今回で導入したプラグインは以下の通りです。

  • grunt-contrib-jst
  • grunt-contrib-sass
  • grunt-requirejs
    • grunt-contrib-requirejsも試しましたが、どうにもしっくりこなかったため、こっちにしました
  • grunt-parallel
    • jst/sass/requirejsをそれぞれコンパイルしないとならないので、それぞれ並列で動作するようにしました、が、PCの性能の問題でぶっちゃけ性能の向上が体感できません・・・

本当は、PCの性能が許すのであれば、Vagrantとかを導入して、ローカルを汚さずに*nix系の開発環境を構築するー、とかも考えたのですが、4GBのメモリだと、開発環境を起動しているだけで3.6GBくらい常時利用している状態なので、とてもじゃないけど無理でした。

まとめると、

  • Backbone.jsを導入して、クライアントサイドMVCを推進
  • Require.jsを導入して、モジュール化を推進
  • JSTを導入して、画面とロジックのさらなる分離
  • Sassを導入して、煩雑になったCSSを(多少なりとも)管理できるように
  • JSDeferredを導入して、非同期処理を同期的に管理できるように

というのをこの二ヶ月ほどかけてやりました。最後のは前からやっていましたけど。

やった甲斐はとりあえずあって、バグの修正とかの範囲がとても狭くなりました。前だと、どのグローバル関数が悪さをしているのかよくわからないとかほんとあったので・・・。

現状の課題

もちろん、完全な環境とかはないので、今も課題は残っています。ただ、将来の課題よりも残っている課題の方がやばいです。

今回Require.jsを導入して、ある画面はラクチンになったのですが、既存の画面にがっつり影響が出てしまいました。影響の原因はだいたいわかっていて、Require.js特有の読み込み順序の問題です。

利用するRequire.jsのファイルは、すべてコンパイルしたものを利用するようにしています。開発時も同様の形式としてしまっています。単純に時間がなかったので。なのですが、既存で利用しているjQueryと、Require.jsで利用しているjQueryが干渉してしまい、上手く動作しない、というのが原因でした。
ただ、プロジェクトで作成していた独自ライブラリにも原因はあって、非常に理解に苦しむのですが、jQueryオブジェクトの中にネームスペースを切っているのも大きいです。

この解決として、既存で読み込んでいたJavaScriptファイルを、Require.jsで読み込んだファイルの前後で再度読み込む、という暴挙に出ました。商用サイトだとぶっ殺される気がしますが、幸い社内サイトなのでまだ許容範囲です。無論、全体を速やかにRequire.jsの内部に取り込んでやる予定です。

まとまってる？

現状の開発環境を作る上で、多数のサイトを参考にしました。うろ覚えのサイトも多いのですが、幸いいくつかEvernoteに残っていたので、いくつかリンクを記載しておきます。

各ライブラリの本家。わかんなくなったら参照してます。

既存のjQueryとRequriejs上のjQueryを共存させる時に参考にしました

YUIDoc & Gruntの導入について参考にしました。
【YUIDoc】のドキュメントを自動生成する。

JSTの導入はここをほぼそのままパク・・・げふんげふん、参考にさせて頂きました。
grunt-contrib-jstでjsテンプレートを管理する。

Require.jsの導入について参考にさせて頂きました。
RequireJSをプロジェクトで使ってみての所感

最新はよくわかりませんが、一先ずモダンなJavaScript開発環境を作ることはできました。が、今度はこれをプロジェクトメンバーが使えるようにしないとならないという難題が待っています。こっちの方が頭使うかも・・・。