こんにちは。弁護士ドットコム デザイン部の林（@taka_piya ）です。普段は弁護士向けの業務システムのデザインをしています。
10月から3月まで週1回、デザイン部内でJavaScript勉強会を開催しました。この記事ではその具体的な内容と成果、振り返り、頂いたフィードバックをご紹介します。ぜひ社内勉強会のネタに！
JavaScript勉強会をはじめたきっかけ
「仮説検証のスピードを上げたいな〜」という思いつきがきっかけでした。仮説検証とJavaScriptにどのような関係が？ と思われるかもしれませんが、デザイナーがJavaScriptを身につけることで以下のようなメリットがあります。
（1）作るプロトタイプの幅が広がる
普段からHTMLを触っている弁護士ドットコムのデザイナーが、JavaScriptを使えるようになると、もっと仮説検証の幅や精度が広がり、ユーザーに届けられる価値を大きくできます（もし弁護士ドットコムがネイティブアプリを中心に作っている会社であれば、Flutterだったかもしれません）。
（2）漏れのないUI設計ができるようになる
実装の考え方はUIデザインにおいても活かせます。 UIデザインで考える必要があるのは正常系だけではありません。データが空っぽだったり、通信の状態を持っていたり。表現しているUIがどのようなデータモデルを持つのか、どのような状態遷移をするのか。
実装の側から想定できることでUIの想定の抜け漏れや「こんなデータなんてないよ！」という手戻りも防ぐことができます。
勉強会の内容
話を戻し、実際の勉強会の内容をご紹介します。
毎週水曜日の19時から90分間、すべてオンラインで実施し、5人が参加してくれました（デザイン部長も参加してくれました）。
「動くプロトタイプを作れるようになる」というのを目標に、JavaScriptの基礎を学ぶ基礎編（4か月）と、実際にVue.jsでミニアプリを一人で作る応用編（2か月）で構成しました。
基礎編
ここでは変数の扱い、条件分岐やループ、関数、配列といったプログラミングの共通の知識や、DOM などのJavaScript特有のものを教材をみんなで見ながら CodeSandbox で実際に書いて挙動を学んだり、学んだ内容を元にした演習問題を解くことを繰り返しました。
基本を一歩ずつ学ぶ
JavaScriptの基本から逃げないというのは今回のこだわりポイントです。動くプロトタイプを作りたいという点だけ切り取ると、Vue.jsに特化してもよかったのかもしれませんが、すぐに躓いてしまうので、少しずつわかっていく感覚を大切にしました。
身近なお題を取り入れた演習をやる
演習は楽しい内容をメインに。FizzBuzz問題 を行ったり、今回はPokeAPIを活用した演習を多くやりました。 PokeAPIが扱うポケモンの話は、世代的にも身近な話題でありとっつきやすいことや、データが具体的でわかりやすいこと、 また認証が不要なためAPIキーなどを保存する必要がないことから、CodeSandboxでみんなでわいわい使えて便利でした。 pokeapi.co
周辺知識にも触れる
例えばArray#mapやfilterのような高階関数については高校数学の合成関数の動画 を見てイメージをつかんだり、計算量の概念と処理の重さの関係についてM-1のネタで解説する動画 を見たり、周辺知識も触れつつ進めました。
こういった内容を15週行った結果、変数とはなにかから、Fetch APIをつかってデータを取得するところまで一通りできるように。ここまでできるようになれば、あとは調べながら自走できる基礎力がついたはずです。
応用編
ここからVue.jsの学習をしたうえで、実際にアプリケーションの開発をしました。
（１）Vue.jsの基本を学ぶ
一通りMicrosoftのVue.jsチュートリアルを1か月かけやりました。 Vue.jsの基本的な使い方（dataやディレクティブなど）を学び、実際にいつも書いているHTML/CSSを、データに基づいて動的に表示する感覚を身につけました。
（2）作りたいミニアプリを構想から実装まで一人で作る
ここまできたらそれぞれの制作期間に突入です。 後述の成果発表会に向け、「自分で作りたいミニアプリケーションの仕様を決め、デザインを決め、実装する」を課題にし、3週間とりくみました。 （もちろん自分も全力で作る）
成果発表会
こういった勉強会のアウトプットはどうしても「仕事が忙しくて…」となり挫折する可能性があります。
そこで今回はちょっとしたプレッシャーをかけるためにも、ゲストを呼んで作ったアプリケーションのデモをする成果発表会を用意しました（もちろん半年の頑張りをお互いに賞賛する場も兼ねています）。 発表会では、Miroに発表用シートを作り、こだわりや、やりきれなかったポイントを紹介しながらデモを見せ合うことをやりました。
はたして半年の成果はどうなったのか…抜粋してご紹介します。
みんなのミニアプリを紹介
どのような成果が生まれたか
こういったアプリケーションを一人でも作りきれる様になったのは大きな成果ではないでしょうか。 参加いただいた方からのフィードバックアンケートを紹介します。
「期待以上に、読めるようになったのと、プログラムができるようになった」
「業務でjsonデータを扱うので、そことのつなぎ込みを意識したフロント実装ができています。」
「サービスのコード内での作業で、エンジニアが書いているコードを理解でき、今までエンジニアに全部やってもらいってたような箇所に対し、自ら修正してエンジニアにコードレビューをお願いするなどして作業の幅を広げることができた。」
「既存のソースコードに書かれている内容が、勉強前より読み取れるようになった（書けなくても理解できたり）。CodepenやCodeSandboxでJSの動作をつけたサンプルコードを組み、それをチームに持っていって議論する機会が増えてきた」
振り返りアンケート「Q: 業務で活かせた場面はありましたか？」
フィードバックからも、最初メリットとして挙げた、価値検証の幅が広がる、漏れのないUI設計という点が伝わるのではないでしょうか。
改善点
一方ですべてが上手くいったわけではありません。
想定した期間より長くなってしまった
すみません。完全に読み違えました。
途中からレベル差が生まれてしまった
あとは人によって理解度にばらつきがあったので、自分が質問しすぎて他の人が質問をしづらくなっちゃったかな…というのが自己反省でした（でも無言も気まずいし難しいですね）
振り返りアンケート「Q. どのあたりを改善しますか？」
あくまで基礎からという立て付けではじめましたが、それぞれのレベル感が違う中で、全員にフィットするということができたとは言えず途中から差が出てしまい、申し訳ない部分がありました。
双方向のコミュニケーションが足りなかった
作ったものをみんなで触れるようにしてFB受けて改善するプロセスを取り入れると、もっと楽しそう
振り返りアンケート「Q. どのあたりを改善しますか？」
教える側と教わる側という1:Nのコミュニケーションになってしまい、お互いが教え合うような場を作れなかったのは反省です。オンラインを生かしてもっとお互いのコードを見られる機会を作られればもっと学びが生まれたと感じています。
次の誰かにバトンを渡す
反省点はいろいろあるものの、JavaScript勉強会は総じて良かったと考えます。
個人的な出来事ですが、前職の会社ではフロントエンドエンジニアの方が多くいらっしゃったのでReact.jsを社内で学ぶ機会がありました。 しかしReactを学んだメリットを本当に感じたのは2年後、今の会社に転職し、価値検証のためにJavaScriptでプロトタイプを作成したときです。 Reactを学ぶことがなければ、おそらくこういった動き方はできませんでした。
同じように、今回のJavaScript勉強会があったからといってすぐに何かあるわけではないでしょう。ですが、数年後あれがあったから…と誰かがバトンを継いでもらえるといいなと思います。
何かモノを作るとき、今までだと設計を考える際に途中で断念することがほとんどだったのですが、断念せずやりきれるようになったことが一番大きいです。今後もいろいろ挑戦してみたくなりました！
ちなみに、今回一番成長できたのは誰でしょうか。解説するために仕様をめちゃくちゃ調べた自分が一番成長した気がします！これもデザインチーム内でJavaScript勉強会をやるメリットでした。
皆様も興味があればぜひやってみてください。 では！