【JavaScript入門】JavaScriptを動かしてみよう

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、サンプルコードをもとにJavaScriptがどのように動くのかを学びます。

詳しい内容は以降の章で解説しますので、まずはJavaScriptに触れてみましょう！

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

Visual Studio Codeを起動させる

「アプリケーション」フォルダから、「Visual Studio Code」を起動させましょう。

サンプルコードを開いてみる

「Visual Studio Code」を起動させたら、先ほどダウンロードしたファイルを開いてみましょう。

左上のファイルマークのアイコンをクリックしてください。

次に、「Open Folder」ボタンをクリックしてください。

次に、ダウンロードしたファイルから「001 JavaScriptを動かしてみよう」を選択して開いてください。

開くと、次のような画面になります。

「スタート」と「完成」フォルダがありますが、皆さんがコードを書くのは「スタート」フォルダにあるファイルです。

「完成」フォルダには本章の完成形のコードが収められています。もし、途中で分からなくなったら確認してください。

サンプルコードの使い方について、こちらで解説しています。ご確認ください。

【JavaScript入門】はじめに

サンプルコードをChromeで開いてみよう

では、次にこのサンプルコードをChromeで開いてみましょう。

「スタート」フォルダには、「index.html」というファイルがあります。

これは HTMLファイル と言って、ウェブサイトを表示するためのファイルになります。

ChromeなどのウェブブラウザにこのHTMLファイルを読み込ませると、自動的にウェブページを表示してくれます。

HTMLファイルを読み込ませる

HTMLファイルをChromeに読み込ませるには、次のような方法があります。

FinderからHTMLファイルを開く

まずは、Finderから「スタート」フォルダの「index.html」に移動してください。

「index.html」を選択した状態で、右クリックして「このアプリケーションで開く」から、「Google Chrome」を選択してください。

選択後にChromeに切り替わって次のようなページが表示されます。

このページが、「スタート」フォルダの「index.html」を読み込んだウェブページになります。

HTMLファイルをドラッグ&ドロップする

同様に、Finderから「スタート」フォルダの「index.html」に移動してください。

「index.html」を選択した状態で、Chromeにファイルをドラッグ&ドロップしてください。

ドラッグ&ドロップ後に同じようにページが表示されます。

JavaScriptを書いてみよう

HTMLファイルをChromeに表示することができました。

では、次にJavaScriptを書いてみましょう。

ステップ1 window.alert

初めに、「スタート」フォルダの「index.html」を開いてください。

赤枠の部分をダブルクリックすると、右側にファイルの中身を確認することができます。

なにやら、怪しげな文字がたくさん並んでいます。

初めはビックリしてしまうかもしれませんが、学んでいくと少しずつ見慣れてくるので安心してください。

このファイルがHTMLファイルであり、ウェブサイトを構築するファイルになります。

HTMLファイルには、HTMLだけでなく、CSS(スタイルシート)、JavaScriptの記述をすることができます。

コードを書く

「index.html」の中に、「ステップ1 window.alert」と記述がされています。

その真下にカーソルを合わせて、次のようにコードを書いてみましょう。

// ステップ1
window.alert window.alert("こんにちは")

英数字の部分は、半角英数字で記述してください。

「こんにちは」を囲っているのは「ダブルクォート」です。

ファイルを保存する

コードを書き終わったら、ファイルを保存しましょう。

コードを編集したあとは、次の画像のようにファイル名の横に「●」がついています。

これは、まだ「このファイルが保存されていません」という意味です。

変更があったファイルを保存するには、「command」+ 「S」を同時に押下します。

すると、次のようにファイル名の横に「●」がなくなります。

これで、変更点をファイルに保存することができました。

Chromeで動かす

JavaScriptのコードを書くことができました。

ではこれを実際にChromeで動かしてみましょう。先ほどのページをChromeで確認してください。

「command」+ 「R」でページをリロードすると、次のような画面になります。

画面に、「こんにちは」という文字が出現しました。これは、アラートというものです。

警告のようなもので、ユーザーに何かしらのメッセージを出す場合に使用します。

このアラートを出すために、JavaScriptでは window.alert() というコードを書きます。

window.alert() の () の中身は任意のメッセージを入れることができます。

試しに、次のようなメッセージに変えてみましょう。

// ステップ1 window.alert
window.alert("おはようございます！")

Chromeでリロードすると、次のようにメッセージが「おはようございます！」に変わったのが確認できます。

