「デザインカンプからのライブコーディング〜後編〜」イベントレポート
こんにちは！ Beans College 運営のあいはら @noir44_aihara です。
Beans College（通称：豆カレ）では、コミュニティ内で「月イチ勉強会」というイベントを開催しています。
今回は、7/27 (土) にコミュニティ内で開催した「デザインカンプからのライブコーディング〜後編〜」のイベントレポートをお届けします！
5月のライブコーディングイベントの後編
豆カレで5月に開催したライブコーディングイベント「デザインカンプからのライブコーディング」の続きとなる「後編」を開催しました！
前回イベントのレポート
ライブコーディングとは、イベントや授業などで講師がリアルタイムでコーディングをしたものを画面共有を通して観客に見せる、という内容です。
5月のイベントに引き続き、7月の今回もBeans Collegeの公式ページ（ランディングページ：LP）の、5月で作業した部分の続きとなる箇所をリアルタイムでコーディングしました。
前回終了時のデザイン
前回のコーディング結果として、次の状態となっています。
ヘッダーとフッターを作成中で、ヘッダーは完成していますが、フッターのスタイルがこれからという状況でした。
フッターの作成などをライブコーディングで進めました。
ところで、イベントでは本来解説が必要な知識・技術が出てきたとしても、深くは踏み込まずにコーディングを見せる面を中心に進めました。
Beans Collegeでは、今回のイベントで触れたけど詳しくは扱わなかった技術・知識を扱っている動画や、過去に実施したイベントアーカイブを色々と揃えています。
今回のレポートでは、豆カレで扱っている動画・アーカイブの紹介と、それらの技術用語を紹介します！
今回のイベント内で利用している技術・知識
Visual Studio Code
Visual Studio Code（通称VS Code）は、2024年現在ではもっともシェアの高いエディタで、コーディングするために適した多くの機能が搭載されています。
本イベントでもVS Codeを利用してコーディングしています。
Beans Collegeでは「実践的コーディング課題＆講座」内の学習動画として「Visual Studio Codeの使い方と設定」を用意しています。
Git
バージョン管理システムの１つで、バージョン管理システムとは、コーディングデータのような開発データを管理、統合、保存することができるシステムです。複数人で作業するうえでは欠かせない技術で、Web業界ではこのGitが広く普及しています。
本イベントでは直接はGitを使っていないのですが、今回のライブコーディングのお題となった「Beans Collegeの公式ページ」
Beans Collegeでは「Git講座」として、複数の学習動画と課題を用意しています。Gitでは複数人で扱うため、一人ではやや学習が難しい場合もありますが、Beans Collegeのメンバーであれば専用のリポジトリを使って実際に試すことができます。
開発環境の導入
HTML, CSS, JSを使ったコーディングをする場合、開発環境を準備せずとも開発ができるのですが、これはむしろ例外で、他のプログラミング言語では開発環境の用意が必須です。ただし、HTML, CSS, JSでも複雑なWebページやWebサービスを開発・構築する際には開発環境が必要な状況があります。特に、フロントエンドでは「npm」という仕組みを利用した開発環境の導入が主流です。
本イベントでも、npmの開発環境が必須のPug, SCSSに加えて、JSとCSSのコードを圧縮する仕組みを導入しています。
開発環境の導入方法については、Beans Collegeの24年2月のイベントで実施した「はじめてのフロントエンド開発環境導入」でnpmの開発環境を作る方法を紹介していて、アーカイブ視聴ができます。
アーカイブ配信
今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。
他にも過去のイベントが数多くありますので、それらはご入会後にご視聴いただけます。
2024年8月の予定
おの @ono_picnico による「シンプルなアイコンを、描いて動かそう！」という内容を予定しています！
Illustratorでアイコンを作成し、動画編集アプリケーションのAfterEffectsを用いて動かしてみようという内容です。
豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください！
Beans Collegeの説明会に参加する
Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月４回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！
▼説明会のお申し込みはこちら
https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！