質問: ``` ``` 追記内容 ---- サイトに表示されていたコード、サイトのURL、タグを追記、本文を修正しました。 あと現在HighChartsを使う際にjQueryは必要ないそうです。
回答: 名前そのままで出てきたものを前提で話を進めます。 最新バージョン7.0.0ですかね。 > > デモのプログラムだとjQuery.jsやHighcharts.jsをheadタグ内で読んでいました。 > > > ダウンロードしたセット内のDemoをいくつか見ましたが、~内に双方を読んでいるものはなかったですね。 もしかしたらこの質問のような例を見られたんでしょうか。 さて、本題ですが、 すごく簡単なコードを例示します。 ``` ``` このコード実行するとアラートで「1」と表示されて終わります。 ブラウザ開発ツールのコンソールを見ているとエラーが出ていると思います。 「test2は未定義である」という旨の。 これがなぜか分かりますでしょうか? プログラムは基本的に上から順に実行されていきます。 JavaScriptも例に漏れず。 function(以降「関数」)はその上から順に通ったときに「定義された」とプログラム上は認識されます。 つまり、上記コードのtest2()が書いてある箇所を通る時点では関数test2()は定義されていません。 そのためのエラーとなります。 プラグインでも同じことが言えます。 定義されたと認識されていない関数は実行できないわけです。 試しに、プラグインの読み込み記述とプラグインの実行記述をhtml上で逆に書いてみてください。 実行記述のところで同じように未定義である旨のエラーが出るはずです。 ということで、すごく乱暴に言えば、下記のような順番になっていればどこに書いても実行はされるということになります。 ``` jQuery ↓ プラグイン本体js ↓ 実行記述 ``` ※この順番はjQueryプラグインを利用する場合、例に漏れずです headにjQuery,プラグイン本体jsの読み込み記述を書き、 実行記述をbodyの中に書くのはおそらく「変更がないもの」と「変更が起きるもの、ユーザーが自分で書くもの」を分けたいからではないでしょうか(あくまで想像) > > 描画を早くするためにJavascriptはbody内の一番下に書くというのを見たのですが > > > 「body内の一番下」というより「の直前」と覚えたほうが間違えないように済むと思いますが、そこはきちんと記事を読み込んだほうがいいかもしれません。 * JavaScirptの記入場所 * HTMLでscriptタグを書くべき位置とは【メンターが回答】 ここで先に述べた「プログラムは基本的に上から順に実行されていきます」が生きてくるわけですね。 ブラウザにとってはhtmlをレンダリングする(解釈して画面上に表示する)というのが最も時間がかかる(パワーを使う)処理となります。 その途中でJavaScriptの定義や処理が書いてあると、中断することにもなりますので、画面描画に時間がかかる・・・ということになります。 もしJavaScriptでhtmlに変更を及ぼすような処理が書いてあった場合、読み込みが終わってなければ存在しない要素へのアプローチとなり、正しく動きません(もちろんJavaScript側で「ロード後に処理する」と書いてあれば問題にはなりません) ということで、諸々含めると**下記の順番での直前に書けば効率的に間違いなく動作する**、ということです。 ``` jQuery ↓ プラグイン本体js ↓ 実行記述 ``` タイトルは「HighChatsの」とありますが、JavaScriptを利用する場合は必ずこの順番を守る必要があります。関数でも変数でも定義が先です。 蛇足: teratailにはHighCharts用のタグがあるようです。 今後使っていくのであれば大いに参考にしていってください(あと願わくばこの質問からでもタグ付けておいてください)