👨‍💻
【石巻ハッカソン IT Boot Camp部門】 AIでプログラミングを体験してみよう！

2024/10/12に公開
 IT Boot Camp　1日目！

 環境構築（コードを書く準備！）
 1. VSCodeのインストール
 Windows
VSCodeのダウンロードページにアクセスします。
「Download for Windows」ボタンをクリックします。
ダウンロードが完了したら、インストーラー（VSCodeUserSetup-{version}.exe）を実行します。
インストーラーの指示に従ってインストールを完了させます。

 Mac
VSCodeのダウンロードページにアクセスします。
「Download for macOS」ボタンをクリックします。
ダウンロードが完了したら、ダウンロードフォルダにあるVSCode-darwin-{version}.zipファイルをダブルクリックして展開します。
展開されたVisual Studio Code.appをアプリケーションフォルダにドラッグします。

 2. 初期設定
 日本語化VSCodeを起動します。
画面左側の拡張機能アイコンをクリックします。
検索バーに「Japanese Language Pack for Visual Studio Code」と入力し、インストールします。
インストールが完了したら、表示言語を変更するためにVSCodeを再起動します。

 Live Serverのインストール画面左側の拡張機能アイコンをクリックします。
検索バーに「Live Server」と入力し、Ritwick Deyの「Live Server」をインストールします。

 3. プロジェクトの作成と基本操作
 新しいプロジェクトの作成「ファイル」メニューから「新しいウィンドウ」を選択します。
「ファイル」メニューから「フォルダーを開く」を選択し、新しいプロジェクトフォルダーを作成します。

 index.htmlファイルの作成プロジェクトフォルダーを開いた状態で、「ファイル」メニューから「新しいファイル」を選択します。
ファイルに「index.html」と名前を付けて保存します。
以下のコードをindex.htmlファイルに入力し、保存します。
<h1>Hello, World!</h1>

 ChatGPTセットアップガイド
 1. ChatGPTとは？ChatGPTは、OpenAIが開発した大規模な言語モデルで、人間のように自然な対話を行うことができるAIです。様々な質問に答えたり、文章を生成したり、簡単なプログラミングのサポートを行ったりすることができます。ChatGPTは教育、エンターテインメント、ビジネスなど、幅広い分野で利用されています。

 2. ChatGPTを利用するための準備
 OpenAIアカウントの作成
OpenAIの公式サイトにアクセスします。
右上の「Sign Up」ボタンをクリックします。
必要な情報（メールアドレス、パスワード）を入力し、アカウントを作成します。
登録したメールアドレスに送られてくる確認メールを開き、リンクをクリックしてアカウントを確認します。

 ChatGPTの使い方アカウント作成後、ChatGPTのページにアクセスし、ログインします。
ログインすると、ChatGPTとの対話ができる画面が表示されます。
画面下部の入力欄に質問やメッセージを入力し、「送信」ボタンをクリックすると、ChatGPTが応答します。

 ChatGPTの活用例
質問応答：一般的な知識や特定のトピックについての質問に答えることができます。
例：「太陽系の惑星の順番を教えてください。」


文章生成：エッセイ、記事、ストーリーなどの文章を生成することができます。
例：「環境保護についての短いエッセイを書いてください。」


アイデア出し：新しいアイデアやプロジェクトの提案を行うことができます。
例：「新しいアプリのアイデアを教えてください。」


 3. 注意点
プライバシー：個人情報や機密情報を入力しないようにしてください。

正確性：ChatGPTの応答は必ずしも正確でない場合があるため、重要な情報は必ず確認するようにしてください。

 【HTML編】実践！AIでプログラムを書いてみよう
 ChatGPTに電卓を作ってもらおう！以下のプロンプトをChatGPTに入力し、作ってもらいましょう。
電卓アプリに必要なhtmlを出力して