コメントアウトする

window.alert でアラートを画面に出すことができました。

しかし、リロードする度に毎回このメッセージが出ると少し厄介なので、アラートが出ないようにしましょう。

アラートが出ないようにするには、単純にコードを消す以外に コメントアウト すると出ないようすることができます。

コメントアウトとは、記述したコードが実行されないようにする仕組みです。

コードが実行されないと、記述したものは無視されるようになっています。

コメントアウトするには、対象のコードの手前に「/」 (スラッシュ)を二つ書きます。

// ステップ1 window.alert
// window.alert("こんにちは")

スラッシュを二つ書くことによって、コードの色が変わったのが確認できます。これでコメントアウトすることができました。

アラートが出ないか、Chromeで確認してみましょう。

Chromeで「command」+ 「R」でリロードしてください。

アラートが出ないのが確認できました。

これは、コメントアウトしてコードが実行されなかったためです。

ステップ2 console.log

次に、console.log を書いてみましょう。

コードを書く

「index.html」の中に、「// ステップ2 console.log」と記述がされています。

その真下にカーソルを合わせて、次のようにコードを書いてみましょう。

// ステップ2 console.log
console.log("私の名前は、太郎です。")

そして、「command」+ 「S」でファイルを保存してください。

Chromeで動かす

ではこれをChromeで動かしてみましょう。

Chromeで「command」+ 「R」でページをリロードしてください。

しかし、画面には何も出てきませんでした。

なぜでしょうか。

console.logとは

console.log は、JavaScript開発する際に値をデバッグするためのコードです。

デバッグとは、プログラムにエラーがあったときなどに原因を探るために行う作業です。

ですので、console.log は開発をするときにしか使いません。

開発をするときにしか使わないので、画面には出てきません。

では、どこで確認するのでしょうか。

Chrome デベロッパーメニュー

console.log の結果は、「Chrome デベロッパーメニュー」で確認することができます。

「Chrome デベロッパーメニュー」とは、Chromeが提供している開発者のためのツールです。

普段、私たちがインターネットをするときに使うことはありません。

しかし、これからウェブサイトを開発する際には必ず使いますので覚えておきましょう。

では、「Chrome デベロッパーメニュー」を表示してみましょう。

Chromeの画面で右クリックして、「検証」ボタンをクリックしてください。

すると、次のような画面が出てきます。続けて、「Console」というタブをクリックしてください。

「Console」タブで、「私の名前は、太郎です。」という文字を確認することができます。

この文字は、console.log によって出力された文字です。

このように、console.log はウェブサイトの開発をするときに任意の値を出すために使われます。

今はピンとこないかもしれませんが、今後使う機会がたくさんあるので覚えておきましょう。

ステップ3 window.prompt

次に、window.prompt を書いてみましょう。

コードを書く

「index.html」の中に、「// ステップ3 window.prompt」と記述がされています。

その真下にカーソルを合わせて、次のようにコードを書いてみましょう。

// ステップ3 window.prompt
window.prompt("入力してね")

そして、「command」+ 「S」でファイルを保存してください。

Chromeで動かす

ではこれをChromeで動かしてみましょう。

Chromeで「command」+ 「R」でページをリロードしてください。

アラートのように、「入力してね」というメッセージが出てきました。

その下に、入力欄があります。

何か入力して、「OK」してみましょう。

しかし、特になにも起きません。

window.promptとは

window.prompt は、任意で入力された値を受け取ることができます。

では、その受け取った値を console.log で出力してみましょう。

次のように「ステップ3 window.prompt」のコードを書き換えてください。

// ステップ3 window.prompt
const message = window.prompt("入力してね")
console.log(message)

そして、Chromeでリロードしてもう一度入力してみましょう。

デベロッパーメニューで確認すると入力された文字が出力されているのがわかります。

このように、受けとった値を「Console」画面で確認することができました。

まとめ

本章では、サンプルコードをもとにJavaScriptがどのように動くのかを学びました。

JavaScriptによってウェブサイトに動きをつけることができましたね。

また、window.prompt では入力する動作を求められました。

このようにJavaScriptを使うことによって、ユーザーとのやりとりを作ることができます。

最後にもう一度、重要なことを確認しましょう。

一つ一つのコードが何をしているのか完全に理解できない部分があったかと思います。

しかし、以降の章で詳しく解説しますので今は分からなくても大丈夫です。

次の章では、HTMLの構成について学びましょう。