1.AIを活用して気軽に始めよう

最近話題のAIツール「Gemini」を使って、「ボタンをクリックして新しい要素を追加するUIを作成」と指示してみました。Geminiを選んだ理由は、

• 最新の性能向上が評判になっていたこと。
• 「Canvas」機能を使えば、ローカルに開発環境がなくてもブラウザ上でソースコードの実行が可能だから。
• Googleの提供するツールで、無料で初心者でも安心して利用できる。

他にも同様の機能を持つAIがありますが、初心者には安心感が重要だと感じています。

Geminiにアクセスして2.0 Flashを選択して（2.0 Flash Thinkingの方が複雑なコードを書くのには適しているがCanvas機能がつかえない）「Canvas」クリックしてCanvas機能を有効にして実行してください。

要素を追加のボタンをクリックすると実際に動作します。

2.出力されたコードを読むポイント

Geminiで生成されたコードを例に挙げると、重要なポイントは次の3つです。

HTML（表示領域の構造）

• HTMLはWebページの構造を定義します。
• 表示されているテキストやボタン、要素を追加する領域がどのように定義されているかを確認しましょう。

<div class="container">
      <h1 class="title">要素追加デモ</h1>
      <p class="description">下のボタンをクリックして、新しい要素を追加してください。</p>
      <button id="addElementButton">要素を追加</button>
      <div id="elementsContainer">
          <p>ここに追加された要素が表示されます。</p>
      </div>
</div>

表示領域のHTMLはこんな感じ。

CSS（見た目の調整）

• CSSはデザインを担当しています。
• 各要素の色、サイズ、配置などを調整している箇所を見つけ、自分でも数字を変えて表示がどのように変化するか試してみましょう。

.title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3b82f6; 
    margin-bottom: 1rem; 
}

「要素追加デモ」と表示されているタイトル部分のCSSはこんな感じ、他の要素もどのスタイルがどの要素に対して設定されているのか自分でAIに作成してもらったソースコードで確認してみましょう！

JavaScript（動作の定義）

• JavaScriptは実際の動きを付け加えます。
• ボタンをクリックした時に新しい要素が追加される流れを1行ずつ追いかけてみてください。自分で書き換えて動きを確認すると理解が深まります。

const addElementButton = document.getElementById('addElementButton');
const elementsContainer = document.getElementById('elementsContainer');

Javascriptのボタン要素と要素を追加するエリアを定義している箇所
ボタンをクリックして動作を加えている部分など、自分でAIに作成してもらったソースコードで確認してみましょう！

3.実践のコツ

• 各コードの意味を1行ずつ紙やメモに書き出して整理する。
• 気になったコードを少し変更してみて、結果を確認する。
• 同じようなコードを見つけて比較し、自分の理解度をチェックする。

コードを読むだけでなく、自分の手を動かすことで圧倒的に学習効率が上がります。

まとめ

初心者でも効果的にプログラミングを学ぶには、「読む」「書く」「試す」のサイクルを作ることが大切です。AIツールを上手く使えば、初心者でも簡単にこの学習サイクルに入ることができます。

ぜひ、GeminiなどのAIを使ってプログラミング学習を楽しんでくださいね！

5.最速でスキルを身につけたいなら「デジタルスキルアップサポート」

もっとスピードを上げたい、独学だけじゃ物足りない！という方はITスキルコーチングサービス「デジタルスキルアップサポート」がおすすめです。

プロのコーチがサポート
必要な学習を段階的に、一人ひとりに合ったカリキュラムで進めます。自分の力で問題を解決するための「考え方」も身につくので、将来どんな現場でも活躍できるように。

実践的な業務スキルもゲット
プログラミングだけでなく、実際の仕事の進め方や効率化のノウハウも同時に学べるから、副業や転職でいきなり活かせます。

完全オンライン対応
場所を選ばず学習できるので、忙しい社会人でもしっかり取り組めるのが魅力。