styleタグとscriptタグは不要です。
入力するとすぐにコードが生成されます。
出力されたコードの右上にある「コードをコピーする」ボタンをクリックして、コードをコピーしましょう。
コピーできたら、VSCodeに貼り付けます。Windowsでは Ctrl+V、MacOSでは ⌘+V で貼り付けができます。
このように貼り付けができたら成功です。
コードに変更があった場合、ファイル名の横に白い丸がつき、「開いているエディター」の横に「未保存（１）」と表示されます。
変更があったら、Windowsでは Ctrl+S、MacOSでは ⌘+S で保存しましょう。
保存ができたら、画面下部の「Go Live」をクリックしてブラウザで開いてみましょう。
このような表示が出てきたら成功です。
電卓に使うようなボタンが並んでいますが、まだ電卓には見えませんね。クリックしても機能しないはずです。
次に、AIを使って「見た目」を作っていきましょう。

 【CSS編】実践！AIでプログラムを書いてみよう
 CSS（Cascading Style Sheets）とはウェブページの見た目やデザインを指定するための言語です。

 CSSでできること
CSSを使うと、以下のようなデザインを設定できます。

文字の色やフォント: テキストの色やフォントサイズ、スタイルを変更できます。

背景色や画像: ページや要素の背景に色や画像を設定できます。

レイアウト: ページ内の要素を配置したり、サイズを調整したりできます。例えば、ボックスレイアウトやグリッドレイアウトなどです。

マージンやパディング: 要素の外側や内側の余白を設定できます。

 ChatGPTに電卓を作ってもらおう！以下のプロンプトをChatGPTに入力し、作ってもらおう！
styleタグのみ追加して
このプロンプトを入力すると以下のような<style>というタグの中身が出力されます。

HTMLと同じように右上の「コードをコピーする」からコピーし、VSCodeに貼り付けてみましょう。貼り付ける際はVSCodeの中身を全選択（Windows:Ctrl+A, MacOS:⌘+A）した上で、そのまま貼り付けしましょう。

全選択すると選択された部分が薄い色で覆われます！
このまま貼り付けしてください！
先ほど「Go Live」で開いていたウィンドウに戻ると、画像のようにデザインが変わっていると思います。AIで生成したものはその時々や指示した内容によって異なるので近くの人と見比べてみても良いかもしれません。
ここで見た目はできましたが、計算をする仕組みやボタンに機能を与える仕組みがないので、クリックしても機能しないと思います。
次のJavaScript編で動作を与えていきましょう。

 【JavaScript編】実践！AIでプログラムを書いてみよう！
 JavaScript（JS）とはウェブページに動的な機能を追加するためのプログラミング言語です。
Javaとは全く別の言語なので略称で呼ぶときはJS（ジェイエス）と呼びましょう。
JSとJavaはメロンとメロンパンくらい違います！
メロンは果物だけどメロンパンはパンですよね。名前が似てるだけで全くの別物です！

 JavaScriptの役割
HTMLがウェブページの骨組みを作り、CSSがその見た目を整えるのに対して、JavaScriptはウェブページに動きを加えたりするために使います。

 JavaScriptでできること
JavaScriptを使うと、以下のような機能を実現できます。

ユーザーの操作に応じた動作: ボタンのクリック、フォームの送信、マウスの動きなどに反応して特定の動作を実行できます。

コンテンツの変更: ページ内のテキストや画像を動的に変更したり、新しい要素を追加したりできます。

データの操作: 入力されたデータを検証したり、計算を行ったり、データを保存したりできます。

アニメーション: ページ内の要素を動かしたり、フェードインやフェードアウトさせたりすることができます。

サーバーとの通信: サーバーからデータを取得したり、サーバーにデータを送信したりすることができます。

 ChatGPTに電卓を作ってもらおう！以下のプロンプトをChatGPTに入力し、作ってもらおう！
scriptタグを追加して
このプロンプトを入力すると、以下のような<script>というタグの中身が出力されます。

下の方に<script>タグが出力されていると思います。
CSSの際と同じように「コードをコピーする」ボタンからコピーし、VSCodeのコードを全選択→コピーしたコードを貼り付けましょう。
同様に、「Go Live」で出てきたウィンドウから動作を確認しましょう。
計算ができるようになったら成功です！


 【応用編】実践！AIでプログラムを書いてみよう！ここまでで、基本的な機能を備えた電卓アプリができたと思います。
