フィヨルドブートキャンプのCSSの課題が大変な理由
こちらは「フィヨルドブートキャンプ Advent Calendar 2020」の14日目の記事です（Part 1、 Part 2）。昨日の記事は、西田剛さんの「見えてきたエンジニア像」、えみこさんの「【CSS】メンターさんによるコードレビュー（受講生276人分）を全て読んでみた話」でした。
きっかけはこうだったけど、こんないいことが待っていた
会社でフィヨルドブートキャンプというプログラミングスクールの運営をしています。
もともとは、弊社がインターンでも募集してみようかな、でも、こんな無名の会社にインターンをしたい人なんていないでしょ、インターンをやることに明確なメリットを提示しないとな〜、じゃ、プログラミングを教われるインターンをやろう、というのが始まりでした（フィヨルドブートキャンプがインターンからスクールになった経緯はこちら）。
それが 2012 年の 3 月ことなのですが、きっかけはこうだったのに、今はフィヨルドブートキャンプというプログラミングスクールになってたくさんの方が受講をしてくれています。本当ありがとうございます🙏
フィヨルドブートキャンプ自体もそうだし、思い返せば、きっかけはこうだったけどこんないいことが待っていた、ということがたくさんあるもので、フィヨルドブートキャンプの CSS の課題も例外ではないです。今回はフィヨルドブートキャンプの CSS の課題の「きっかけはこうだったけど、こんないいことが待っていた」の話をさせていただき、「フィヨルドブートキャンプの CSS が大変」と、たくさんの受講者に言われていますが、なんでこんなに大変なものになったのか、なんで大変なままなのかに対する回答とさせていただこうという魂胆です。
そうそう、フィヨルドブートキャンプは、初めてMacを触った人が自作サービスを公開するまでに必要なことをプラクティスとして用意していて、その中には HTML と CSS も含まれています。「プログラミング」スクールなので、基本的にデザイナーの僕の出番はあまりないのですが、 HTML と CSS についてだけは僕が詳しいので、そこだけ僕がプラクティスの改善を進めたり、受講者のみんなが提出した課題のレビューをしています。
CSS の課題の内容
みんなを苦しめてる課題の内容ですが、これはちょうどえみこさんが昨日書いてくれた記事に詳しく載っています。さくっと伝えると、CSS の入っていない HTML と以下のキャプチャが用意されています。HTML を一切触らずに CSS をいじってキャプチャに近づけるという課題です。
display: flex や display: grid を使ってレイアウトをしてもらうために、大枠のレイアウトでは float は使わない縛り、疑似要素と position を使って装飾を実装、グラデーションや overflow のスクロール設定も必要になっているので、そりゃ最近初めて CSS を触った人がこれをやるのは確かに難関です。
CSS 上級と CSS 初級
CSS のプラクティスは上記の課題をやる、というものしかなかったのですが、去年くらいに新たに「CSS 初級」を追加し、既存の課題は「CSS 上級」にしました。なぜ、初級を作ったかという話を少し。
フィヨルドブートキャンプは（実は）企業研修代行もやっていて、会社の研修として利用していただくことがあります。研修の場合、すべてのプラクティスをやるのは時間的に無理なので、期間と必要なスキルに合わせて研修メニューを組み立てるのですが、研修メニューに CSS も入れたいという要望がある場合もあります。既存の CSS のプラクティスを研修メニューに入れてしまうと、それだけで研修期間が終わってしまうという問題が発生するのが目に見えていたので、もっと短期間で終わらせられる CSS 初級を作らなくては、と初級を追加したきっかけでした。（研修代行についてのお問い合わせは info@fjord.jp まで）
CSS 初級は、CSS 上級と同じように、CSS の入っていない HTML が用意されていて、それに対して CSS を入れるという課題になります。上級と違うのは、CSS を入れるページは、ガッツリした 2 カラムのページではなく 1 カラムのブログで、見本のキャプチャはあるのですが、その見本はあくまでも例で、好きにデザインを入れていいという内容になっています。要するに「Web デザイン体験」をしてみよう、という内容です。
...と、きっかけはそんな理由だったのですが、CSS 初級を作ったことでこんないいことがありました。
CSS に入る前にやるプラクティスは HTML なのですが、多くの方がご存知の通り、HTML はブラウザや検索エンジンのボットなどの機械に対して、ここは段落、ここは引用、ここは箇条書き、ここは見出し...という文書の構造を伝えるものです。HTML のルールに従って HTML タグで印を付けていけば、機械に対して文書構造が伝えられます。
ところが、CSS の相手は人間。人間に対して、ここは段落、ここは引用、ここは箇条書き、ここは見出し...という文書の構造を伝えるためには、然るべき見た目を CSS で実装する必要があります。ここで初めて、どうしたら人間にここが段落だと伝えられるのか？引用は？箇条書きは？見出しは？...と考える機会がなかったのが、CSS 初級のプラクティスを作ることでその機会を作れたんですね。このプラクティスをきっかけに、他のサイトでは段落、引用、箇条書き、見出し...を表現するのにどのようなスタイルをあてているのかを知ろうとする機会ができました。この経験は自作サービスにとても役に立つので、今は受講者全員にやってもらってます。
CSS の課題が大変になった理由
さてさて、タイトルにある CSS の課題の話に戻ります。まずは、CSS の課題が大変になったきっかけですが、それは僕が昔怒ったからです。
これはインターン時代の話になるのですが、当時のフィヨルドブートキャンプ（厳密にはインターン）の CSS の課題に見本として僕が書いた CSS を用意しておいてたんですね。そうしてたら、たくさんの人がそれをコピペして提出するという事態が起きて、「こらー、ちゃんと CSS やりなさーい！これでも喰らえ！！」と今の課題を作ってそれに変更しました（2012 年 8 月に作ったやつで、見本のコードは書き替わってるけど、内容はいまだに変わらず）。ちなみに変なおじさんの画像からも、これでも喰らえ感が伝わるかと思います（人が頑張ってるときにこの画像は気が滅入るという声がたまにあるので、いつか変えようと思いつつまだ変えてなかったので、今日あたり変えます）。
...と、きっかけはそんな理由だったのですが、CSS の課題を難しいものにして、こんないいことがありました。
質問の練習にぴったりの課題になった
さすがに課題が難しいので、みんながわからないことを質問するようになりました。これがすごく良くて、というのも、CSS で質問の練習にぴったりだったんですよね。
質問するときは、「自分はこのように理解している。なので、この部分をこう書いた。こう書くとこうなると予想したが、そうはならなかった。今のところそうならない原因はこうだと考えている。」と、ちゃんと説明をしないと質問に質問が返ってきて、なかなか自分の欲しい回答が得られないですが、CSS はこれからやる Ruby や JavaScript の課題よりもコンテキストを説明しやすいし、やり方のパターンもそれらに比べれば少ないし、知らないと永遠にはまり続けるけど、知っていれば一瞬で解決、ってものが多くて、質問の練習にぴったりでした。CSS でたくさんハマって質問をしまくった人は、その後の課題でも質問上手、テキストでのコミュニケーション上手になって、効率的に学習が進んでいます。
また、CSS のプラクティスは始めのほうにあるので、多くの受講者がそれをクリアしてるんですよね。なので、最近では僕が回答する前に受講者の誰かが答えてくれることがほとんどで、質問に答える練習にもなっています（みんな回答ありがとうございます🙏）。
ただ、どんどんヒントが充実してきて、質問をするまでもなく回答を得られるようになってきてるので、ちょっとこの効果は減少気味。
フィヨルドブートキャンプの進め方を知るのにぴったりの課題になった
ドキュメント、先輩受講者の日報、Q&A でのやりとりなど、フィヨルドブートキャンプの学習アプリの中には課題をクリアするためのヒントがたくさん用意されています。この蓄積がフィヨルドブートキャンプの大事な財産なのですが、それを受講者が利用しなくては宝の持ち腐れになってしまいます。CSS は 2012 年から使っている課題なので、学習アプリの中にたくさんのヒントがあり、調べればわからないことを解決しやすくなっているので、その蓄積を利用することで得られるメリットを知るのにぴったりな課題になりました。フィヨルドブートキャンプの学習アプリの中にはこんなに便利な情報があるんですよ、ということを知るために、CSS のプラクティスには課題クリアに役立つコンテンツへのリンクをたくさん用意しています。
コツコツやればできることを知るのにぴったりの課題になった
CSS を少ししか書いたことない人がこの課題を見ると、最初は途方に暮れるのですが、コツコツやっていれば最後は完成までたどり着けてしまいます。達成感を味合わせるための与えられた達成感ではなくて、自分で Web サイトが作れるようになるという、一つのスキルを身につけるという本当の達成を得られます。コツコツやっていれば高い壁もクリアできる、ということを知るのにぴったりな課題になりました。ここで得た自信や、高い壁を前にしたときの心構えが、この先のプログラミングの課題に役立っています。
この課題で僕も成長
教えるのが好き、人が成長するのを見るのが好き、など、人によって教えるモチベーションは様々ですが、僕の場合は、デザイナーである以上、人にものを伝えることができなくて何がデザイナーか、と思うところがあって、質問に対する回答で必ず理解させなくてはならない、という意地がモチベーションの源になっています。課題を変えたことで質問が増えましたが、毎回、質問に対して理解してもらうにはどのように答えるべきか、を考えることに頭を使ってます。これがデザインや普段の仕事のやりとりにとても役立っています。皆さんの質問のおかげで僕も成長しています。ちょっとこれは褒められたい点なのですが、課題の難しさに対して脱落者はものすごく少ないんですよ。
きっかけはこうだったけど、こんないいことが待っていた（Reprise）
きっかけはこうだったけど、いざ蓋を開けてみると当初は予想もしていなかった「いいこと」が待ってるかも、と考えるのオススメです。「予想もしていなかった」には「トラブル」、「失敗」などネガティブなワードを連想しがちで、何かをするには腰が重くなったり、臆病になったりしてしまいますが、いいことが待ってることもたくさんあるので、やっぱり身軽に「なんかいいことあんじゃない？」ってノリで未来に対してワクワクしながら色々やっていかなきゃなー、と CSS の課題について振り返っていたら、こういう気持ちになってきました。
CSS の課題ですらこれだけ予想もしなかったいいことがあったので、プログラミングの学習を続けたら、コミュニティに参加したら、イベントで登壇したら、自分でイベントを企画したら、プログラマーとして転職したら...どれだけ予想もしていなかった「いいこと」が待ってるのだろう？...と、不安な気持ちを少しでもわくわくに変えてもらえたら幸いです。
CSS の課題が大変なことに対する言い訳を書くつもりが、きっかけはこうだったけど、こんないいことが待っていた、というテーマになって、なんか前向きな気持ちになりました。というメタな感じでこの記事を締めくくりたいと思います。
