Hello World

JavaScriptとは？

主にWebサイトに動きをつけることができるプログラミング言語です。
PHPやJavaなどのサーバーサイド言語は開発環境を用意する必要があります。
しかし、JavaScriptは ブラウザで動く言語 なので、普段使っているブラウザだけあれば大丈夫です！

＜JavaScriptでできることの例＞

保存ボタンを押した時に確認のダイアログを出す
ボタンを押して画像を切り替える
「 ストップウォッチ機能 」「 音声認識の機能 」「 カレンダー 」「地図」なんかも作ることができてしまいます！

JavaScriptが扱えると、非常に多くのことができるようになり、開発の幅が広がります。
「JavaScript 1章」 ではまず、JavaScriptのはじめ方から文法までを見ていきましょう！

準備するもの

＜ブラウザ＞
Chrome、Firefox、Safari、IEなど、どれでも大丈夫ですが、
推奨されているのは Chrome なのでこのカリキュラムではChromeでの開発を前提とします。
MacでどうしてもSafariを使いたい…！という方はこちらの設定をしておいてください。
⬇︎
Safariでデベロッパーツールを起動する方法

＜デベロッパーツール＞
HTMLを書く時にも使っていたかと思いますが、
今回は主に、JavaScriptでの出力結果等を確認するために使用します。

＜リファレンス＞
MDNというJavaScript等の開発者向けドキュメントがあります。
内容はちょっと難しめではありますが、正確で信頼できる情報が載っています。

それでは、さっそく実際にJavaScriptを書いていきましょう！
まずはプログラミングではおなじみの「Hello World!!」を表示してみるところからです。

ファイルの作成

JavaScriptフォルダをどこでも好きな場所に作成してください。
わかりやすくデスクトップに配置してもOKです。

続けて、JavaScriptフォルダの中に1-1フォルダを作成して index.htmlとmain.jsという名前の２つのファイルを準備してください。

Desktop/JavaScript/1-1/index.html
Desktop/JavaScript/1-1/main.js

では次に、CSSのファイルをHTMLで読み込む時と同じように
index.html に main.js ファイルを読み込ませましょう。

JavaScriptの読み込み

headタグやbodyタグに直接JavaScripを書くこともできますが、
外部に作成したファイルを<script src=""></script>で読み込むといった方法が一般的です。

今回の場合、index.htmlの記述は以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

<script src=""></script>を読み込む位置は、基本的には bodyタグの最後 に書いてください。
プログラムは上から順番に実行されるので、すべてのHTMLを読み込んだ後にJavaScriptのコードが読み込まれるようにしたいからです。

src属性で読み込みたいファイルのパスを指定します。
今回は 1-1 フォルダという同じ階層にmain.js と index.html あるので、ファイル名だけでパスとして読み込まれます。

これで準備は整ったので main.jsの中に、次のように書いてみましょう。

console.log("Hello World!!");

console.log()はメッセージを出力する命令になります。
ダブルクォーテーション "" の中に出力したい内容を書きます。

Developer Tools（検証ツール）で出力結果を確認

さて、それではindex.htmlをブラウザで開いて確認してみましょう。
出力の確認方法は以下のようになります。

1：検証ツールを開く
　・Mac… command + option + i
　・Windows… F12キー
　・もしくは、右クリック → 「検証」

2：検証ツールのconsoleタブを選択する

ここに「 Hello World!! 」と表示されていれば成功です！

うまくいかなかった場合、以下の原因であることが多いですよ。
・スペルミス
・ JSファイルがうまく読み込めていない
・どちらかのファイルを保存していない

色々な出力

もちろん、console.log()は数値も表示することができます。
数値の場合は「”」は付けずに console.log(5); のように記述します。

() の中で計算することもできます。
足し算…「+」　引き算…「-」　掛け算…「*」　割り算…「/」
main.jsに記述してみましょう。

console.log(65536);
console.log(10 + 5);
console.log(10 * 5);

また、「+」を文字の結合に使うこともできます。
以下では両方とも表示は「Hello World!!」になります。

console.log("Hello World!!");
console.log("Hello " + "World!!");

実行結果に影響を与えないけれども、自分へのメモ書きとしてコメントを残しておきたい時には「//」と 2つ続けると、そこから行末までがコメントになります。
また、1 行だけではなくて複数行にわたって書きたい場合は、「/*」と「*/」の間にコメントを書きます。

// 割り算の余りの値を求めたい場合は「%」を使用します。
console.log(10 % 2);
/*
上記の場合、10割る2で余り0
そのため出力は「0」
下記の場合、出力は「1」になります
*/
console.log(10 % 3);

課題

理解度チェック
JavaScript→1-1というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

問1：コンソールに「10 + 8」と表示させてください。
問2：コンソールに10 + 8の結果を表示させてください。
問3：コンソールに「20割る3の余りは」と表示させ、続けてその計算結果を表示させてください。

※問2、問3については計算結果（18や、2という数字だけ）を直接表示させるのはNGで、計算式で表現してください。
計算式を書くとJavaScriptが自動で計算結果を返してくれます。

下の画像のように表示できたら完成です。

以下、プラスアルファの知識

ダイアログボックスを表示する

ではここで、ちょっとJavaScriptっぽいことをやってみましょう。

コンソールへの出力に続いて、今度は ダイアログボックス へ出力してみましょう。
確認を求められる時などに上に出てくる表示のことですね。

このダイアログボックスは window.alert() と書くだけで表示することができます。

console.log のように、 () の中に文字列を入れると、画像にある「これがダイアログボックスです。」のように文字を入れることができます。
では、ダイアログボックスに「Hello World!!」を表示させてみましょう。

window.alert("Hello World!!");

JavaScriptの基本文法

JavaScriptに限らず、プログラムの基本は、「〇〇は✕✕しなさい」と命令することです。
今回使ったconsole.log()やwindow.alert()の場合、

・「〇〇は」がconsole、window
・「✕✕しなさい」がlog()、alert()
・()の中のが”Hello World”が✕✕の指示に必要な情報

になります。

JavaScriptでは、このような命令の中で

・「〇〇は」に当たる部分のことを オブジェクト
・「✕✕しなさい」に当たる部分のことを メソッド
・指示に必要な情報に当たる部分のことを パラメータ

と呼びます。