【土日で学ぶJS】01-はじめてのJavaScript

2024 4/12

2024年4月12日 2024年4月12日

この記事はシリーズ「土日で学ぶJS」の第一弾です。

今回は初めてJavaScriptを使ってコードを書くやり方を解説します。

右も左もわからん。何からしたらええんや？

まずはコードを書くためのエディタを用意しよう

コードを書くためにはエディタが必要です。

オススメはVisual Studio Code(通称VS Code)というエディタですね。

無料なのでこちらのリンクからダウンロードしてインストールしてください。

もうインストールしている方は飛ばしてもらって大丈夫です。

https://code.visualstudio.com/

また、入れてほしい拡張機能として「Live Server」があります。

こちらもインストールしておいてください。

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!」というポップアップが出てきたはずです。

これが先ほど書いた