JavaScript - コードを書いてブラウザで動かすまでの手順

JavaScript プログラミングの流れを知ろう

プログラミングは初めてですか？ウェブページに動きをつける JavaScript を書いてみたいですか？

今回は、HTML と JavaScript を書いてブラウザで動かすまでの手順を紹介します。慣れないうちは複雑に感じるかもしれませんが、一つひとつの作業は難しいものではありません。JavaScript を動かすためのプログラミングの流れを、一緒に学んでいきましょう。

JavaScriptが初めての方は、『JavaScript プログラミングを始めよう』の記事からご覧ください。

JavaScript プログラミングを始めよう

JavaScript（ジャバスクリプト）は、私たちが日常的に利用しているウェブサイトやウェブアプリなどで使われているプログラミング言語です。プログラミング初心者の方へ向けて、JavaScript について簡単に紹介します。

PyxofyPyxofy

プログラミングの手順 - VS Code を使う場合

ここでは、HTML や JavaScript を書くためのテキストエディタとして、Visual Studio Code（以下 VS Code）を使って説明していきます。

テキストエディタなどのツールは、『プログラミングをする環境を整えよう』の記事を参考にして、事前に準備しておいてくださいね。

JavaScript - プログラミングをする環境を整えよう

JavaScript を学んでいくために必要なツールを紹介します。インターネットに接続されたパソコンを用意して、プログラミングをするための環境を整えていきましょう。

PyxofyPyxofy

VS Code でのプログラミング手順は、次のとおりです。

フォルダを作成する：パソコン内にフォルダを作り、VS Code で開きます。
HTML ファイルを作成する：フォルダ内に HTML ファイルを作り、HTML を書きます。
JavaScript ファイルを作成する：フォルダ内に JavaScript ファイルを作り、JavaScript を書きます。
ブラウザで実行する：HTML をブラウザに読み込み、プログラムを実行します。

では、ひとつずつ順番に詳しく見ていきましょう。

1. フォルダを作成する

HTML ファイルや JavaScript ファイルなどをひとつの場所にまとめるために必要になるのが、フォルダです。フォルダ単位でひとつのプログラムとして扱います。

パソコンの任意の場所に、任意の名前でフォルダを作ります。
VS Code を起動して、そのフォルダを開きましょう。

Visual Studio Code のフォルダを開くボタン

ここでは例として、sample という名前でフォルダを作りました。VS Code では、フォルダ名は大文字で表示されます。

開いたフォルダがエクスプローラーに表示される

このフォルダの中に、HTML ファイルと JavaScript ファイルを作っていきますよ。ファイルを作るときは、新しいファイルを作成するボタンをクリックします。

新しいファイルを作成するボタン

2. HTML ファイルを作成する

新しいファイルを作成するボタンをクリックしたら、ファイル名を入力します。

HTML ファイルの名前は、index.html とします。
入力が終わったら、エンターキー enter を押して確定します。

index.html を作成する

index.html に HTML を書いていきましょう。

半角の感嘆符 ! を入力した後にタブキー tab を押すと、基本の HTML が自動的に入ります。

基本のHTML

私たちは日本語を使っているので、<html lang="en"> を <html lang="ja"> に変更してください。
<body> 要素の中に、例として<p> 要素と <script> 要素を書きます。

<!DOCTYPE html>
<html lang="ja">  <!-- "en" を "ja" に変更する。-->
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
  
    <!-- <p>要素と<script>要素を書く。-->
    <p>この文字列をクリックしてください</p>
    <script src="script.js"></script>
  
  </body>
</html>

HTMLコード

入力が終わったら保存しましょう。便利なショートカットキーを使うと良いですよ。macOS の場合は command (⌘) + S 、Windows の場合は Ctrl + S で保存することができます。

3. JavaScript ファイルを作成する

新しいファイルを作成するボタンをクリックして、JavaScript ファイルを作ります。ファイルの名前は script.js と入力し、エンターキー enter を押して確定します。

script.js を作成する

script.js にJavaScript コードを書きます。ここで例として書いているのは、「文字列がクリックされたとき、その文字列の内容を変更する」という動きです。

//文字列がクリックされたとき、その文字列の内容を変更する

let str = document.querySelector('p');
str.addEventListener('click',changeText);

function changeText() {
  str.innerHTML = 'クリックしましたね！';
}

JavaScript コード

画面の左上に表示される青い数字は、保存されていないファイルがあることを示しています。command (⌘) + S（macOS）または Ctrl + S（Windows）で、保存するのを忘れないようにしましょう。

コードを変更したら保存をする

コーディングは以上です。