【JavaScript】HTML、CSSとの違いを理解してJavaScriptを実行してみよう

これまでHTMLとCSSを学習してきて、これからJavaScriptの学習を始めるという方は、いくつかの点でJavaScriptの学習につまづきがちです。

学習前に意識してもらいたいJavaScriptとHTML、CSSの違いについていくつか挙げるので、注意してみてください。

結果の出力先の違い

HTMLとCSSの実行結果はブラウザの画面に表示されるので、そのまま画面を見ることで確認することができます。

しかし、JavaScriptのようなプログラミング言語の実行結果は、ログ(情報の記録)という形で出力されます。
このログはただのテキスト行のため、HTMLやCSSのようなデザインやレイアウトの確認に比べると非常に地味です。

もちろんJavaScriptでHTMLやCSSを操作した結果をブラウザに表示すればその限りではありませんが、それは学習初期ではできません。

開発者は出力されたログを見て、想定通りの結果が得られるプログラムを記述できているかどうかを確認したり、出力されたログにエラーがあれば修正したりします。

つまり、このログは開発者にとって非常に重要なもので、見た目は地味かもしれませんが、それに慣れる必要があります。

デベロッパーツールのコンソールログ
デベロッパーツールでログを確認

エラー発生時の対応の違い

HTMLやCSSの学習では「エラー(error)」という言葉を聞かなかったかもしれません。

これは例えば、次のようなHTMLのコーディングに誤りがあるファイルを実行した場合でも、ブラウザは問題ないかのように表示するからです。


