【厚木市×株式会社Voleur】プログラミングスクール上級編 第3回「タブ切り替え」を開催｜JavaScriptで学ぶ実践的なWeb制作
平素は格別のご高配を賜り、厚く御礼申し上げます。
秋も深まり、朝夕の冷え込みに季節の移ろいを感じる頃となりましたが、皆様いかがお過ごしでしょうか。
株式会社Voleurでは、神奈川県厚木市生涯学習課との共同事業として、年間を通じたプログラミングスクールを実施しております。2026年10月28日（水）には、上級編第3回となる「タブ切り替え」をテーマにした授業を開催いたしました。
上級編では、中級編で学んだHTML・CSSの知識を土台に、新たにJavaScriptを活用したWebサイト制作に取り組んでいます。第1回の「クリックで表示」、第2回の「アコーディオン」に続き、今回はクリックした項目に応じて表示内容が切り替わる「タブ切り替え」の仕組みを学びました。Webサイトに動きを加えるだけではなく、利用者にとって分かりやすく、操作しやすいページを制作するための考え方にも触れる授業となりました。
JavaScriptで学ぶ「タブ切り替え」とは？
タブ切り替えとは、Webサイト上に複数の項目を設置し、クリックした項目に応じて表示するコンテンツを切り替える機能です。例えば、企業のホームページでは、サービス紹介や料金プラン、商品情報などを整理して表示する際に活用されています。
すべての情報を一度に表示するのではなく、利用者が必要な項目を選択できるようにすることで、情報を見つけやすくする効果が期待できます。今回の授業では、JavaScriptを活用してクリックされたタブを判別し、対応するコンテンツを表示する仕組みについて学習しました。
タブ切り替え機能を制作する際には、主に次の3つの技術を組み合わせます。
HTML： タブや表示するコンテンツの構造を作成する
CSS： タブのデザインや選択状態、表示・非表示を調整する
JavaScript： クリック操作を検知し、表示するコンテンツを切り替える
これまで学習してきたHTML・CSSとJavaScriptが組み合わさることで、実際のWebサイトで使用される機能を制作できるようになります。株式会社Voleurでは、単にコードを書いて完成させることだけではなく、「なぜその仕組みが必要なのか」「どのようにすれば利用者にとって使いやすいのか」を考えることも大切にしています。
上級編も折り返し｜Webサイトに動きを加える楽しさ
2026年度のプログラミングスクール上級編も、今回で全6回のうち3回目を迎えました。上級編から新たに登場したJavaScriptによって、これまで制作してきたWebサイトにさまざまな動きを加えられるようになり、学習内容もより実践的になっています。
第1回ではクリックによる表示の切り替え、第2回ではアコーディオンによるコンテンツの開閉、そして今回の第3回ではタブ切り替えと、段階的に学習を進めています。こうした機能は、実際の企業サイトやサービスサイトでも広く活用されているものです。
Web制作の仕組みを理解することは、将来エンジニアやWebデザイナーを目指す方だけではなく、インターネット上のサービスやデジタル技術への理解を深めることにもつながります。株式会社Voleurでは、受講者の皆様が技術を身近に感じながら、プログラミングの楽しさを発見できる授業づくりを目指しています。
全6回・合計6時間だからこそ、教材づくりにもこだわる
本プログラミングスクールの上級編は、1回60分、全6回のカリキュラムで構成されています。合計6時間という限られた時間の中で、受講者の皆様にできる限り深く学び、何より楽しんでいただけるよう、毎回の授業内容を工夫しています。
特に重視しているのが、授業で学ぶ内容の整理と、授業後にも活用できるオリジナル教材の制作です。限られた時間内で重要なポイントを分かりやすくお伝えする一方、教材には復習に必要な内容も盛り込み、授業後に見返しながら理解を深められる構成を心がけています。
プログラミングは、一度の授業ですべてを覚えることが目的ではありません。
分からないことがあれば調べ、試行錯誤を繰り返しながら、自分自身で解決する力を身につけることが重要だと考えています。初級編・中級編から継続して参加されている方はもちろん、上級編から新たに参加された皆様にも、生涯にわたって学び続けるきっかけを提供できるよう取り組んでまいります。
講師紹介｜Web事業部責任者 中村仁人（なかむら ひろと）
本プログラミングスクールの中級編・上級編では、株式会社Voleur Web事業部責任者の中村仁人（なかむら ひろと）が講師を務めています。中村は、株式会社VoleurのWeb事業「WASABI」において、Web制作・SEO対策・Webデザイン・プログラミングなど、各専門チームを統括しています。
Webサイトの企画・制作から検索エンジン対策、デザイン設計まで幅広い業務に携わり、近年では行政からの依頼や大手企業の制作案件、著名YouTuberの動画編集案件など、多岐にわたるプロジェクトを担当しています。
こうした実務経験を活かし、プログラミングスクールでは、コードの書き方だけではなく、実際のWeb制作現場で技術がどのように活用されているのかという視点を大切にしています。株式会社VoleurのWeb事業「WASABI」が掲げる理念は、「ただのWeb制作ではなく、そのサイトに人が集まる理由を設計する」ことです。
Webサイトを制作する際には、デザインや機能性だけではなく、利用者にとって分かりやすく、必要な情報が自然に伝わる設計が求められます。今回の「タブ切り替え」も、そうしたWeb制作の考え方につながる技術の一つです。
今後も実際の制作現場で培ってきた知識と経験を地域の皆様へ還元し、実践的なプログラミング教育を提供してまいります。
厚木市との連携によるICT教育への取り組み
株式会社Voleurでは、厚木市生涯学習課との共同事業によるプログラミングスクールに加え、行政や教育委員会と連携したICT教育にも継続して取り組んでいます。代表取締役の福住 隆哉（旧氏名：中村 隆哉）は、約3年前から行政・教育委員会のご依頼のもと、厚木市内の小学校において全校児童を対象としたプログラミング授業を担当しています。
また、学校の長期休業期間には、教職員を対象としたCanvaや動画編集などのICT研修も実施しており、児童だけではなく、教育現場を支える先生方への技術支援にも取り組んでいます。こうした教育活動に対し、厚木市内の小学校より感謝状をいただき、その取り組みについて地域情報紙「タウンニュース」でも紹介されました。※令和8年6月10日付で姓を変更いたしました。
▼タウンニュース掲載記事厚木市内の小学校における教育活動について
株式会社Voleurでは、初級編を代表取締役の福住隆哉、中級編・上級編をWeb事業部責任者の中村仁人が担当し、それぞれの専門性を活かしたプログラミング教育を実施しています。
上級編はさらに実践的なWebサイト制作へ
上級編では、JavaScriptを活用したさまざまな機能の制作を通じて、より実践的なWebサイト制作に取り組んでいきます。今後の授業では、モーダル表示やスクロールに連動した動きなど、実際のWebサイトでも活用されている機能について学習する予定です。
【上級編 今後のカリキュラム】
開催日 | テーマ |
11月11日（水） | 第4回：モーダル（画像拡大・詳細表示） |
11月25日（水） | 第5回：スクロール連動 |
12月9日（水） | 第6回：統合・最終仕上げ |
上級編は、中学生・高校生・大学生を対象に、18時30分から19時30分までの60分間で実施しています。最終回では、これまで学んだ内容を組み合わせながら、Webサイト制作に必要な知識や技術を振り返ります。
SDGs目標4「質の高い教育をみんなに」の実現に向けて
株式会社Voleurでは、人材紹介・採用支援事業を通じて一人ひとりのキャリア形成を支援するとともに、Web制作事業で培った専門知識を活かした教育活動にも取り組んでいます。
私たちが大切にしているのは、年齢や経験にかかわらず、誰もが新しいことに挑戦できる機会をつくることです。AIやデジタル技術が急速に発展する現代において、プログラミングを学ぶことは、単にコードを書く技術を身につけるだけではありません。
自ら考え、試行錯誤しながら課題を解決する経験は、さまざまな分野で活かせる力につながると考えています。今回のプログラミングスクールを通じて、受講者の皆様が新たな知識や技術に触れ、生涯にわたって学び続けるきっかけとなることを願っています。
今後も厚木市生涯学習課との連携を大切にしながら、SDGs目標4「質の高い教育をみんなに」の実現に向け、地域社会に根差した教育活動を継続してまいります。株式会社Voleurは、これからも人材紹介・採用支援・Web制作・ICT教育を通じて、一人ひとりの可能性を広げ、社会に新たな価値を届けてまいります。
