JavaScriptをブラウザで動かす | プログラミングアカデミーゼロプラスワン

こんにちは。

プログラミング塾といいながら、プログラミングソースのひとつも出てこないブログになってしまいましたので、プログラム書いていきましょう。

JavaScriptでプログラミングを行っていきます。

はじめが一番大変ですよね。

プログラミングは1文字間違っただけで動かないですし、動かなくなると何がなんだかよくわからなくて進まなくなり嫌になります。もし、このページの内容がわからなかったり間違っていたりして、進まなくなってしまっていたらすいません。コピペを多用してください。

うまくいかなければ、コメントをください。フォローできますし、教材として修正するきっかけにもなります。

教えることについても、私もプロフェッショナルになっていきたいので、誤植とか、もっとここを詳しくとか、教えてもらえると助かります。

読んでくださっている方がどこまで前提知識をもっているか、どこまで説明するのが適切なのか、少し迷いがあり、テキストファイルとか、UTF-8とか、今回は説明はとばしましたが、詳しく知りたいというご要望が多くあれば、そういう内容について書いていこうと思っています。

では、やっていきます。

テキストファイルを用意する。

Mac でも Windows でもかまいません。

テキストファイルを作れる環境を用意しておいてください。テキストエディタは VSCode をおすすめします。

index.html とか index001.html とかの名前をつけて、テキストファイル UTF-8 BOMなしというエンコードで保存して、ファイルをダブルクリックすると動作確認ができます。

HTMLファイルを用意します。

JavaScript はブラウザで動くので、ブラウザが表示するHTMLファイルの中に記載することができます。また、HTMLとは別ファイルで動かすことができるので、それぞれの書き方をまとめておきます。

まず、基本的なHTML5の構文を学んでおきます。次の記述が、HTML5の基本形です。いまどきのWebページには全てこれらのタグが書かれているべきだと覚えておいてよいでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="ファイル名"></script>
  <script>
    // ここにJavaScriptプログラムを書く
  </script>
</head>
<body>
  Text
  <script>
    // 場合によってはここに書いてもよい
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

// ここにJavaScriptプログラムを書く

</script>

</head>

<body>

Text

// 場合によってはここに書いてもよい

</script>

</body>

</html>

このファイルを、index001.html としてファイル保存して、ダブルクリックすると、ブラウザが開くと思います。(開かない場合はドラッグ＆ドロップしてみてください。)

これを動かすと、画面に Text と表示されますよね。これはHTMLの機能です。

このファイルの中のscriptタグの部分で、JavaScriptの外部ファイルをリンクしたり、JavaScriptをその場に記載したりすることができます。

HTMLファイル内にJavaScriptコードがある場合

動作確認できる例を載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    alert('Hello World !');
  </script>
</head>
<body>
  Text
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

alert('Hello World !');

</script>

</head>

<body>

Text

</body>

</html>

このファイルを、index002.html として保存して動かしてみてください。

JSの alert 命令は、メッセージを表示させることができます。通常は、あまり使いませんが、この場合には動作確認として使っています。次のようなメッセージがブラウザで表示されます。

SnapCrab NoName 2018 8 17 23 33 12 No 00 - JavaScriptをブラウザで動かす

これで、JavaScriptが動いているということがわかります。

これが、HTMLファイル内のscriptタグに JavaScriptコードを埋め込むタイプのやり方です。

長いJavaScriptコードを書くときには、HTMLとJSが混在して複雑になるために、このやり方は避けられる傾向がありますが、シンプルな方法です。

細かなところですが、[1]headタグの部分に scriptタグを書くやり方と、[2]bodyタグの部分に scriptタグを書くやり方がありますが、通常は[1]のやり方でよいでしょう。bodyで表示されるHTMLの要素を起動後すぐに操作する場合には[2]のやり方を使います。

HTMLファイルとJSファイルに分離してJavaScriptを書く場合

もうひとつの例として、外部ファイルでHTMLファイルと JSファイルを分離する方法です。

alert('Hello World !');

1	alert('Hello World !');

この内容を、index003.js というファイル名でテキストファイルで保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="index003.js"></script>
</head>
<body>
  Text
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

Text

</body>

</html>

こちらのHTMLを index003.html というファイル名で保存して、これをブラウザで開いてください。

先程の index002.html を開いたときと同じ動作をします。

これが、HTMLファイルと、JSファイルを分離して、JavaScript をブラウザで動かす方法になります。

console.log

通常、最近は動作確認として、alertではなく console.log を使います。

先の例の alert の部分を、console.log に変えたものです。

  console.log('Hello World !');

1	console.log('Hello World !');

上記の内容を、index004.js というファイル名でテキストファイルで保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="index004.js"></script>
</head>
<body>
  Text
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

Text

</body>

</html>

こちらは index004.html というファイル名で保存して、これをブラウザで開いてください。

この、console.log という命令はどこに出力されるかというと、Google Chrome で見ている場合、開発者ツールの所で確認できます。

右上の3点マークでメニューを出して、[その他のツール>デベロッパーツール]を選ぶと、下か右かに、パネルが出てきます。この中で[Console]というタブを選ぶと、Hello World ! が出力されているのがわかります。下の画像のようになっているでしょう。

この console.log は、ブラウザでもサーバー(Node.js)でもよく使うので、使いこなしていきましょう。

SnapCrab NoName 2018 8 18 0 41 29 No 00 - JavaScriptをブラウザで動かす

このように、JavaScriptの動かしていきます。これがはじめの一歩なので、簡単な方には十分に簡単ですよね。

動かせなかった方は、疑問点があれば、コメント欄などで教えてください。