「デザインカンプからのライブコーディング」イベントレポート
こんにちは！ Beans College 運営のあいはら @noir44_aihara です。
Beans College（通称：豆カレ）では、コミュニティ内で「月イチ勉強会」というイベントを開催しています。
今回は、5/29 (水) にコミュニティ内で開催した「デザインカンプからのライブコーディング」のイベントレポートをお届けします！
「ライブコーディング」とは？
ライブコーディングとは、イベントや授業などで講師がリアルタイムでコーディングをしたものを画面共有を通して観客に見せる、という内容です！
今回は、デザインカンプのデータからのコーディングとして、エディタで実際に操作・入力している様子をお見せします。
今回作成するデザイン
今回は、Beans Collegeの公式ページ（ランディングページ：LP）をもとにコーディングします。
すべての部分を作成するのは時間的に不可能なので、１時間半ほどのイベント内で出来るところまでをコーディングしました。
このLPはもちろん完成・公開済みのページで、実際にあいはらが作成していて、開発データとしてはGitとして残しているものです。
今回のライブコーディングでは実際のページと同じ技術・仕様で作成することとしています。
補足説明：Git
バージョン管理システムの１つで、バージョン管理システムとは、コーディングデータのような開発データを管理、統合、保存することができるシステムです。複数人で作業するうえでは欠かせない技術で、Web業界ではこのGitが広く普及しています。
Beans Collegeでは、「Gitって初めて聞いた」といった方でも、Gitを扱えるようになる教材と課題を揃えています！
開発環境とコーディング準備
エディタはVisual Studio Codeを利用します。
前述のとおり、「実際のページと同じ技術・仕様で作成する」ことにしていますので、実際の開発環境と同じく、HTML部分はPug、CSS部分はSCSS、開発環境はnpmで作成しました。
Beans Collegeに興味がある方にとっては「SCSSは聞いたことあるけど、npmって？ Pugってなに？」となる方も多いでしょう。実際にBeans Collegeのメンバーさんにとっても、少しむずかしいものでした。
しかし、Beans Collegeではそこに関してのフォローも大丈夫です！
Beans Collegeの２月のイベントで実施した「はじめてのフロントエンド開発環境導入」で、npmの開発環境を作る方法を紹介していて、アーカイブ視聴ができます！
補足説明：Visual Studio CodeやSCSS
Visual Studio CodeやSCSSについて、Beans Collegeではどちらも使い方の動画を用意しています。動画内容に関するご質問もいつでも可能です。
コーディング
コーディングを実施していきます。
実際にエディタの画面を表示させつつ、どのような手順と考えでその作業をしているのかをお話しながら進めていきました。
ブロックごとにHTML（Pug）を記述して、そのあと関連するCSS（SCSS）のうちデバイスで共通する記述を書き、一度ブラウザで確認します。
その後、問題なければデバイスごとの表示のためのSCSSを記述していく、という手順で進めました。
アーカイブ配信
今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。
他にも過去のイベントが数多くありますので、それらはご入会後にご視聴いただけます。
2024年6月の予定
おの @ono_picnico による「ワイヤーフレームをつくろう！」という内容を予定しています！
情報設計や具体的なワイヤーへの落とし込み方などを、実際に作りながら紹介します！
豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください！
Beans Collegeの説明会に参加する
Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月４回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！
▼説明会のお申し込みはこちら
https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！