STEP1

まずは、花火を作るための準備から始めましょう！

  1. 最初に、PCのデスクトップなど分かりやすい場所に、新しいフォルダを1つ作ってください。フォルダの名前は「my-fireworks」など、自由な名前で大丈夫です

  2. 次に、VS Codeを起動して、今作った「my-fireworks」フォルダを開いてください。「ファイル」メニューの「フォルダを開く」から選択できます

  3. 画面左側の四角が複数あるボタン「拡張機能」よりLiveServerと検索し、一番上に出てきたものをインストールしてください

  4. フォルダを開いたら、新しいファイルを1つ作成します ファイル名は「index.html」にしてください

  5. 以下のコードを作ったindex.htmlにコピーして貼り付けてください 練習したい方は手打ちで行うと自身で作っている実感が湧くのと実際に打つことで少しずつ覚えていけると思います！

<!DOCTYPE html>
<html>
<head>
  <style>
    #fireworks-container {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
    }
  </style>
  <script defer type="module">
    // ここにJavaScriptを書きます
  </script>
</head>
<body>
  <div id="fireworks-container"></div>
</body>
</html>

ここまで出来たらVScodeの右下にある「GoLive」ボタンを押してください！

ブラウザが立ち上がって、真っ黒な画面が表示されれば準備完了です！

STEP2

ここから花火を打ち上げていきます！

  1. index.htmlのscriptタグの中に、JavaScriptを書いていきましょう
  2. JavaScriptコードをコピーして、scriptタグの// ここにJavaScriptを書きますと書かれた部分に上書きするように貼り付けてください
// ライブラリを読み込む
import { Fireworks } from '<https://cdn.skypack.dev/fireworks-js>';

// HTMLの要素を取得
const container = document.getElementById('fireworks-container');

// 花火を準備
const fireworks = new Fireworks(container);

// 花火を開始！
fireworks.start();

コードを写してファイルを保存するとブラウザの画面で自動的に上がり始めたはずです！

importという命令で花火のライブラリ（道具箱）を読み込んで、start()という命令で開始しています