中にはうまく機能しない方もいたのではないでしょうか？
うまく機能した方も、うまく機能しなかった方もHTML,CSS,JavaScriptの基礎は書けているのでこのまま応用編にうつりましょう。
もし、ChatGPTの使い方を理解して自分でカスタマイズを進められそうな方はそのまま読み飛ばしてカスタムに移ってもらって構いません。

 1.電卓アプリのカスタム現在、以下のようなコードがエディタに記入されていると思います。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電卓アプリ</title>
    <style>
        #calculator {
            width: 200px;
            margin: 50px auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #display {
            width: 100%;
            background-color: #f3f3f3;
            border-bottom: 1px solid #ccc;
            text-align: right;
        }
        #result {
            width: 100%;
            height: 40px;
            font-size: 24px;
            border: none;
            background-color: #f3f3f3;
            text-align: right;
            padding-right: 10px;
            box-sizing: border-box;
        }
        #buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
            padding: 10px;
        }
        .btn {
            width: 100%;
            height: 40px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            background-color: #e0e0e0;
            cursor: pointer;
        }
        .btn:active {
            background-color: #ccc;
        }
        .operator {
            background-color: #f9a825;
            color: white;
        }
        .operator:active {
            background-color: #f57f17;
        }
        .equal {
            grid-column: span 4;
            background-color: #0d47a1;
            color: white;
        }
        .equal:active {
            background-color: #0c4081;
        }
        .clear {
            background-color: #d32f2f;
            color: white;
        }
        .clear:active {
            background-color: #b71c1c;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <div id="display">
            <input type="text" id="result" disabled>
        </div>
        <div id="buttons">
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn operator" data-value="/">/</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn operator" data-value="*">*</button>
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn operator" data-value="-">-</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn clear" data-value="C">C</button>
            <button class="btn operator" data-value="+">+</button>
            <button class="btn equal" data-value="=">=</button>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.btn');
            const result = document.getElementById('result');
            let currentInput = '';
            let operator = '';
            let firstOperand = '';

            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    const value = button.getAttribute('data-value');
                    
                    if (value === 'C') {
                        currentInput = '';
                        operator = '';
                        firstOperand = '';
                        result.value = '';
                    } else if (value === '=') {
                        if (firstOperand !== '' && operator !== '' && currentInput !== '') {
                            currentInput = eval(firstOperand + operator + currentInput).toString();
                            result.value = currentInput;
                            firstOperand = '';
                            operator = '';
                        }
                    } else if (['+', '-', '*', '/'].includes(value)) {
                        if (currentInput !== '') {
                            firstOperand = currentInput;
                            operator = value;
                            currentInput = '';
                        }
                    } else {
                        currentInput += value;
                        result.value = currentInput;
                    }
                });
            });
        });
    </script>
</body>
</html>
このコードでは以下のような電卓が表示されています。

デザインのカスタマイズをしてみましょう。
カスタマイズをする上で
どんなデザインにしたいか
どんな電卓にしたいか
どんな電卓が存在しているか
といった観点で考えて、AIに指示を与えてみましょう。
今回は現実に存在する電卓のようなレイアウトを与えるためのプロンプトを考えてみたいと思います。
この指示を与えた場合、以下のような電卓アプリのコードが出力されます。
要件は満たしていますが、ディスプレイが電卓本体の幅を超えていたり、現実の電卓にしてはカラフルすぎるかもしれませんね。
出力された内容から不足している要件や、新たに必要と感じた要件を洗い出してみましょう。
今回の場合は、
ボタンの色がカラフルすぎる
白・黒・グレーにしたい

ディスプレイがはみ出している
ディスプレイの幅は本体の幅に合わせるようにしたい

こういった要件を与えることで生成される回答の精度がより向上します。
以下の要件に合わせて、スクリプトの修正をしてほしい。

CSSのデザインがカラフルすぎるのでボタンの色は白・黒・グレーにしてほしい。

ディスプレイが本体からはみ出しているので本体の幅に合わせたレイアウトにしてほしい。
以下スクリプト
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電卓アプリ</title>
    <style>
        #calculator {
            width: 200px;
            margin: 50px auto;
