こんにちは、フロントエンドエンジニアの店長です。
LIGのフロントエンドエンジニアチームでは、毎週火曜と木曜にみんなで自由に勉強するためのフリータイムという時間を設けています。（例えばコードレビューしたり、新しく学んだ技術を発表したり）
先日その時間を使ってコードスプリントという新しいトレーニング方法を試したので、今回はその内容についてお伝えしたいと思ってます。エンジニアリングの勉強をしはじめた方やエンジニアの教育で困っているという方に、参考にしていただればと思います。それではいきましょう。
短時間で作ってレビューする「コードスプリント」とは？
「決められた時間の中で作ったものを、なぜこのように作ったのかレビューする」ことで勉強になるのではないかと思い、この学習法をコードスプリントと名付けました。
今回は、フリータイムの冒頭でこのスライドを使ってコードスプリントの説明をしました！ 詳しく説明していきますね。
コードスプリントの流れ
コードスプリントの流れは、下記の5つのステップです。
- ある簡単なお題で、15分間コーディングをする
- ランダムで指名をして、指名された人は2分間で自分のコードについてプレゼンする
- 3分間の質疑応答
- 上の2.〜3.を時間が許す限り繰り返す
- みんなでどのコードが良かったか話し合う
15分とかなり短い時間でのコーディングになりますが、大切なのはすべて作りきることではありません。途中まででいいので、2.のときにしっかりとプレゼンできるように考えてコーディングすることが重要です。
コードスプリントのメリット
この学習方法の狙いは2つあります。
自分のコードを説明することで、自分の考え方を自覚する
普段どんな風に考えながらコードを書いているか自分で説明することによって、自分の考え方を改めて自覚することができます。
他の人のコードと比較できる
同じものをコーディングするので、他の人がどんなコードを書いているのか比較でき、すごく参考になります。自分のコードと比較することで他の人の考え方を吸収したり、自分の良い部分を理解してもらったりすることができます。
今回のお題：3カラムレイアウト
さて、実施してみてどうだったのか。実際におこなった内容とみんなのコードを見ていきましょう。
今回のお題はこちらでした！
| お題 | LIGブログで使われてる記事+サムネイルのモジュール |
|---|---|
| ポイント | 3カラムのレイアウトの組み方と、パーツの分け方 |
| 制限時間 | 15分 |
| 使用言語 | HTML、CSS（CSSプリプロセッサの使用も可） |
| 注意点 |
|
それでは、みんなが15分という短い間でどのようにコーディングしたのか見ていきましょう！
SMACSSで汎用性を意識した、店長のモジュール化コーディング
See the Pen gPPpOJ by yusuke omi (@Im0-3) on CodePen.
まずは手前味噌ですが、私、店長のコードから紹介したいと思います。ポイントは、SMACSSでのCSS設計を意識したコーディングです。
グリッドレイアウトはSMACSSのレイアウトルールに沿った命名にし、使い回しがしやすいようにパーセントで、グリッド幅を指定しました。また、カテゴリの部分やNEWのパーツはモジュール化して、他のところでも使い回しをしやすいように計算をしています。
意味のあるコードだけを書きたい。まろCのエモコーディング
See the Pen xZZNey by maroc (@maroc) on CodePen.
CTOから、「まろCのコーディングはエモいな」と言わしめたまろCのコーディング。
まずHTMLを全て書き出し、タグの意味に特に注意を払って、コーディングをしています。とにかく意味のないコードは書きたくないというまろCらしいコードです。
時間内で最高のパフォーマンスを。先生の超効率コーディング
See the Pen jWWoRm by frontainer (@frontainer) on CodePen.
15分という時間を意識して作っていたCTO、先生のコーディング。
短時間での実装ということも考えグリッドはdisplay: tableを使用しています。また、WordPressでの実装する場合を考え、Newアイコンに関してはis-newというクラスをふるだけで実装するような想定で作っています。短時間ながらも、他の人が読むことを考えられたコードです。
CSS設計の知識を巧みに使った、せいとの設計重視コーディング
See the Pen YwwbMo by Seito (@seito2014) on CodePen.
CSS設計おにいさんこと、せいとのコード。
section、grid、card、budge、labelの5つのモジュールをうまくCSS設計で切り分けています。15分という短い時間の中でもしっかりとコメントを残しているところにこだわりを感じますね。
SASSの機能を巧みに使う、ほりでーのハイスピードBEMコーディング。
See the Pen LIG INC CODE SPRINT by y_hokkey (@hokkey) on CodePen.
最近入社した期待の新人ほりでーのコード。
彼はBEMという設計でしたコーディングをしたのですが、一番SASSの機能をうまく使って効率化していました。&記法をつかってBlockとElement、Modifierを繋いで記述を楽にしたり、関数や変数、演算を巧みに使ったりしてコーディングをしています。
コードスプリントをやってみて
今回の新しい試みは、楽しみながら勉強ができると好評でした。
コードスプリントをするために、フロントエンドエンジニアのはっちゃんと共同で準備を進めたのですが、その際にやっといてよかったことと、もっとこうした方が良さそうだなと思ったことをまとめてみました。
開催する際の参考にしてみてください。
課題は単純なものでよい
15分という短い時間なので、難しいものは不向きです。割と単純なものでもかなり差がはっきりと出たので、短い時間である程度組めそうなものを題材にすると良さそうです。
全体で実施する前に、一度試してみる
この会を実施する前に、はっちゃんと二人で実際にコードスプリントをしてみました。一回やってみることで、「もっとこうした方がいい」「これは事前に準備しておいた方がいい」といったことがわかったので、もしやる場合は、主催側が一度事前に試してみることをおすすめします。
何をポイントにコーディングしてほしいか示す
15分という短い時間なので、いろいろとポイントを広げてしまうとコーディングするときに迷ってしまいます。
今回はHTMLとCSS設計とポイントを絞ってコーディングをしました。最初に、何に注目してコーディングしてほしいか、ある程度提示してあげると迷わずコーディングができます。
まとめ
新しい学習法「コードスプリント」に、興味を持っていただけましたか？ また、今回紹介したコードの中で、好みのコードはあったでしょうか？
実際にやってみると、かなり実力差も出てきます。しかし、コードを見てレビューし合うというのはとても勉強になるので、コーディングの技術向上で悩んでる方は、ぜひ試してみてください。
今後はHTMLやCSSだけではなく、JavaScriptでも同じことができたらいいなと考えてます。また実施した際は、レポートにしたいと思います！
やってみた方がいましたら、ぜひ感想を教えてください。それでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
