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

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

ただいまの
回答率

90.48%

  • JavaScript

    17006questions

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

  • jQuery

    6926questions

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

  • canvas

    265questions

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

  • コーディング規約

    49questions

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

  • コードレビュー

    42questions

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

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

解決済

回答 4

投稿

  • 評価
  • クリップ 2
  • VIEW 2,459

tarotarosu

score 102

前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+6

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

自分は素人ですが・・・

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  

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    IE9で「overrideMimeType」の代わりになるもの

    sjisのファイルを読み込んで表示するjavascriptを作ったのですが、IE9でのみ文字化けが起こりました。 utf8を読み込ませたら正常に動いたのでsjisが変換できていない

  • 解決済

    クロージャーの使い方

    JavaScriptなどで、クロージャーを定義できるかと思うのですが、 どういった場合にクロージャーをつかっているのでしょうか? シンプルにコードを書きたいので、関数内に、

  • 解決済

     文字化けしてしまう

    以下のプログラムで文字化けてしまうのですがなぜでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

  • 解決済

    JavaScriptが開けない

    JavaScriptのファイルを作って開こうと思い、ファイルの拡張子を「XXX.js」と名付けたんですが、「構文エラー800A03F6」と表示されてブラウザ表示できません 何が原

  • 解決済

    javaについて

    クラブ、部員数が書いてあるtxtファイル、部員名のtxtファイルを読み込むプログラムです ファイルを読み込み、表示ができるのですが、ファイル通りに人数が読み込まれずおかしくな

  • 解決済

    クロージャをonloadの中でまとめて宣言はあり、なしどっち

    たまに下のようなonloadの中であるひとつの関数(A)を宣言して、その中でまとめて関数を宣言して、onload末尾で関数Aを実行するようなコードがありますが、これって意味あるんで

  • 解決済

    getElementByIdで取得したエレメントのプロパティ

    下記のように、.filesで最終的にlengthを取得しようとしたところ (1)では取得でき(2)では取得できず0が返されます。 なぜ(2)では取得できないのか、(2)で取得してい

  • 解決済

    javascriptを含むウェブページをローカルで同様に表示させる方法について

     前提・実現したいこと タイトルのとおりですが、 javascriptを含むウェブページを、そのままローカルで表示させたいです。 ここに質問の内容を詳しく書いてください。 例え

同じタグがついた質問を見る

  • JavaScript

    17006questions

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

  • jQuery

    6926questions

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

  • canvas

    265questions

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

  • コーディング規約

    49questions

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

  • コードレビュー

    42questions

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