2025年7月23日（水）に「Web(Vue.js)環境構築×ハンズオン勉強会＆エンジニア交流会」をオンラインで開催しました。

■勉強会の概要
Vue.jsでのWebアプリ開発に欠かせない“開発環境の整え方”に焦点をあて、今回はコード整形・静的解析を行うツール「ESLint」と「Prettier」の導入・設定を中心に学びました。

前半は講師の解説に沿ってハンズオン形式で環境構築を実施。後半は参加者同士のフォローや交流も交えながら、実務でも役立つ設定の活用法を確認しました。
VSCodeやCursorを使ったリアルタイムの整形チェックも体験できる会となりました。

▼ こんな方が参加しました
・エンジニアと交流しながらスキルアップを進めたい方
・ESLint／Prettierなど静的解析・自動整形の導入を学びたい方
・Webやフロントエンド技術に興味がある方
・Vue.jsの開発環境をスムーズに整えたい方
・バックエンドやインフラの経験があり、フロント開発も学び幅を広げたい方
・未経験からエンジニア志望のため勉強中の方

■勉強会の流れ
1. Vue.js開発におけるLint＆Formatterの役割を学ぶ
「ESLint」と「Prettier」の概要を簡単に整理。
・ESLint：文法エラーやルール違反を自動検出するLinter
・Prettier：インデントやスペース・改行などを自動整形するツール
それぞれの目的や導入の意義を、初心者にも分かりやすく解説しました。

2. ハンズオン：実際に導入・設定してみよう
VSCodeやCursorにプラグインを導入し、設定ファイル（settings.json／.eslintrc）を作成。
途中でファイルの場所や表示が分かりにくくなる場面もありましたが、参加者同士で教え合いながら進行しました。

3. 実行確認とトラブル対応
整形と警告が正しく反映されているかを、HelloWorld.vueファイルにconsole.log()などを記述して確認。
波線や警告が出るかどうか、保存時に自動で整形されるかをそれぞれ検証しました。

Cursorの動作が重かったり、VSCodeでの挙動が異なったりといった場面もありましたが、それぞれの環境に応じて対処方法を共有しながら進めました。

4. フリートーク・交流タイム
参加者からは「個人開発でも使いたい」「会社ではまだ導入されていないので参考になる」といった声があり、実務経験者からは「どの現場でもほぼLintは導入されている」といった現場感がある感想もありました。

■次回開催について
今回整えたVue.js環境を活かして「Vue.jsでのアプリ実装」にチャレンジ予定です！
簡単な機能を作って、実際にLintやPrettierの効果を体感できる回にしていく予定です。

■ 勉強会のアーカイブ動画・資料はこちら！
オープンチャット「ガジュマル勉強会」にて随時公開中
ガジュマル勉強会

ガジュマルは、エンジニアの“やってみたい”を応援しています
勉強会を通じて、技術の理解だけでなく「アイデアを形にする力」や「共に学ぶ場づくり」を大切にしています。
興味のある方は、ぜひ各SNSよりお気軽にご連絡ください！
X │ Instagram │ Facebook │ LINEオープンチャット