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では、このような命令の中で

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

と呼びます。

東京のプログラミングスクールFreeksです！スクールの紹介や、現場で役立つスキルを現役エンジニアのスタッフが分かりやすく徹底解説します！