ちゃんと学ぶ、JavaScriptテンプレートHTMLを準備しよう

記事を共有：

JavaScriptを学ぶ場合、単体で学ぶよりもHTMLとの組み合わせた方が、より実践的なプログラムを学ぶことができます。そこでここでは、JavaScriptを記述するためのベースとなるHTMLを準備しましょう。

フォルダを作成しよう

まずは、学習用のフォルダを準備します。デスクトップなど、分かりやすい場所が良いでしょう。ここでは、「javascript」などの名前で作成します。

そしたらこのフォルダを、VSCodeで開いておきましょう。アイコンにドラッグします。すると、左側に「エクスプローラーパネル」が表示されて、ファイルやフォルダの基本的な操作をここで行えるようになって便利です。

なお、警告が表示された場合は自分で作成したフォルダの場合は、「作成者を信頼します」をクリックしましょう。

テンプレートファイルを準備しよう

そしたら、フォルダの中に「template.html」などのファイル名で次のHTMLを準備しておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>JavaScript入門</title>
</head>
<body>
    
</body>
</html>

これで保存しておきます。また合わせて、「style.css」という名前でファイルを作成し、次のようなCSSも準備しておくと良いでしょう。Webブラウザに表示したときの見た目を若干整えます。

これ以降、JavaScriptを作成する場合はこのファイルを複製しながら作成するか、ファイルを作成したら、この基本となるHTMLをコピーしながら作成していくと良いでしょう。これで、学習をはじめて行きましょう。

次のレッスン