質問: ### 前提・実現したいこと Webページのフロントエンド部分の開発に取り組んでいるのですが、Javascriptの行数が多くなり、管理しづらくなってきました。 現状は、Canvasによる画像処理や、様々なクリックイベントなどを1つのjsファイルに書いてしまっています。 今後もコード量は増えてくることが予想されますので、保守のしやすさなども考慮してコードを書きたいと考えています。 書籍などでの勉強ではそこまで多くのコードを記述することがなく、ファイルを分割(?)したりもしていませんでした。 大量のJavaScriptのコードはどのように管理するのが一般的なのでしょうか?参考になるサイトなどとともにご教授いただけると助かりますm(._.)m
回答: > > 大量のJavaScriptのコードはどのように管理するのが一般的なのでしょうか? > > > 関数で区切るのが一般的です。 jQueryの作りはJavaScriptというファイル分割がしにくい制約の中、かなり頑張って設計しているので参考になるでしょう。 慣れたらNode.jsやcommon.jsを勉強すると BrowserifyというNode.js用のライブラリを使ってJavaScriptのファイル分割を実現できます。 * Lv1: catコマンドで分割したJSファイルを結合 * Lv2: catコマンドを何度も打ち込むのが面倒、npm scriptsに書いておいてまとめる * Lv3: ファイルを保存したら、保存を検知してもう勝手にファイルをまとめて欲しい、タスクランナーGulpを覚えてgulp.watch+gulp-concatでひゃっほいする ここまでは一直線です。 お勧めはLv3です。 これを乗り越えるといろんな派閥に分岐してくるでしょう。 * いちいちconcatしてたら日が暮れる、本番環境にデプロイするときだけconcat、ローカル環境はgulp-file-includeで動的にScriptタグを生成しまくって対応 * Node.jsとcommon.jsの概念をマスターした、ただのJavaScript使うやつなんてnoobだぜ、Node.jsベースでBrowserifyを使う * Gulpじゃなくてwebpack使おうぜ * gulpとかwebpackはもう消耗するから使わん、Node.jsで自分で一から書いてnpm scriptで使う