JavaScriptとは何?（導入編）

今回のポイント

今回の記事のゴールは3つあります。
1つ目は、JavaScriptが何をする言語か理解することです。
2つ目は、Webの仕組みを理解することです。
3つ目は、自分でコードを実行できるようになることです。

まず、Webサイトの仕組みから説明します。
Webサイトは3つの技術でできています。
HTML、CSS、JavaScriptです。

HTMLは構造を作ります。
CSSは見た目を整えます。
JavaScriptは動きをつけます。

家に例えると、HTMLは骨組みです。
CSSはデザインです。
JavaScriptは電気やドアの動きです。

つまり、JavaScriptは「動き」を担当する言語です。

JavaScriptで具体的にできることを下記にまとめてみます。

・ボタンを押したときの処理ができます。
・入力チェックができます。
・アニメーションができます。
・サーバーと通信もできます。

例えば「いいねボタン」を押すといいねの数字が増えていきます。
こういったこともJavaScriptで実現することが出来ます。

次に、JavaScriptがどこで動くかです。
主にブラウザとサーバーの2つです。
今回はブラウザで動かします。
では、実際に触っていきます。

Google Chromeを開いてください。（画像はクリックすると大きな画像が表示されます。）

開けたらF12キーを押してください。
（Macの場合はCommand + Option + I）
開発者ツールが開きます。

その中のConsoleタブを選択してください。

ここにコードを入力することで実際にJavaScriptを動かすことが出来ます。

では最初のコードを書きます。

console.log("Hello World");

実行すると文字が表示されます。

これは「コンソールに表示する」という意味です。

同じ様に自分の名前をコンソールに表示してみてください。

次に別の例です。

alert("こんにちは");

上記の様に入力してください。

入力後Enterを推すと画面にポップアップが表示されます。

次に下記の様に入力してみます。

console.log(Hello World);

実行するとエラーが表示されます。

プログラミングを行っているとエラーは必ず発生します。そこで、何が原因でエラーになっているのかを考えることがとても重要です。
今回の場合であればHello Worldという文字の列を表すためには”（ダブルクオーテーション）でくくる必要があります。

”（ダブルクオーテーション）が抜けていたためのエラーでした。

この様に記述のミスなどがあるとエラーを表示してくれるので、エラーを出すことを恐れるのではなく、何がエラーの原因なのかを突き止めて修正を繰り返してみてください。

今回のまとめとして下記を実際に実行してみてください。