「はじめてのフロントエンド開発環境導入」イベントレポート

こんにちは！　Beans College 運営の相原 @noir44_aihara です。

Beans College（通称：豆カレ）では、コミュニティ内で「月イチ勉強会」というイベントを開催しています。
今回は、2/21 (水) にコミュニティ内で開催した「はじめてのフロントエンド開発環境導入」のイベントレポートをお届けします！

「開発環境」って何？

開発環境とは、アプリケーションを作るときと、作ったものを動かすときに必要な、土台となる作業環境のことです。

一方で、HTML, CSS, JavaScriptで構築されたWebサイトの場合、ブラウザとエディタさえあれば特別なツールなどがなくても開発できるし、動くんですよね。
他のプログラミング言語では、まずは「開発環境構築」から学習をはじめたりするものなので、フロントエンドがむしろ特殊と言ってよいでしょう。

そんなフロントエンドですが、フロントエンドにも開発環境はあります！
あるのですが、初心者にとってはこのフロントエンド開発環境構築、どうしても後回しになってしまうものです。試したけど以前うまくいかなかった、なんていう苦手意識がある方も多くいらっしゃるでしょう。

そこで、Beans Collegeでは月イチ勉強会でこの「開発環境構築」をテーマとして取り上げました。

CLI（コマンドラインインターフェイス）

CLIとは、コマンド操作でコンピュータを動かす仕組みのことで、環境構築ではこの方法でアプリケーションをインストールしたり、起動したりします。

WindowsやMacが世に出る前のコンピュータでは一般的な方法だったのですが、今ではあまり使われないものとなっている一方で、開発環境ではほぼ必須の技術なので、初心者泣かせと言えるかもしれません。
でも、一見難しいしとっつきにくいのですが、フォルダ（ディレクトリ）アイコンの上でマウスをダブルクリックすることがCLIでは「cd」となる、というふうに、普段のパソコン操作と紐づけて考えることで、実は基本的なことをやっているだけなんですね。

イベントでは、そんなCLIの基本的な使い方などを解説しつつ、実際にやってみました。今回は、WindowsとMacの両方で使えるVisual Studio CodeのターミナルでCLIを試してもらいました。

node.jsをインストールしたり、講師が用意した開発環境を再現したり

フロントエンドの開発環境構築ではじめにやることと言えば、この「node.jsをインストール」です。CLIを使ってインストールをしてみました。

node.jsにはバージョンがたくさんあるのですが、「今回の開発環境では、バージョン18でやりましょう」「この案件では最新版で」「バージョン16でないと動きません」なんてことが発生するんですね。
これを解決するため、node.jsのバージョンを切り替えられる仕組みとして「nvm」を導入しました。

node.jsだけでなく「npm」も必須ですが、npmはnode.jsと同時にインストールされます。

イベントでは、モジュールをインストールしたり、講師の相原が用意した環境を再現してみることも試してもらいました。

スライド資料を共有します！

イベント用に用意したスライドを無料公開します。

Beans Collegeに入会いただくと、本イベントの内容と同等の「講師と一緒に環境構築をやってみる」ことが可能です。
不明な単語なども解説しますので、自分ひとりでやろうとするとつまづいてしまう部分をカバーできます！

アーカイブ配信

今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。
他にも過去のイベントが数多くありますので、それらはご入会後にご視聴いただけます。

2024年3月の予定

キャリアコンサルタントの方をお呼びして、「キャリアデザインセミナー(仮) 〜目標を叶えるためのアクションを考えよう〜」というイベントを開催します。
Web業界での転職に明るいコンサルトさんなので、皆さんのキャリア形成に役立つ内容となっています！

• いままでのキャリアを次のステップに活かせるの？

• 目的を見失わない転職・キャリアアップ

• ワークショップ

• Q&Aコーナー

豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください！

Beans Collegeの説明会に参加する

Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月４回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！

▼説明会のお申し込みはこちら

https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！

Beans College 公式Webサイト

https://beans-college.com/