こちらは「コドモン Advent Calendar 2024」の 1日目の記事です🎅🎄qiita.com
こんにちは。コドモンビルドアップ部（自称）の関口です。皆さんはビルドアップしてますか？私の最近の実情は以下の通りです。
- フィジカル -> 定期的にジムでちょっと
- エンジニアリングスキル -> 怠け気味
「なぜ君は筋肉より生業の方に人生の時間を投資しないんだ？」と真顔で詰めてくるもう一人の自分の正論が心に突き刺さる状態です…。ヘルシーではありませんね。なんとかして心の平穏を取り戻したい…そんな私のようなエンジニアリングマッスルが弛緩気味のエンジニアにも拾う神はあります。弊社にはO'Reillyのオンライン・ラーニング・プラットフォームを利用できるという最高の福利厚生があるのです。これを利用しない手はありません。本日はこれを利用した私の学習体験をレポートしたいと思います。
何を学ぶか決める
最初にして最大の難関はここでした。ここで挫折する人も少なからずいるのではないでしょうか？一見するだけでも定命の者には学習し切れないであろう量の知識がO'Reillyには収められており、カタログと正面から睨めっこするとまず迷子になります。そしてしばらくさまよった結果、精神にダメージを受けてそっ閉じしてしまうのです（私のように）。まずは一旦画面を閉じましょう。先に自分がやるものを決めに行くのです。決め（＝必要ないと決めたものを捨て）ないと、圧倒的な量の前に溺れます。今回このブログで何を学ぶかを決めに行った私の思考過程をここに記します。
スキルを分類する
まずはメタな分類からです。目先の必要性、興味、得手不得手というざっくりした3つの要素での分類を図示します。
ベン図の外側も含めて8つの領域が存在することが結論できます。以降、これらの領域のどこを選ぶかを考えます。
分析してあたりをつける
分類したそれぞれの領域を分析します。必要ならば学習優先度は高く、興味があればモチベーションが高い、得意ならばキャッチアップコストが低いという仮定の下、評価を記入していきます。また、得意なものは既にその領域の概要や用語、技術的な論点を把握しているため、書籍で特定の論点や最新の動向を深掘りしていくスタイルが可能な一方、そうでないものはその領域を広く浅くカバーしてくれる入門向けのオンラインコース*1から入るのがキャッチアップコストが低いと仮定しています。
この分析の結果、今回のブログでは「伸び代」「不足スキル」あたりに手を出すのがリーズナブルだろうという直感が得られました。以下がその理由です。
- 「コアスキル」や「サブスキル」は既に「上がり」の状態にあり、費用対効果が薄い可能性が高いです。また、仕事でも自分が最大のバリューを発揮する場所だと考えると一見合理的選択に思える上、得意なだけに学習ストレスが少ないので、そもそも心理的にこれを選択するバイアスが高くなります。どうせやるならそういったバイアスを避けて、敢えてコンフォートゾーンの外にある分野を学ぶことで高い学習効果を得たいです
- 「気になる」や「ポテンシャル」は必要性がない時点で費用対効果が薄い可能性が高いです。無闇に自分の職務履歴に幅を出そうとしたり、会社の目標管理のネタが切れたためにやむを得ず…という状況でこのジャンルに手を出しがちです（少なくとも私は、です…）。特に「やってみた」系や資格取得で表面をなぞって結局実務で使わないままにそのまま「残念…」領域にシフトしてしまうスキルは、結局ほとんど何にもならないという冷酷な現実が待っています。今回はどうせやるなら仕事に必要なことを学習して実際に役立てたいです
「伸び代」が「コアスキル」に、「不足スキル」が「サブスキル」（あわよくば興味も出て「コアスキル」）に昇格してくれれば嬉しい限りですし、そうでなくても今までほぼ完全に他人に頼りきりだった「伸び代」「不足スキル」にあたる仕事が、レビューしてもらいながら自分主導で進めることができるようになるかも知れません。一人の守備範囲が増えることで、組織全体で見た生産性が上がる可能性は高いですよね。
以上から、今回は「伸び代」か「不足スキル」にあたる部分を選択する指針で行こうと結論づけました。
尚、この選択は私の個人的な事情に起因している部分が自身が多いことをあらかじめお断りしておきます。私は共働きで且つ未就学児童含む2児の父であるという事情を抱えているため、子供達と遊ぶ時間（というか、彼女らに遊んでもらう時間）を最大限確保するため、さもしさを感じるぐらい冷徹に費用対効果を追い求める選択をしました。また、コドモンでは得意領域だけを専門的にやるエンジニアよりも、必要なことはなんでもやれる幅広いスキルを持つエンジニアが求められる、という職場環境の要因もあります。しかしながら、多く時間を割ける方であればこんなこと考えずに気の向くままにやるのは全然ありだと思います。一見無駄と思えたことが実際に活きる例も多くあるでしょう。また、コアな部分を最先端に維持し続けることが求められるポジションも世の中には多くありそうです。あくまで個人の事情/考えに基づく意見であること、ご承知おきください。
自分のスキルをマッピングして学習対象を決定する
先ほどの分類に自分のスキルをマッピングしていきます。「スキル」が何であるかは人によると思いますが、私はざっくりと以下のように整理しました。
私は典型的なバックエンド寄りのアプリケーションエンジニアとして仕事をしてきたタイプです。なので、インフラのコアな知識やフロントエンドのビュー側に近くなるものほど知識が怪しくなっていく傾向があります。今回は「伸び代」「不足スキル」にならぶスキルの中で、個人的に一番霧が濃い（理解できてる範囲が狭い）と感じる「html/css」の部分を学ぶことで明るくしようと思います。今まで「これでいい…のか？」と思いながら修正してきた部分や、デザイナーに頼り切りになりがちだった部分が「これでいいですよね？」ぐらいの気持ちで進められるようになるかもしれません。
エンジニアリングマッスルと心の平穏を取り戻すため、いざビルドアップ！
実際に受講してみる
まずはざっとカリキュラムを見てみます。今回は得意でない分野なので、オンラインコースを探します。O'Reillyといえば本ですが、オンラインコースも充実しています。今回はやることを決めているので門前払いを食うこともありません。決意をもって検索していきます。「Learn by role」で迷うことなく「frontend developer」を選んでいきます（frontendが得意ではないので、若干詐称してる気持ちになりますが…）。
候補の一覧が出ます。
今回は一番左上『Modern HTML & CSS From The Beginning 2.0 - Second Edition』を選択しました。根拠は以下です。
- 日付が新しい
- html/css両方をカバーしている
- 余計な要素がない
- 初級から中級に分類されているので、初学者でも良さそう
- きっとのO'Reillyのオススメ度合いも高いからこの位置なのだろう
学習時間の目安に24hと書いてあるだけあって長いです。目次を見たら20章あります。各章ごとに動画数本と確認テストがあり、各章ごとにかかる時間数が書いてあります。あいにくこの記事では制覇しきれない量なので、最初の数章のレポートとさせて頂きます。
英語について
動画もテストも中身は全て英語です。が、本ではなく口語とテストなので調べないとわからないほどの難しい表現はほとんどないですし、多少わからない単語があってもスライドと合わせて内容が把握できていれば大丈夫です。英語字幕が出せるのでヒアリングが苦手な私でも音と文字で確認できますし、再生速度も調整が可能なので聞き取りにくければ遅くすることもできます。動画を止めて字幕の単語を調べるもよし、英語も学べてお得だと思って恐れずにいきましょう。
専門用語や概念がカタカナや和訳ではなく、英語のまま脳に入ってくるという大きなアドバンテージもあります（学習したことを日本語で説明する場合にはディスアドバンテージか！？）。これのおかげで、訳してあるよりむしろ理解が捗ることが多々あります。
学習を支援する周辺機能について
まず最初はスケジューラーの話です。フィジカルの方のビルドアップはとにかく一定間隔で途切れることなくやり続けることが大事だったりしますが、学習も同じだと思います。予定を入れちゃいましょう。講座の最初と、受講中とそれぞれの導線を図示しておきます。
開いたモーダルで設定を進めていきます。筆者はgoogle calender使いなのでそのように設定していきます。
無事、土日に子供たちが起床する前の1時間にビルドアップスケジュールを設定できました。
次に、モバイルアプリの話です。外出時の移動やちょっとした空き時間の学習ではモバイルアプリの活用がオススメです。Google PlayやApp Storeでアプリをダウンロードして視聴しましょう。動画の通信量が気になる場合は、ダウンロードもできます。筆者はリモートワークが主でモバイルの契約ギガ数が細いので、自宅でダウンロードする派です。以下は筆者のAndroidアプリでのダウンロードの導線です。
尚、筆者が2024年11月に確認したところでは、ダウンロードした場合は字幕が表示できませんでした。字幕が出ない場合は再生速度を下げたり、分からなかったところを自宅で見直すなどでフォローしていきましょう。
1章
章立てはこのような感じです。
最後には確認テストがあるので、挑戦してみます。確認テストはこのような感じです。
2章
章立てはこのような感じです。
また、実際にコーディングの手本を見せてくれるchallengeコーナーもあり、実際に講師の方がコーディングしてくれるのを見ることができます。これが非常に勉強になるので、復習&演習がてら手を動かして講師のお手本の動きをトレースします。Visual Studio Codeなので、Jet Brains製品使いの筆者にはちょっとアレなのですが、似たような機能はあるので、十分に参考になります。
ああ、最後の確認テストは満点ならず。「Review quiz questions」のaccordionをtoggleして、間違えた箇所を探します。Visual Studio Codeのショートカットや起動の仕方の回答が間違えていたので直して満点を確認し、次に行きます。解答ミスでなく本当に間違えた部分はちゃんと動画を見直しにいくのが吉なのですが、個人的に業務でVisual Studio Codeを利用する機会が今の所なさそうなのでここはスルーします。
3章
章立てはこのような感じです。
最後の確認テストはまたしても満点ならず…確認すると、複数選択問題で一個しか解答を選んでなかったせいだと分かります。よく見るといつものradioがcheckboxですね。まさにinputを学習した直後にこの問題とは、味なマネを…。ということで特に見直しが必要な感じはなかったので次に進みます。
感想
一旦ここまでの時点でまとめたいと思います。「たった3章で何を言えるのだ？」と思われるかもしれません（自分でもちょっとそう思います）が、書いておきます。
サービスについて
私は過去にcourseraやudemyを受けていたのですが、機能からUXまで、特にそこまでの差は感じませんでした。なので、これらを受けたことのある人には特に目新しい感じはないと思います。必要十分を満たしているな、という感想でした。しかしながら、以前は個人で1講座に5〜6,000円払っていたことを考えると、福利厚生でこれらが無料で受けられるのは非常にありがたいと感じました。このサービスの導入に動いてくれた関係者各位に改めて感謝です。
この講座について
非常によかったです。動画も簡潔で分かりやすいですし、章立て、カバーしている範囲の広さ、提供されている内容も良く、文句なしと言ったところでした。実務的なエディタの使い方なども教えてくれるし、実際にコーディングするシーンも見られるのが特にいいですね。この後も継続して学習し、修了バッチを取得していこうと思います。
まとめ
得たスキルは実践して価値を出してナンボです。学んだ内容は、是非実務に活かしたいですね。なんなら実務に活かせさえすれば全てをコンプリートする必要もない、とも私は思います。ただし、初心者のうちは守破離の守を貫くのが無難だと思いますので、なるべく向こうの出してきたメニューを全て平らげることにします。つまみ食いは、一定その分野のエキスパートになったときの楽しみにとっておきます。とりあえず私はここで得た知識を保守している機能の目先の修正に活かそうと目論んでいます。
もし受講した20章全部やり切った暁にはcss/htmlに関連するブログ記事の一本もここに上げてるかもしれませんし、途中で音を上げてこのブログを読み返しているかもしれません…私の戦いはこれからです。次回作に是非ご期待ください。
ちなみに明日のアドベントカレンダーはその利発さで右に出るものがいないと言われる（私調べ）弊社の敏腕Pdm、天川さんの投稿です。お楽しみに！
*1:オンラインコースの中には専門性の高いものもあるので注意