・
・
・
このプロンプトで以下のようなコードが生成されました。
ディスプレイの幅も適切に修正され、落ち着いたデザインに変更されたと思います。
また、ChatGPTには画像を読み込む機能もある（GPT4-oというバージョンのみ）のでスマホやPCに搭載されている電卓アプリや、実物として存在している電卓の写真を読み込ませてデザインを合わせてもらうことも可能です。
実際に操作してみて
演算記号が×や÷と表示されていないので使いにくい
イコールの幅が広すぎる
キーボードのテンキーでも入力できるようにしてほしい
など気づいた点をリストアップしてAIに回答してもらうのもよいかもしれませんね！
みなさんの気づきをリストアップし、それぞれの理想に近づけるようにカスタマイズしてみましょう！

 2.電卓以外のWebアプリの作成電卓のカスタマイズが完了した方は、他のアプリも作ってみましょう。
せっかくAIを使っているので初学者向けのウェブアプリの題材にどんなものがあるのかAIに聞いてみましょう。
以下のプロンプトをChatGPTに入力してみましょう。
初学者向けのウェブアプリの題材にはどのようなものがあるか教えてください。
このような回答が返ってきました。
今回は1番のTodoリストを作ってみますが、みなさんは好きなものを作ってみましょう。
ChatGPTに以下のプロンプトを入力してみます
WebでTodoアプリを作ってください。




入力フォーム（inputタグ）の位置がズレていますが、十分なデザインと機能が提供されていますね。ここから同じように修正したいポイントを考えて、的確な指示を与えればTodoアプリも修正できます！

 3.自身で学習するためにChatGPTを使えば、専属の家庭教師のようにより高度な学習のサポートも可能です。
例えば
HTMLの基礎を教えて
だったり、
JavaScriptのライブラリについて教えて
など専門の用語を使えばより高度な内容も教えてもらうことが可能です。
自分で作成したものに”ライブラリ”というものを使ってより高度な機能を提供してもらうプロンプトを入力してみましょう。
電卓アプリのデザインをライブラリを使ってより良くするためには？


今回はBootstrap（ブートストラップ）というライブラリを用いて、デザインを改修したようです。
このようにライブラリというものを使って既存のデザインや機能を強化することもできますので、どんどんAIに聞いてカスタマイズしてみましょう！
ライブラリについては後日やりますので興味のある方はぜひ先取りしてやってみてくださいね！

 IT Boot Camp　2日目！

 ライブラリを使って動的なWebサイトを作ってみよう！
 ライブラリとは？Web開発やプログラミングの学習を進めていくと、「ライブラリ」という言葉をよく耳にします。

では、ライブラリとは一体何なのでしょうか？

 1.ライブラリの基本的な定義ライブラリは、特定の機能やタスクを簡単に実行できるようにまとめられたコードの集まりです。プログラミングにおいて、ライブラリを使うことで、ゼロからコードを書く手間を省くことができます。これにより、効率的にアプリケーションやウェブサイトを開発できるようになります！

 2.具体的な例
 Swiper.jsSwiper.js は、スライダーやカルーセルを簡単に作成できるJavaScriptライブラリです。画像やコンテンツをスワイプして表示することができるため、ユーザー体験を向上させることができます。以下は、Swiper.jsを使用することで、簡単にスライダーを実装する例です。
<!-- SwiperのHTML構造 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
    <div class="swiper-slide">スライド3</div>
  </div>
</div>

<!-- Swiper.jsの初期化 -->
<script>
  var mySwiper = new Swiper('.swiper-container', {
    // オプション設定
    loop: true,
    autoplay: {
      delay: 3000,
    },
  });
</script>

 BootstrapBootstrap は、ウェブサイトのデザインを簡単に行うためのCSSフレームワークです。事前に用意されたスタイルとコンポーネントを使用することで、レスポンシブなウェブページを短時間で作成できます。以下は、Bootstrapを使用してシンプルなボタンを作成する例です。
<!-- Bootstrapのボタン -->
<button type="button" class="btn btn-primary">クリックしてね</button>

 3.ライブラリのメリットライブラリを使うことには、次のような利点があります。
