HTML

JavaScriptの読み込みでは依存関係に注意が必要!

JavaScriptの読み込みでは依存関係に注意が必要!

今回もHTMLでJavaScriptファイルを読み込むときの注意すべきポイントについての記事になります。

前回の記事「HTMLでJavaScriptの読み込み時に気をつけること【ページ表示を早める】」ではJavaScriptの読み込み位置を変えることで表示速度を早くすることを説明しました。

今回は複数のJavaScriptファイルを読み込む時に読み込む順番を意識しないと「うまく動かないこともある」ということについて解説します。

複数ファイル読み込もうとしているんだけど、「Uncaught ReferenceError: 〇〇 is not defined」ってなってうまく動かない。

何が原因でJavaScriptが途中でエラーになって処理が止まってしまうのかわからない。

今回の記事ではこのような問題でつまづいている・つまづいたことがある方にピンポイントの内容となります。

上記のような問題に直面したことない方でも、まだJavaScriptの学習を始めたばかりの方は、今回の記事を読むことで同じ問題につまづいた時にすぐに解決できるようになります。

今回の記事は次の内容で話を進めていきます。

今回の記事内容
  • JavaScriptファイルの依存関係を考える
  • JavaScriptファイル読み込みの成功例と失敗例

それでは1つ目の内容から話していきます。

JavaScriptファイルの依存関係を考える

そもそもなんでファイル分割するの?

まずはじめに確認させてください。

JavaScriptは1つのファイルに全ての処理を書き込むことが出来るのになぜファイルを複数に分割する必要があるのでしょうか?

答えを言うと、ファイルの分割を行うことで次のようなメリットがあります。

分割のメリット
  • 機能ごとにファイルを分割することによって、ファイルの管理が楽になる(メンテナンス性の向上)
  • 機能によっては他のプロジェクトでも使い回すことが出来る(再利用・ライブラリ化)
    • JQueryLodashなども、よく使う機能を切り出したライブラリ
  • いろんなところで使われる共通の機能を1箇所に集約することで、その機能に問題があっても1箇所の修正だけで解決する(保守・運用コストの低減)

逆に、ファイル分割を行わず1つのファイルに処理を全て書いてしまった場合のデメリットは次のとおりです。

分割しないデメリット
  • コードが肥大化し数千行(プロジェクトによっては数万行)となり、どこに何があるかすぐに見つけられない(メンテナンス性の低下)
  • 他のプロジェクトで使い回せない(プロジェクトごとにゼロから同じ機能を作る)

上記のメリット・デメリットで上げた理由から、かなり小さなプロジェクトでない限り、アプリケーション開発する際には基本的にファイル分割する場面がたくさん出てきます。

ファイル分割するときの注意点

今回の記事タイトルにも書いていますが、ファイル分割した際には「依存関係」というものに注意する必要が出てきます。

例えば、JQueryを使ってフロントエンド開発をしているとします。

JQueryのファイルを読み込まずに「$(‘#id’)」と書いて、特定のHTML要素を取得しようとしても「Uncaught ReferenceError: $ is not defined」とエラーになります。

このエラーが起きる理由は「コードがJQueryに依存している」からです。

このようにファイル分割をしたら、利用する機能を実装しているJavaScriptファイルを読み込む必要があります。(例: JQueryを読み込む)

しかし、必要なファイルを単純に何も考えずに読み込んだとしてもうまく動かないことがあります。

それでは実際にどのように読み込んだらうまく動かないのか、逆にどのようにしたらうまく動くのかサンプルコードを使って確認していきましょう。

JavaScriptファイル読み込みの成功例と失敗例

まずはじめに、今回の例で共通して使うJavaScriptの2ファイルのサンプルコードを次にまとめます。

  1. person.js (依存するファイルはない。)
  2. main.js (person.jsとJQueryに依存している。(2ファイルを使う))

JavaScriptファイル読み込み失敗例

それでは失敗例から見ていきましょう。

次のHTMLのサンプルコードで注目していただきたいのは14行目, 15行目のmain.jsとperson.jsのファイル読み込みの順番です。

上記コードの実行結果は次の画像になります。

失敗例その1“Person”が定義されていないと怒られている

 

上記HTML内でmain.jsは14行目、person.jsは15行目で読み込まれています。

HTMLは上から順番に処理を実行します。14行目のmain.jsを読み込み、main.jsの1行目から最後の行まで実行が完了してから、15行目のperson.jsの読み込みを始めます。

しかし、main.jsの1行目でperson.js内で定義されている「Person」クラスを利用していますが、この時点ではperson.jsの読み込みは始まっていないので「Person」はまだ定義されていない状態です。

そのため、上に貼った実行結果の画像のエラーのように「Uncaught ReferenceError: Person is not defined」というエラーが発生して処理が途中で止まってしまったのです。

初心者にとって簡単なエラーでも原因を見つけるのが難しかったりするのでエラーの解決方法を説明します。

上に貼った実行結果の画像はデベロッパーツールのコンソール画面で、エラーになると赤背景・赤文字でエラー内容が出力されます。

エラー内容は英語で表示されるのでわからない単語があれば「weblio」や「アルク」などを使って意味を調べるとエラー内容がわかります。

また、どのファイルの何行目でエラーが起きたのかもエラー出力の右側で確認できます。

今回の場合だと「main.js:1」とあるので、main.jsの1行目でエラーが起きているというのがわかります。

JavaScriptファイル読み込み成功例

今回のエラーを解決する場合は、main.jsの読み込みを開始する前にperson.jsの読み込みを先に完了させれば良いので、次のようにmain.jsとperson.jsの順番を入れ替えれば解決します。

実行結果は次のとおりになります。

ファイル読み込みの成功例依存関係の問題が解決し、main.jsの処理が最後まで実行されている

 

main.jsのファイル依存関係の問題が解決されて、main.jsの3行目で行っている文字列(p要素)の置換が成功して「私の名前はつよぽんです。」という文字に置き換わりました。

上の画像左側にある「自己紹介」と書かれている下の文字列が今回置換した箇所になります。(失敗例に貼った実行結果画像の文字列と異なるのがわかるかと思います。)

まとめ

ここまで話してきた内容をあらためてまとめると次のようになります。

今回のまとめ
  • ファイル分割をした際には、ファイルの依存関係が発生する場合がある
  • 依存関係がある場合、まず先に依存される側のファイルを読み込む必要がある
    • 今回の例:
      • 依存されるファイル: person.js, JQuery
  • 依存されるファイルの読み込みが完了してから、依存するファイルを読み込む
    • 今回の例:
      • 依存するファイル: main.js

ここまで話してきたように、ファイル分割した際には依存関係が正しく解決されているのかを意識してJavaScriptファイルの読み込みの順番には気をつけましょう。

 

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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