Recruit Site

2025年3月5日（水）、オンラインにて「Webマークアップ×AI活用！JavaScript自動生成勉強会」を開催しました。
ガジュマルでは、時代に沿ったWeb技術やAI活用スキル習得のサポートなど、エンジニアが継続的に成長できる環境づくりを大切にしています。
本勉強会では、AIを活用したフロントエンド開発にフォーカスし、実際に手を動かしてコードを生成するワークショップ形式で実施しました。

【こんな方々が参加しました！】
・AIを活用したフロント開発に興味がある方
・JavaScriptの学習を始めたばかりの方
・業務でAIを取り入れたいと考えている方
・Cursorを使ったことはあるが、もっと深く活用したい方

■第4回のテーマ：「AIでソースコードを自動出力してみよう」

AIエディタ「Cursor」を使用し、プロンプトの入力だけで簡単なWebアプリを自動生成する実践を行いました。

◆勉強会の流れ

① これまでの振り返りと目的の確認
　本勉強会はAIを活用したコーディング体験を通じて、フロントエンド技術やAPI理解を深めることを目的としています。

② Cursorを用いたコード生成デモ
　参加者各自がCursorを立ち上げ、プロンプトを入力し、「ボタンクリックでカウントが増えるアプリ」を自動生成しました。
　- 使用言語：HTML / CSS / JavaScript
　- 生成ファイル：index.html, style.css, main.js, README.md など

③ 生成されたコードの動作確認・デバッグ
　ブラウザで表示し、見た目や動作をチェック。DevToolsのコンソールでエラーがないかも確認しました。
・応用編：電卓アプリやアニメーションの追加に挑戦
　プロンプトの工夫で、より複雑なアプリケーションの生成にも挑戦。AIが生成したコードに対して、見た目の調整やバグ修正も行いました。

④ AIの限界と活用ポイントの議論
　完璧なコードが出力されるわけではないものの、作業時間の短縮や構造理解の支援、既存コードへのコメント追加や解説などにも活用できることを確認しました。

■次回予告

次回は 「JavaScriptの基礎」を講義形式で学ぶ内容を予定しています。
その後は、Webアプリ開発を最終的なゴールとして、生成AIとAPI連携の実践にもチャレンジしていく予定です。

■参加者の声（一部）

「プロンプトだけでアプリができて、AIの進化に驚いた」
「生成されたコードにバグはあるけれど、それを確認する手順まで学べたのが良かった」
「既存コードにコメントを追加できるのが便利。業務にも活用できそう」

■アーカイブ動画＆スキルアップに興味がある方へ

今回の勉強会のアーカイブ動画はオープンチャットで公開中です。
「AIを活用したフロント開発を学びたい」「実践的なスキルを身につけたい」という方は、ぜひご覧ください！

ガジュマルは、こうした技術勉強会を通じてエンジニアのスキルアップを積極的に支援しています。
一緒に学び、成長できる仲間も募集中です！
お気軽にお問合せください。

X（Twitter） │ Instagram │ Facebook │ LINEオープンチャット