2025年03月21日(金曜日)
2025年3月21日(金)、オンラインにて「JavaScriptの基礎が身につく!AI×Webマークアップ勉強会」を開催しました。
ガジュマルでは、Webエンジニアの実践力向上やコミュニケーションの場を提供することを目的として、勉強会を定期的に開催しています。
本勉強会では、AIで生成したToDoリストアプリを題材に、JavaScriptの基本構文とその活用方法を学びました。
初心者から現役エンジニアまで、幅広い層が参加し、基礎の振り返りとコードの読解を深める、有意義な会となりました。
【こんな方々が参加しました!】
・Web制作に携わっており、より実践的な技術を身につけたい方
・AIで生成されたコードの中身をしっかり理解したい方
・Web開発の初学者で、アプリの構造に興味がある方
・現役Webエンジニアと交流し、技術的に切磋琢磨したい方 など
今回は、AIで自動生成したToDoリストアプリのコードをもとに、フロント開発に欠かせないJavaScriptの基礎知識を講義形式+ソース解説形式で学習しました。
① Cursorでのコード生成デモ
AIエディタ「Cursor」を活用し、ToDoリストアプリをプロンプトから自動生成。参加者は手元で動作確認を行いながら、構造や処理の流れを確認しました。
② JavaScriptの基本文法を解説
・変数宣言(const / let / varの違い)
・データ型(文字列・数値・真偽値・配列・オブジェクトなど)
・条件分岐・ループ処理・関数の基礎
・イベントリスナーの使い方(クリックやフォーカスなど)
・ローカルストレージを使ったデータの永続化
③ ソースコードの読み解きと動作確認
Cursorで生成されたソースを読みながら、変数や関数の使い方、イベント処理の流れなどを実例で確認しました。
④ AIによるコード生成の“揺らぎ”と注意点
同じプロンプトでも異なるコードが生成されることがあるため、プロンプトの書き方(設計力)の重要性についても共有しました。
次回は、Vue.jsの基礎編を予定しています。
その後は、Webアプリ開発を最終的なゴールとし、API連携の実装や、各自のアイデアを形にする“実践制作フェーズ”へと進める予定です。
「以前学んだJavaScriptの基礎部分の振り返りができてよかった」
「AIが生成したコードが思っていたよりも洗練されていて驚いた」
「構文だけでなく、実装における考え方や注意点も学べたので、今後の業務などで活かしたい」
今回の勉強会のアーカイブ動画や配布資料は、オープンチャットで公開中です。
「フロントエンドの知識を身につけたい」「AIを活用したWebマークアップスキルを向上させたい」という方は、ぜひご覧ください!
ガジュマル勉強会
今後のIT勉強会や交流イベントのアナウンスも行いますので、興味のある方はぜひ気軽にご参加ください!
ガジュマルは、こうした技術勉強会を通じてエンジニアのスキルアップを積極的に支援しています。
一緒に学び、成長できる仲間も募集中です!
各SNSからもお気軽にお問い合わせください。
X(Twitter) │ Instagram │ Facebook │ LINEオープンチャット
ガジュマルでは、Webエンジニアの実践力向上やコミュニケーションの場を提供することを目的として、勉強会を定期的に開催しています。
本勉強会では、AIで生成したToDoリストアプリを題材に、JavaScriptの基本構文とその活用方法を学びました。
初心者から現役エンジニアまで、幅広い層が参加し、基礎の振り返りとコードの読解を深める、有意義な会となりました。
【こんな方々が参加しました!】
・Web制作に携わっており、より実践的な技術を身につけたい方
・AIで生成されたコードの中身をしっかり理解したい方
・Web開発の初学者で、アプリの構造に興味がある方
・現役Webエンジニアと交流し、技術的に切磋琢磨したい方 など
■第5回のテーマ:「JavaScriptの基礎知識を身につけよう」
今回は、AIで自動生成したToDoリストアプリのコードをもとに、フロント開発に欠かせないJavaScriptの基礎知識を講義形式+ソース解説形式で学習しました。
◆勉強会の流れ
① Cursorでのコード生成デモ
AIエディタ「Cursor」を活用し、ToDoリストアプリをプロンプトから自動生成。参加者は手元で動作確認を行いながら、構造や処理の流れを確認しました。
② JavaScriptの基本文法を解説
・変数宣言(const / let / varの違い)
・データ型(文字列・数値・真偽値・配列・オブジェクトなど)
・条件分岐・ループ処理・関数の基礎
・イベントリスナーの使い方(クリックやフォーカスなど)
・ローカルストレージを使ったデータの永続化
③ ソースコードの読み解きと動作確認
Cursorで生成されたソースを読みながら、変数や関数の使い方、イベント処理の流れなどを実例で確認しました。
④ AIによるコード生成の“揺らぎ”と注意点
同じプロンプトでも異なるコードが生成されることがあるため、プロンプトの書き方(設計力)の重要性についても共有しました。
■次回予告
次回は、Vue.jsの基礎編を予定しています。
その後は、Webアプリ開発を最終的なゴールとし、API連携の実装や、各自のアイデアを形にする“実践制作フェーズ”へと進める予定です。
■参加者の声(一部)
「以前学んだJavaScriptの基礎部分の振り返りができてよかった」
「AIが生成したコードが思っていたよりも洗練されていて驚いた」
「構文だけでなく、実装における考え方や注意点も学べたので、今後の業務などで活かしたい」
■アーカイブ動画&スキルアップに興味がある方へ
今回の勉強会のアーカイブ動画や配布資料は、オープンチャットで公開中です。
「フロントエンドの知識を身につけたい」「AIを活用したWebマークアップスキルを向上させたい」という方は、ぜひご覧ください!
ガジュマル勉強会
今後のIT勉強会や交流イベントのアナウンスも行いますので、興味のある方はぜひ気軽にご参加ください!
ガジュマルは、こうした技術勉強会を通じてエンジニアのスキルアップを積極的に支援しています。
一緒に学び、成長できる仲間も募集中です!
各SNSからもお気軽にお問い合わせください。
X(Twitter) │ Instagram │ Facebook │ LINEオープンチャット