できる気になっているJSを改めてチュートリアルからやってみる 1日目

すけさん

～～ Javascriptについて ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

Javascriptとは

変数の宣言方法から、全然違うんだね。

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
 let name = prompt('名前を入力して下さい');
 para.textContent = 'Player 1: ' + name;
}

const と let 。聞いたことはあるけど、正直ちゃんと理解できてないかも。
promptなんてあった？受け取る動作をするやつらしい。

3rd API とか、 Browser APIについても触れられている。これはやばいぞ。全然アップデートできてない。

注意書きの中のリンクは結構よいこと書いていそう。これがざっと終わった後に、読もう。

クロスブラウザーテスト
Client-side web APIs module

Javascriptは何をするのか

ブラウザーのセキュリティについて。それぞれのタブはコードを実行するための入れ物を個別に持つ。そのためそれぞれのタブ内で別れて実行できる。※ほかのウェブサイトや、タブに安全にデータ、実行可能なコードを送れるけど、実際はそのあと。

インタープリタとコンパイルコード

インタープリタはコードが上から下に実行されてコードの実行結果がすぐに返ってくる。

コンパイル言語はコンピュータので実行する前にほかの形式に変換しないといけません。C/C++は機械語にコンパイルされてからコンピュータで実行さr5えます。

いちおう、Javascriptは軽量なインタープリタ型プログラミング言語だそうです。

技術的な見地からは、たいていのJavaScriptインタープリタはJust-in-time compilingというテクニックを使って向上させているそうです。（全然知りません）

サーバーサイドコードとクライアントサイドコード

クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。このJavaScriptモジュールを明示的にクライアントサイドJavaScriptといいます。

んで、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。JavaScriptだとNode.jsがその例。サーバーサイドJavaScriptについては、こちらを参照くださいとのこと。

Dynamic Websites – Server-side programming

動的コードと静的コード

クライアントサイドのJavaScriptと、サーバーサイドの言語を説明するのに動的という言葉を使います。おｋれはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。

一方クライアントサイドのJavaScriptはクライアント上のブラウザーでＨＴＭＬのテーブルを生成したり、そのテーブルにサーバーから指示をうけ、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。

HTMLにJavaScriptのハンドラーを混ぜる

これNGパターンなんだって教えてくれました。こんなScriptを書いて、

function createParagraph() {
 let para = document.createElement('p');
 para.textContent = 'ボタンが押されました！';
 document.body.appendChild(para);
}

こんな感じでonclickに埋めたら、だめよって。

<button onclick="createParagraph()">押してください</button>

そこそこ強めにこういわれてます。

書けはしますが、このようにはしないでください。

もし、buttonタグが増えたら毎回これやらなくちゃいけないだろうという事ですね。

スクリプトの読み込み方針

スクリプトを適切なタイミングで読み込むためには、いくつか問題があります。それは見かけほど簡単ではありません！（だそうです！だし経験したことあります。）

一般的な問題は、ページ上のすべてのHTMLが、現れた順に読み込まれることです。JavaScriptを使用してページ上の要素（より正確には、Document Object Model）を操作している場合、何かをしようとするHTML野間園JavaScriptが読み込まれて、解析しても機能しないです。

HTMLファイル内部で実行する場合、こんな感じでかきましょう

document.addEventListener("DOMContentLoaded", function() {
 ...
});

これはブラウザーの”DOMContentLoaded"イベントで、HTML body が完全に読み込まれて解析されたことを示すものです。このブロック内のJavaScriptはそのイベントが発生するまで実行されないため、エラーは回避されます。

dafer

外部からファイルを読み込む場合、より現代的なJavaScript機能のdefer属性を使用して問題を解決します。

<script> 要素に足した後もHTMLコンテンツのダウンロードを続行するようブラウザーに指示します。

<script src="tutorial-1.js" defer></script>

この場合、スクリプトとHTMLの両方が同時に読み込まれ、コードが機能します。

恥ずかしながら知らなかったです...すみません。

外部読み込みで、このHTMLが解析されていないと動作しない問題は解析された後に書く。つまりbodyの閉じタグ直前に書くことで解決してきた。しかし、HTML DOM が読み込まれるまでスクリプトの読み込みと解析が完全にブロックされることです。JavaScriptがたくさんある大規模なサイトでは、大きなパフォーマンスの問題になります。

async と defer

この辺マジでアップデートしないとやばい。

スクリプトのブロッキング問題を回避できるモダンな機能が2つ。

・async
・defer

です。

async

async属性を使って読み込むスクリプトは、ページのレンダリングをブロックせずにスクリプトをダウンロードし、スクリプトのダウンロードが終了すると直ちに実行します。

複数のスクリプトが特定の順序で実行される保証はない。
ページの残りの部分の表示を停止することもない。

ページ内のスクリプトが互いに独立して実行され、ページ上のほかのスクリプトに依存しない場合は、asyncを使用しましょう！

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

上記の場合、スクリプトが読み込まれる順序に依存することはできないです。jquery.js は script2.js, script3.js に前後して読み込まれます。jquery.js に依存する関数がscript2,3にあった場合、スクリプトの実行時にjqueryが定義されないため、エラーを生成します。

読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早くに実行したい場合に asyncを使用するべきです。

例：ゲームを実際に開始するときはロードすべきデータファイルがたくさんある。ただ、今のところはスクリプトのロードによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけという場合。

defer その2

defer 属性付きのスクリプトは、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウンロードされるとすぐに実行します。

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

defer属性を持つすべてのスクリプトは、ページに現れた順序で読み込みます。したがって、 jquery.js は script2.js script3.js の前に読み込まれます。asyncと違い、ページコンテンツがすべて読み込まれるまでは実行しません。

これはスクリプトがDOM配置に依存している場合に便利になります。

async , defer まとめ

・ async と defer の両方とも、ページのそのほかの部分（DOMなど）がダウンロード中な時でも、ブラウザーにスクリプトを別々のスレッドでダウンロードするのでページ読み込みはスクリプトでブロックされません。
・ファイル同士に依存関係がない場合は、単独ですぐに実行できる async
・ScriptがほかのスクリプトやDOM配置に依存している場合は、 defer

あとがき

全然知らないこといっぱいあったなぁ。ちゃんとアップデートしよう。まじで。



この記事が気に入ったらサポートをしてみませんか？