これからJavaScriptを学んでいくにあたり、いくつか学習の準備を行う必要があります。
JavaScriptはブラウザ上で動く言語ということもあり、他の言語に比べて準備がとても簡単になりますので、一緒に確認していきましょう。
目次
JavaScriptの読み込み方法
まずは、JavaScriptを利用するための準備を行います。
JavaScriptは、複数の読み込み方法があり、
JavaScriptファイルを作成する
初めに、JavaScriptファイルの作成を行います。
今回は「jsフォルダ」の中に「main.js」という名前のファイルを作成しました。
JavaScriptのファイルは拡張子が「.js」となることを覚えておきましょう。
JavaScriptファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
...
<script src="js/main.js" defer></script>
</head>
<body>
...
</body>
</html>先ほど作成したmain.jsを「scriptタグ」を用いてHTML内で読み込むことができます。
「headタグの終了タグ」の直前に記述しましょう。
「src属性」で読み込みたいJavaScriptのファイルまでのパスを記述します。
また、「defer属性」を記述することで、
HTMLファイルが読み込まれた後に、JavaScriptファイルを読み込ませることができます。
JavaScriptのファイルをHTMLに読み込ませる方法はたくさんありますが、今回紹介させていただいた方法を行っていただければ大丈夫です。
デベロッパーツールのコンソールを使う
ブラウザのデベロッパーツールには「コンソール」という機能があります。
ここまででは、HTML,CSSを学習する際には、レスポンシブの状態を確認することにも使いました。
JavaScriptを学習する際にも、デベロッパーツールを使いながら作業を進めていきます。
検証ツールから「Console」のタブを選択する
検証ツールを開き、「Console」のタブを表示しましょう。
JavaScriptでの開発を行う上でこちらのコンソール画面は欠かせないものになります。
実務でも、エラーメッセージや値の確認などは、コンソール画面を用いて行います。
ショートカットキー
Windows： Ctrl + Shift + J
Mac： ⌘ + Option + J
ショートカットキーを使って開いた方が効率がいいので、なるべくショートカットキーを使って慣れていきましょう。
コンソールで値を確認する
先ほどのコンソール画面を使用するためには、JavaScriptに「console.log()」を記述することで利用することができます。
いくつか例を用いてイメージをつけていきましょう。
テキストを表示する
コンソール画面にに「Hello world」というテキストを表示します。
//テキストを表示する
console.log('Hello world');JavaScriptのファイル内に上記のコードを記述し、console.log()の（）内に表示したいテキストを記述します。
「//」を記述することで、JavaScriptファイル内にコメントを残すこともできます。
（コメントはWebサイトやコンソール画面には表示されません。）
画像のようにコンソール画面に「Hello world」と表示されていれば大丈夫です。
次回以降の記事でも詳しく解説しますが、 JavaScriptでテキストを表示させたいときは、
テキストの周りを「’’（シングルクォーテーション）」もしくは「””（ダブルクォーテーション）」で囲います。
また、( )内に指定するテキストやデータは「引数」と言います。
計算結果を表示する
JavaScriptは計算も行うことができます。 今回の例ではコンソール画面に「10+10」の計算結果を表示してみます。
//計算結果を表示する
console.log(10 + 10);JavaScriptのファイル内に上記のコードを記述し、console.log()の（）内に計算式を記述します。
画像のようにコンソール画面に「20」と表示されていれば大丈夫です。
計算などで使用したい「数値」はそのまま記述すれば大丈夫です。
（’’や””で囲むと、テキストという扱いになってしまうので、計算できなくなります。）
エラーを確認する
次にJavaScriptファイル内のエラーを確認していきましょう。
今回の例ではコンソール画面に、構文のエラー結果を表示してみます。
//エラーを表示する
console.log(Hello world);JavaScriptのファイル内に上記のコードを記述し、console.log()の（）内にテキストを記述します。
今回は「’’や””で囲う」というルールを守らずに記述してみました。
画像のようにコンソール画面にエラーメッセージが表示されていれば大丈夫です。
今回のエラーメッセージは「SyntaxError」という構文エラーとなります。
テキストを記述しているのに「’’や””で囲う」というルールを破ってしまっているため表示されています。
JavaScriptはエラーメッセージ内で、
- 「何が間違っているのか」
- 「何行目が間違っているのか」
上記の２つを教えてくれるので、非常にエラー解決がしやすいです。
（HTML,CSSと比較して）
エラーメッセージが表示されたときは、焦らず間違っている点を確認していきましょう。
エラーメッセージをコピペして検索すると、解決のヒントを見つける手助けになることもあります。
基礎を覚えていこう
今回は、JavaScriptを勉強する準備について解説しました。
新しい言語を学ぶときは、読み込み方法や文法など覚えることがたくさんあります。
初めは大変ですが、千里の道も一歩からです。 このままJavaScriptの書き方や使い方もマスターしていきましょう。