<head>
    <style>
        p {
    </style>
</head>
<body>
    <h1>Hello, World</h1
    <p></p>今日もいい天気ですね</p>
</body>
    

これはヒドいコーディングの例です。決して真似をしないように…

HTMLやCSSは、多少の入力ミス程度であればブラウザが補完して表示してくれることがあります。
補完されない場合でも、せいぜいその箇所が表示されない程度です。

しかし、JavaScriptのようなプログラミング言語はそうではありません。
ミスがあればブラウザが補完してくれるようなことは一切ありません。実行時にミスが見つかればエラーとなり強制終了します。その後の処理は実行されません。

エラーの内容はログとして出力されますが、すべて英語です。
例えば、「Uncaught ReferenceError: x is not defined」のような感じです。英語が苦手な方も慣れる必要があります
エラー文をGoogle翻訳等で日本語にして読んでも構いません。

エラー文は必ず読み、何が誤りだったのかを理解し修正できるようになる必要があります

変数や関数のありなしの違い

HTMLやCSSの学習で、変数や関数という単語を使う機会は多くありません。
HTMLの要素について学習し、CSSのセレクタ、属性、値について学習すれば大体のWebページは制作できます。

しかしJavaScriptのようなプログラミング言語の学習では、変数関数クラスについてや、分岐ループ非同期処理などの新しい概念を覚える必要があります。

これは、今まで学習したHTMLやCSSの知識がほとんど役に立たないことを意味します。
HTMLからCSSの学習に移るときのように、すぐに相互作用を確認できるものではありません。

全く新しい気持ちで、それこそゼロからの気持ちでJavaScriptの学習に臨んでください。

HTMLやCSSの学習に比べ、JavaScriptの学習初期は、成長も結果も実感しにくいため挫折しそうになるかもしれません。
それでもJavaScriptを学習すべき理由は
前回の記事に書いたとおりです。

プログラミングはできるようになってからが楽しいものです。それまでは、前向きに学習とアウトプットを継続してください。

理解度チェック

  • HTML、CSSとJavaScriptの違いはなんですか?
  • JavaScriptの実行結果はどこで確認しますか?
  • エラーとはどんなものですか?
  • JavaScriptの学習とHTML、CSSの学習は全く別のものだということを説明できますか?

JavaScriptをコーディングするところ

WebサイトでJavaScriptを実行するためには、HTMLやCSSと同じくJavaScriptを記述(コーディング)する必要があります。

HTMLファイル内に記述する

JavaScriptは、HTMLファイル内にscript要素を使って直接記述することができます。


<body>
    <script>
        // ここはJavaScriptしか記述できません。
        console.log('Hello, World');
    </script>
</body>
    

console.log('Hello, World');がJavaScriptの一文です。
その上の//から始まる行はコメント行(コンピュータが読み込まない行)です。

script要素内はJavaScriptの領域となるため、JavaScript以外のHTMLやCSSは記述できません

JSファイルに記述する

ファイルの拡張子が.htmlだとHTMLファイルです。.cssだとCSSファイルでしたね。
JavaScriptの場合は拡張子.jsのファイルとなります。

新しくscript.jsファイルを作成してみましょう。

script.js

console.log('JSファイルのログ');
    

もちろん、このままでは、script.jsは実行されません。
CSSファイルと同様に、作成したファイルをHTMLファイルに読み込むように記述する必要があります

JavaScriptのファイルを読み込むには、script要素のsrc属性にJSファイルのパスを指定します。

index.html

<body>
    <script>
        // ここはJavaScriptしか記述できません。
        console.log('Hello, World');
    </script>
    <!-- JSファイルを読み込みます。 -->
    <script src="script.js"></script>
</body>
    

CSSはhead要素内で読み込みましたが、多くの場合、JSファイルはbody要素内直下の一番下の行で読み込まれます。

これは、JSファイルを読み込むより先に、HTMLとCSSを読み込むことで、ブラウザ画面への描画(レンダリング)を優先させるためです。こうすることで、ユーザーに少しでも早く読み込んだ画面を提供することが目的です。

理解度チェック

  • script要素にJavaScriptを記述してみましょう!
  • JSファイルにJavaScriptを記述してみましょう!

コメントの書き方

JavaScriptのコメント(コンピュータが実行しない行でメモ等に使用)の書き方は、他のプログラミング言語と似ていします。
しかし、HTMLのコメントの書き方とは異なります。

HTMLやCSSと、JavaScriptのコメントの書き方を見比べてみましょう。

HTML

<!-- HTMLのコメントの書き方 -->
<!-- 
    複数行でも、
    書き方は同じです。
-->
    
CSS

/* CSSのコメントの書き方 */
/* 
   複数行でも、
   書き方は同じです。
 */
    
JavaScript

// JavaScriptのコメントの書き方
/* 
   複数行をまとめてコメントにする場合は、
   書き方が異なります。
*/

// 例: 
console.log('こんにちは'); // コメントです。

/*
  JavaScriptは、
  とても人気のあるプログラミング言語です。
*/
    

理解度チェック

  • JavaScriptでは、//の後はどうなりますか?
  • JavaScriptでは、/* */の中はどうなりますか?

行末のセミコロン(;)

JavaScriptの、行末のセミコロン(;)は一つのコード(命令)の終わりを示すもの(終端文字)です。
セミコロンだけでなく、改行も終端文字の役割を持ちます。

いずれの終端文字もない状態で、複数の命令を記述するとエラーになります


// 実行できます
console.log('Hello');console.log('World!');

// エラーとなり実行できません
console.log('Hello')console.log('World!')

// セミコロンがない場合も改行すれば実行できます
console.log('Hello')
console.log('World!')
    

コードの可読性(読みやすさ)を意識すると、一つの行に複数の命令文を書くことはほとんどありません

このような仕様から、セミコロンを付ける派と付けない派が存在しますが、プログラビではセミコロンを付ける方で進めていきます。

理解度チェック

  • 終端文字とは、どういうもののことを言いますか?説明してください。
  • JavaScriptの終端文字は何ですか?

JavaScriptを実行する

JavaScriptのコーディングができたら、JSファイルを記述または読み込んだindex.htmlをブラウザに表示してみましょう。

HTMLにブラウザで表示される要素を何も記述していないため、画面には何も表示されません。

JavaScriptで出力されたログは、デベロッパーツールのConsoleタグで確認することができます。

クロームでデベロッパーツールを開く

デベロッパーツールを開いたらConsoleタブを開いて次の様に出力されていることを確認してください。

JavaScriptのログをデベロッパーツールで確認

index.htmlに直接記述したコードと、script.jsに記述したコードがそれぞれ実行されていることが確認できると思います。

理解度チェック

  • JavaScriptを実行してブラウザのデベロッパーツールで確認してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。