Programming Boot Camp/Learning Phase第1回を2020年10月17日に行いました。
・プログラム名/Program： Programming Boot Camp/Learning Phase #1
・開催日時/Date & Time： Oct. 17th, 2020, 13:00-18:00
・ファシリテーター/Facilitators: 上野潤一郎、金翔海、今橋陵、（株）ギルドワークス
Programming Boot CampのLearning Phase第1回を，10月17日(土)に東工大大岡山キャンパスで実施しました．Programming Boot Campは，参加者がチームを形成し，自分たちが提案する「動くWebサービス」の開発を通して，開発に必要な知識・スキルを身に着けると同時に，新しい価値を生み出すためのリーダシップを実践的に身に着けていくプログラムです．プログラム自体は，webサービスの開発が目的ですが，その開発のために必要なWebプログラミングを行うにあたって必要な知識や技術を，講義と演習のセットで学んでいく期間を設け，希望者のみ参加するのがLearning Phaseで，科目（リーダーシップ・グループワーク実践I/II<F>には含まれません。今回は，そのLearning Phaseの第1回（全4回）です。ギルドワークス(株)のWeb開発のエキスパートの方々につきっきりでサポート・アドバイスをいただきながら，Web開発のエッセンスを実践的に学んでいきます．今回は，Learning Phase参加を希望するToTAL登録生，OPEN生（大学院，学部）含め18名が参加しました。
今回は，久々の，対面によるワークショップで，全員マスク着用，アルコール消毒はもちろん，１時間ごとの換気に加え，教室自体も，定員約70名のところに18名なので，スペースを十分空けてのワークショップとなりました。
第1回は，「Webの基本技術を使えるようになろう」というテーマで，Webサービスの開発において基本かつ必須の技術である，HTML，CSS，JavaScriptという３つの言語の基礎を学んでいきました．単なる講義だけではなく，参加者が自分のPCを用意し，実際にコードを書いて画面を構成していく演習も同時に行っていきます．
- 開発環境のセットアップ
最初に，Webプログラミングを行うために必要な各種ソフトウェアのインストールを行います．今回のLectureでは全くのプログラミング未経験の方も参加しているため，まずは自分のPCでプログラムを書くための開発環境を構築していきます．プログラミング未経験者にとってはこの開発環境の構築が最初の壁なのではないでしょうか．プログラミングやってみたいけどどうすれば始められるのかが分からない…，という人は意外に多いかと思われます．
まず，プログラムのコードを書くためのテキストエディタをインストールします．今回のLectureでは，ポピュラーなテキストエディタであるVisual Studio Codeを用いて開発を行っていきます．次に，バージョン管理ツールであるGitをインストールします．GitはリモートリポジトリであるGithubから，自分のPC内のローカルリポジトリに開発環境をクローン（複製）するために用います．最後に今回のLectureでは使われませんが，JavaScriptによる開発で用いるNode.jsをインストールしました．
MacやWindowsといったOSやそれぞれのPCごとの環境のせいでインストールが難航している人もいましたが，ファシリテーターであるギルドワークスの皆さんによる丁寧な個別サポートもあり，無事全員のPCに開発環境を構築することが出来ました．これで，自分のPCで開発を行うための準備が整いました．
- Webプログラミングの基礎を学ぼう（HTML / CSS / JavaScript）
ここからは，実際にWeb開発を行うためのプログラミング言語を，自分でコードを書きながら学んでいきます．今回は，参加者が1からコードを書いていき，5時間のLectureで以下のようなプロフィール画面を表示できるようにすることを目指しました．
(1) HTML: 画面の文章構造を定義しよう
HTML(Hyper Text Markup Language)は，テキスト文書に対して見出しや段落などの構造をタグと呼ばれる識別のための目印を用いて定義していくためのプログラミング言語です．Webプログラミングを行う上では最も基本的な言語ですので，なじみのある方も多かったようです．
見出し，段落，リスト，表やナビゲーションの追加，画像の追加・描画といったような，よく用いられる主要なタグを一通り押さえました．今回の授業ですべてを覚えることは困難なので，必要な時に使えるようにすることが重要となります．
(2) CSS: 画面の装飾をしよう
CSS(Cascading Style Sheets)は，HTMLで定義した文書の構造に対して，段階的にスタイルを定義していくことで，画面のデザインやレイアウトを行っていくための言語で，HTMLとセットで用いられます．
CSSでは，セレクタと呼ばれるスタイルを適用する対象に対して，プロパティと呼ばれる適用したいスタイルの種類と，プロパティに対応する値をセットで指定します．例えば，ヘッダー部分の文字を青色にしたい場合には，headerというセレクタに対して，プロパティcolorの値をblueに設定する，といったように指定します．様々なプロパティによって文字の装飾やブロックレベル要素（文書の一かたまり）の整形などを行うことができ，これによってデザインやレイアウトの調整を行うことができます．
今回のLectureではさらに，より効率的でスピード感のある開発が行えるようにするために，CSSフレームワークを利用した画面のデザイン・レイアウトについても学びました．CSSフレームワークは，標準的なデザイン一式があらかじめコーディングされており，決められたルールに従ってHTMLを書くことで，自動的にデザインが適用されていきます．
実際の開発現場では，1からCSSを書き起こすのではなく，このようなCSSフレームワークを用いてデザインやレイアウトを画面につけていくことが多いそうです．CSSフレームワークにはいくつか種類がありますが，今回は軽量さとカスタマイズ性で最近人気の高いTailwindというフレームワークの使い方を学びました．
HTMLは理解していてもCSSについてはあまり詳しくないという方や，CSSフレームワークについては知らないという方も多かったようで，特にここで苦戦している方が多くみられました．
(3) JavaScript: 画面に動きをつけよう
JavaScriptは，Webブラウザ上で動作するプログラミング言語で，これを用いることでWebに表示される画面を「動く画面」にすることができます．JavaScriptによって，ユーザーのアクションに応じてコンテンツを表示したり，サーバーと通信して情報を取得したりといった動的なWebページを作成できるようになります．
Programming Boot Campでは，特にJavaScriptを用いて動的なWebサービスを構築することが目標の一つとなっており，魅力的なWebサービスを生み出すための重要な部分となります．
今回は，アラートダイアログを様々なパターンで表示させることを通して，関数や条件分岐，繰り返し処理といったJavaScriptで用いる最も基本的な処理をおさえました．初回なのでさわりだけの説明でしたが，次回からは動くWeb画面を作るためのエッセンスを学んでいきます．
- まとめ
今回のLectureでは，Webページを作成するための最も基本的なプログラミング言語であるHTMLとCSSの基礎について学び，さらに「動く画面」をつくるJavaScriptの初歩的な処理についておさえました．
今回は自分でプロフィール画面を作成してみるまでが目標となっていましたが，コードを書いてみてもなかなか思ったような画面にならず苦戦した方が多かったようで，プロフィール画面を最後まで作ることができた人は少数でした．綺麗なコードを書いたり，コードの間違いを素早く見つけたりする能力は，チームで開発を行う上でも重要なスキルになってくると思うので，実践を通して身に着けていく必要があると感じました．
また，今回のLectureでは実際の開発現場のスピード感を感じることが出来ました．はじめは，「たった5時間でゼロからこんなページが作れるのか！？」などと思っていましたが，無駄なく必要なことだけをおさえていけば意外にも作れてしまうものだということを体感できました．特に，CSSフレームワークを用いることで洗練されたデザインのWebページがあっという間に出来上がっていく過程は驚きでした．この時間だけでWeb開発に対して抱いていたハードルが大きく下がったように感じられます．このような体験は，参考書やネットの記事で学ぼうとしてもなかなか身につくものではないし，実際のプロダクト開発の最前線で活躍するギルドワークスの皆さんに教えていただいて初めて得られる貴重な体験だと思いました．ワークショップをfacilitationいただき, 各参加者を丁寧にサポートいただいた、ギルドワークス/上野さん、金さん、今橋さんに感謝申し上げます。引き続き、よろしくお願いします。
次回以降のLearning Phaseでは，特にJavaScriptを用いて実際に「動きのある画面」を作るためのエッセンスを学んでいきます．今回学んだWebプログラミングの基礎を前提として，より魅力的で便利なWebサービスを作るための要素を学んでいければと思います．
(文責：三宅勇太朗，環境・社会理工学院/土木・環境工学系/都市・環境学コース，D1，ToTAL 2期生)