時間の節約
よく使われる機能が事前に用意されているため、ゼロから作成する必要がありません。
コーディングの効率化
複雑な処理をシンプルな関数で実行できるため、コードがすっきりし、メンテナンスも簡単です。
コミュニティのサポート
人気のあるライブラリには多くの開発者が集まり、情報やサポートが得やすくなります。
ライブラリは、Web開発やプログラミングにおいて非常に重要なツールです。Swiper.js や Bootstrap のようなライブラリを活用することで、より効率的に素晴らしいプロジェクトを作る手助けになります！

 4.実践！ライブラリを使ってWebサイトを作ってみよう！「なんか難しそう！」と思った方も「できそう！」と思った方もまずはAIに生成してもらいましょう！
ChatGPTに以下のプロンプトを入力してみます
swiper.jsを使ってかわいいWebサイトを作ってください

画像はこちらで３つ用意します
今回はコードの生成と共に画像の配置についての説明も生成されました。
参考：実際に生成されたスクリプト
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>かわいいスライダー</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        text-align: center;
      }
      h1 {
        color: #ff69b4;
      }
      .swiper {
        width: 100%;
        height: 400px;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
      .swiper-slide img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h1>かわいいスライダー</h1>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg" alt="画像1" /></div>
        <div class="swiper-slide"><img src="image2.jpg" alt="画像2" /></div>
        <div class="swiper-slide"><img src="image3.jpg" alt="画像3" /></div>
      </div>
      <!-- ページネーション -->
      <div class="swiper-pagination"></div>
      <!-- ナビゲーションボタン -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      const swiper = new Swiper(".swiper", {
        // スライダーのオプション
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
同じように説明文まで生成されなかった場合は添付の説明文を参考に画像を設定してみましょう。
画像を設定する前は以下のような表示になっています

フリーの背景画像を追加してみます。

インターネットからダウンロードした場合、基本的にはWindowsもMacもデフォルトでダウンロードというフォルダに入っているはずです。

画像のタイトルをimage1.jpg image2.jpg image3.jpgのように変更します。

今回は拡張子(.jpg .pngのような形の末尾)がpngだったので元のコードも.pngに修正します
こちらを
<h1>かわいいスライダー</h1>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg"👈ここだよ alt="画像1" /></div>
        <div class="swiper-slide"><img src="image2.jpg" alt="画像2" /></div>
        <div class="swiper-slide"><img src="image3.jpg" alt="画像3" /></div>
      </div>
こう
<h1>かわいいスライダー</h1>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.png"👈ここだよ alt="画像1" /></div>
        <div class="swiper-slide"><img src="image2.png" alt="画像2" /></div>
        <div class="swiper-slide"><img src="image3.png" alt="画像3" /></div>
      </div>
そうしたら名前を修正した画像をindex.htmlと同じところに保存しましょう！

場合によってはimgというフォルダを作って格納するように指示があるかもしれません。
かわいい背景ができました！

swiperのライブラリがあるので自動で画像がスライドされます！

（されない場合はどこを修正したらいいかAIに聞いてみましょう！）

さらにbootstrapというライブラリを使ってデザインをかわいくしてみましょう！
ChatGPTに以下のプロンプトを入力してみます
bootstrapを使ってよりかわいいウェブサイトにしてください

起動するとこんな感じ！

角が丸くなったりポップなボタンが使いされましたね！
他にも色々なライブラリがあるのでWeb開発 ライブラリなどで検索してみてくださいね！

次はAPIというものを使ったWeb制作に取り組んでみましょう！

 APIを使ってみよう！ウェブ開発を学び始めると、必ず耳にする「API」という言葉。最初は少し難しく感じるかもしれませんが、APIは実は私たちの生活に密接に関わっているものです。この記事では、APIの基本的な概念や、その役割についてわかりやすく説明します。

 1.APIとは？**API（Application Programming Interface）**は、アプリケーション同士が互いにコミュニケーションを取るためのルールや方法を定義したものです。簡単に言えば、異なるソフトウェアがデータや機能をやり取りするための「橋」のような役割を果たします。

 例え話で理解するAPIAPIを「レストランのメニュー」に例えてみましょう。
メニュー: メニューには、レストランで注文できる料理がリストアップされています。これがAPIの仕様書にあたります。どのデータや機能が利用できるかが示されています。
ウェイター: ウェイターは、お客さんが料理を注文するための仲介者です。お客さんはウェイターに「スパゲッティをお願いします」と注文し、ウェイターがキッチンに伝えます。これがAPIの役割で、アプリケーションが他のアプリケーションにデータや機能をリクエストする過程です。
料理: キッチンがスパゲッティを作り、ウェイターがそれをお客さんに届けます。これが、APIを通じて返されるデータや結果です。

 2.APIの種類APIには主に以下の2種類があります。

 Web API
概要: インターネットを介してアクセスできるAPIです。さまざまなウェブサービスが提供しており、データの取得や操作が可能です。

例: Twitter APIを使って、ツイートを取得したり、新しいツイートを投稿したりできます。

 REST API
概要: Web APIの一種で、HTTPプロトコルを使ってデータの取得や操作を行います。リソース（データ）に対して、特定の操作（GET, POST, PUT, DELETEなど）を行うことが特徴です。

例: あるサイトのデータベースからユーザー情報を取得するためのエンドポイント（URL）が用意されており、GETリクエストを送信することでそのデータを受け取ることができます。

 3.APIの利用例APIはさまざまな場面で利用されています。以下にいくつかの例を挙げてみましょう。

天気情報: 天気予報のAPIを利用して、特定の地域の天気情報をウェブサイトに表示することができます。

ソーシャルメディア: FacebookやTwitterのAPIを使って、アプリから直接投稿したり、フィードを表示したりできます。

決済処理: PayPalやStripeのAPIを利用することで、オンラインストアでの決済機能を簡単に実装できます。
APIは、異なるアプリケーションやサービスがデータや機能をやり取りするための重要な要素です。ウェブ開発を学ぶ中で、APIを理解し、使いこなすことは非常に価値があります。APIにアクセスしてデータを取得する方法を学んで、プロジェクトに新しい機能を追加してみましょう！

 4.実践！APIを使ってWebサイトを作ってみよう！それでは早速TheCatAPIというAPIを使ってかわいいWebアプリを作ってみましょう！
ChatGPTに以下のプロンプトを入力してみます
TheCatAPIでかわいいWebアプリを作って
画像ファイルを配置しなくても猫ちゃんの画像がランダムで表示されるようになりましたね！
IT Boot Camp 1日目！

環境構築（コードを書く準備！）

1. VSCodeのインストール

Windows

Mac

2. 初期設定

日本語化

Live Serverのインストール

3. プロジェクトの作成と基本操作

新しいプロジェクトの作成

index.htmlファイルの作成

ChatGPTセットアップガイド

1. ChatGPTとは？

2. ChatGPTを利用するための準備

OpenAIアカウントの作成

ChatGPTの使い方

ChatGPTの活用例

3. 注意点

【HTML編】実践！AIでプログラムを書いてみよう

ChatGPTに電卓を作ってもらおう！

【CSS編】実践！AIでプログラムを書いてみよう

CSS（Cascading Style Sheets）とは

CSSでできること

ChatGPTに電卓を作ってもらおう！

【JavaScript編】実践！AIでプログラムを書いてみよう！

JavaScript（JS）とは

JavaScriptの役割

JavaScriptでできること

ChatGPTに電卓を作ってもらおう！

【応用編】実践！AIでプログラムを書いてみよう！

1.電卓アプリのカスタム

2.電卓以外のWebアプリの作成

3.自身で学習するために

IT Boot Camp 2日目！

ライブラリを使って動的なWebサイトを作ってみよう！

ライブラリとは？

1.ライブラリの基本的な定義

2.具体的な例

Swiper.js

Bootstrap

3.ライブラリのメリット

4.実践！ライブラリを使ってWebサイトを作ってみよう！

APIを使ってみよう！

1.APIとは？

例え話で理解するAPI

2.APIの種類

Web API

REST API

3.APIの利用例

4.実践！APIを使ってWebサイトを作ってみよう！

Discussion

IT Boot Camp　1日目！

IT Boot Camp　2日目！
