この記事はシリーズ「土日で学ぶJS」の第一弾です。
今回は初めてJavaScriptを使ってコードを書くやり方を解説します。
右も左もわからん。何からしたらええんや？
まずはコードを書くためのエディタを用意しよう
コードを書くためにはエディタが必要です。
オススメはVisual Studio Code(通称VS Code)というエディタですね。
無料なのでこちらのリンクからダウンロードしてインストールしてください。
もうインストールしている方は飛ばしてもらって大丈夫です。
https://code.visualstudio.com/
また、入れてほしい拡張機能として「Live Server」があります。
こちらもインストールしておいてください。
作業フォルダをつくってindex.htmlをつくろう
VS Codeを開いて任意の場所に「js-study」など名前は何でもいいのでフォルダを作成しましょう。
フォルダが作成できたらその中にindex.htmlというファイルを作成してください。
index.htmlを開いたら中身は何もありませんが、「!」と入力して、そのままTABキーを押してください。
すると下記のようなHTMLのひな形が一発で入力されると思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
これはEmmetと呼ばれる便利機能で、ほかにも色々あるので良ければ検索してみてください。
今回はJavaScriptの書き方がテーマなので、早速JSをどこに書いていくか説明します。
JavaScriptのコードは、scriptタグの中に書くので、
<script></script>として</body>タグの直前に書いてください。
以下のような形です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script></script>
</body>
</html>これでJavaScriptを書く準備はできました。
ではここからが本番です！
画面上に「Hello JS!」と表示するプログラムを書いてみます。
コードは次のように書いてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.alert('Hello JS!');
</script>
</body>
</html>コードが書けたら、インストールした拡張機能「Live Server」を立ち上げてブラウザで確認します。
VS Codeの右下に「Go Live」というボタンがあると思いますのでそれを押してください。
押すとブラウザが開いて、index.htmlをローカルサーバーで立ち上げることができます。
これによりほぼリアルタイムに画面を確認しながら開発作業を進められるわけです。
めっちゃ便利ですやん
開くとすぐに「Hello JS!」というポップアップが出てきたはずです。
これが先ほど書いた
window.alert('Hello JS!');の部分が正常に動いているという証です。
うまく動いた方はおめでとうございます、これでJavaScriptの初のコードが書けました！
※うまく動かなかった方はスペルミス等がないか確かめてみましょう
window.は省略可能
ちなみに詳しくは後述しますが、下記のように書いても動作は変わりません。
alert('Hello JS!');JavaScriptの基本の書き方
先ほどのコードを参考にすると、大きく分けて３つのパーツに分かれています。
windowとalertと(‘xxxx’)です。
windowはオブジェクト、alertはメソッド、(‘xxxx’)の中身はパラメータと言います。
JavaScriptではまず動作させる物（オブジェクト）を指定し対象を決めます。
windowとは見ている画面、ブラウザのウィンドウそのもののことですが、
ここではオブジェクトにあたるので、上記のコードではwindowオブジェクトを対象に指定しています。
そのwindowに対して何をするのか、が次のメソッドですね。
alertメソッドは与えられたパラメータの内容で、通知を出します。つまり今回はHello JS!ですね。
ちなみにオブジェクトの中でもwindowだけは省略可能となっているので、
alert('Hello JS!');でも
window.alert('Hello JS!');でも、どちらでも動きます。
windowだけは省略可能、と。
命令文の最後は「;」で終わる
JavaScriptのコードはどこで終わるかの区切りを明確につけるために必ず最後に「;」をつけましょう。
実際には省略しても動作することもあるのですが、
意図しないトラブルを防ぐためにも最初のうちは意識してつけておくのがいいでしょう。
「；」は日本語でいう「。」みたいなもんか
まとめ
初めてのJavaScriptのコードはうまく動作しましたか？
動作しなかった場合はスペルミスなどが無いか見て、コードを修正してみてください。
第二弾が出来たら続きのリンクをこちらに貼りますのでしばらくお待ちください。
・JavaScriptはhtmlの中にかける
・</body>の直前に書くべし
・オブジェクトが大切
・windowオブジェクトだけは記述を省略できる
・最後に「;」は付けよう
