質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

Q&A

解決済

4回答

6878閲覧

JavaScriptのコードの管理方法について

tarotarosu

総合スコア114

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

0グッド

3クリップ

投稿2016/05/23 13:23

###前提・実現したいこと
Webページのフロントエンド部分の開発に取り組んでいるのですが、Javascriptの行数が多くなり、管理しづらくなってきました。
現状は、Canvasによる画像処理や、様々なクリックイベントなどを1つのjsファイルに書いてしまっています。
今後もコード量は増えてくることが予想されますので、保守のしやすさなども考慮してコードを書きたいと考えています。
書籍などでの勉強ではそこまで多くのコードを記述することがなく、ファイルを分割(?)したりもしていませんでした。
大量のJavaScriptのコードはどのように管理するのが一般的なのでしょうか?参考になるサイトなどとともにご教授いただけると助かりますm(._.)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

大量の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で使う

投稿2016/05/23 13:51

編集2016/05/24 01:30
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

私としては、修正などの作業が入ったときは、基本的に役割別にまとまっているファイルをいじる方が楽ですね。
行数が多いかどうかより、後で見て理解しやすいかどうかのほうが何倍も重要だと思います。
例えば、Canvasによる画像処理が多いのなら、それを抜き出してしまいcanvas.jsという風に分離するとかいかがでしょうか?
「canvasによる画像処理に変更が出た場合、基本的にcanvas.jsを変える」という状況なら、画像処理に変更があったとき読むべきコードがだいぶ減って楽ですよね。
コツというか考え方ですが、「このコードの塊を別ファイルにしたら、他の人が読むときわかりにくくないだろうか?」という視点で考えて、特に読みにくくないと考えられるのならそこを別ファイルにしてしまっていいと思います。大抵、その他の人半年や一年後の自分だったりしますのでその感覚は当たります。

投稿2016/05/23 14:45

oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自分は素人ですが・・・

JavaScriptによる大規模開発はとても難しいですね。

参考になりそうな情報をいくらかご連携致します。

まず、大規模開発に向いたアプリの構造(パターン)について
サバクラ両方で動く JavaScript の大規模開発を行うために · GitHub

次に、大規模開発時に役立つコンパイラやライブラリについて
JavaScript大規模開発を語りに行ってきた「KOF2015」参加レポート - Cybozu Inside Out | サイボウズエンジニアのブログ
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 - Publickey

コーディングスタイル、他について
大規模なJavaScriptアプリケーションを書く際に参考にしたいコーディング規約まとめ | hifive開発者ブログ
最近のJavaScript開発まとめ : アシアルブログ

ファイル分割の際のTipsなど
JavaScript大規模開発 はじめの一歩 | キャスレーコンサルティング 技術ブログ
サイボウズで学んだこと - IT戦記

JavaScript自体ではなく、JavaScriptを生成する言語を採用する事で生産性や保守性を向上させようとする取り組みについて
続々出てきた JavaScript 系新言語。どれを使う? - プログラマーズ雑記帳

ドキュメント化に関するもの
JavaScriptによる開発が大規模化したらドキュメントを生成·Dox MOONGIFT

単にリンクを張っただけですが・・・どのページもそれなりに深い内容になっているので、ぜひご一読ください。いくらかでもご参考になれば幸いです。

投稿2016/05/23 14:38

pi-chan

総合スコア5936

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

今までの開発で携わったところを例にすると、

  1. 全体での共通部品としてのjs
  2. 1業務毎に関連するjs(検索→データ更新→確認画面→完了画面のようなまとまり)

で、画面固有の処理を記述する場合は、html内の<script>へ記述

のようにしていました。
ある程度、わかりやすいまとまりでファイル分けるといいと思います。
後々修正や調査する際に、当てがつけやすいです。

投稿2016/05/24 02:05

kaputaros

総合スコア1844

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問