【GIG勉強会Vol.52/ LT40】個人開発やThree.js、スクラム入門。GIGエンジニアがやってみた！

こんにちは！　広報の山口真央（やまお）です。

GIGでは毎月さまざまなテーマで勉強会を開催しており、現在はコロナウイルス感染拡大防止のためオンラインにて実施しています。

今回の勉強会は、GIGのデジタルコンサルティング事業部所属のエンジニア3人によるLT。「個人開発のいいところ！」「Three.js触ってみた」「スクラム開発入門」の3つのテーマでそれぞれの知識やノウハウの共有をしてくれました！

個人開発のいいところ！ なぜ君は個人開発をしない？

1人目の登壇者は山際さん。テーマはズバリ「個人開発のいいところ！」。日々会社の業務であらゆる開発をしているエンジニアですが、「業務外でも開発……？」と思われる方も多いのではないでしょうか。

今回は実際に個人でアプリを開発し、リリースしている山際さんが個人開発のメリットについてお話してくれました。

山際 晋平（やまぎわ しんぺい）：株式会社GIG 開発事業部。同志社大学卒業後、新卒で住宅設備メーカーへ入社し、生産体制の改善などに取り組む。その後、エンジニアにジョブチェンジし、2019年11月にGIGにジョイン。フロントエンドをメインに受託開発を担当する。

山際さんが考える個人開発のメリットは以下の4つです。

• 知識の定着
• 知識の補完
• ストレスフリー
• その他
  
  それぞれについて詳しく見ていきましょう。

1.知識の定着
日々の業務で開発を進めるなかで、新しい壁にぶつかることは多いはず。壁を乗り越えるためには勉強することが必要不可欠ですが、せっかく勉強するなら「忘れたくない！」と考えますよね。

個人開発は、自分で調べてサービスで使える形に落とし込む（インプット）、できないことができるようになって成長を実感する（ポジティブな感情）、繰り返し開発を続ける（アウトプット）というサイクルが生まれる記憶に定着しやすい学習方法といえます。

また、コードが手元に残っているので、忘れてもすぐ見直せるのも大きなポイントです。

2. 知識の補完
開発をゲームとして例えてみます。ゲームは説明書や攻略本でも操作や攻略方法を学べますが、それよりも自分の手で実際にプレイしたほうがスキルが磨かれるはず。

開発も同じように、勉強しただけで実際に使えるようになるとは限りません。「こんな実装がしたいな、あんなUIにしたいな」と考え知識をつけたら、実際にコードを書いて実行し、正常に動くのか、コードの書き方に問題はないのかをチェックしていくことで、真の「使える技術」が身につきます。

3. ストレスフリー
日常の業務では、自分のペースで自分が使いたい技術だけで開発を進められるとは限りません。その点、個人開発は縛りがなく、自由に開発を行えます。

4. その他
自分が開発した物は、成果物として自分のポートフォリオになります。また、実際にリリースしてユーザーに使ってもらうことで、他人目線の評価をもらえます。学んだ知識は実務で使いまわせたり、参考にしたりすることも可能ですね。

個人開発は、いつもと違う視点で開発できるため予想外の知識が身につくことがあることや、自分や他人の課題を解決するために開発を進めようと前向きになれることもメリットです。

山際：
「自分が学びたい技術を使える技術として、忘れないように身に着けたいものですよね。さあ、個人開発を始めましょう！」

Three.js触ってみた（with React.js）～JSに感じる無限の可能性～

2人目の登壇者は清水さん。テーマは「Three.js触ってみた」。Three.jsとは、「WebGL」を簡単に使えるようにしたJSライブラリのことで、Web上の2D、あるいは3DグラフィックをレンダリングするためのJavaScript APIを指します。どういうことができるようになるかの作例はこちらにあるので、ぜひ見てみてくださいね。

今回は「最近までThree.js初心者だったんですけど……」という清水さんが実際に3DグラフィックをThree.jsで動かすまでの入口を紹介してくれました！

清水 僚太（しみず りょうた）：DC開発チームのフロントエンドエンジニア。SIerの営業職からエンジニアに転身。SESでの複数のフルスタック開発経験を経て2020年にGIGにジョイン。現在は各種クライアントワークに従事している。

1. Three.jsでWebGLを使うためには？

まず、Three.jsを使うために理解すべき概念から。

画像の描写のためのHTML要素「canvas要素」、つまりユーザー側の画面に表示するもののことをここでは「レンダラー」と呼称します。

レンダラーを作り出すためには、3D空間＝「シーン」の中に表示オブジェクト「メッシュ」を置き、「ライト」で照らして「カメラ」で見る……という流れです。

2. 「with jQuery」「with React」の違い
Three.jsを使用するとき、「jQuery」で行うか「React」で行うかを迷うところです。今回清水さんは「React」を選択。その理由として、以下のような点を挙げていました。

with jQueryの場合
レンダラー、シーン、メッシュ、ライト、カメラなどの必要なものを生成するコードをすべて書き、管理する必要がある。描写にマシンパワーを使うため、高スペックなPCが必要。

with Reactの場合
ExampleがCodeSandboxでわかりやすいライブラリがあり、処理の負荷が圧倒的に軽い。

3. 作ってみたのがこちら
実際にThree.jsを使って清水さんが作ったものがこちら。

緑のボックスをドラッグでグリグリ動かせたり、クリックで色を変えられたりと直感的に操作できます。ぜひ遊んでみてください。

清水：
「応用すれば3Dゲームも作れるThree.js。世界の誰かがThree.jsでゲームセットを作って配信してくれる日もそう遠くないはず。JavaScriptに無限の可能性を感じてもらえたらうれしいです！」

スクラム開発入門～目指せ、脱聞いたことあるだけ状態～

3人目の登壇者は庄子さんです。最近各所で聞く「スクラム開発」。聞いたことはあるけれど、内容はよくわからない……という方も多いのではないでしょうか？

今回は「脱聞いたことあるだけ状態」を目指し、実際にスクラム開発を取り入れるまでの筋道を学んでいきましょう！

庄子 肇（しょうじ はじめ）：バックエンドエンジニア。宮城大学事業構想学部デザイン情報学科を卒業後、ベンチャー企業でエンジニアとして常駐先のシステム開発やサイト制作の経験を積んだ後、2019年10月にGIGにジョイン。

スクラム開発とは、アジャイルソフトウェア開発手法の一つです。アジャイル開発の特徴は、日々の目的達成のために協力することや、フィードバックを継続的に得ながら計画を調整していくこと、まとめて進めるのではなく細かい区切りを設けて進め、作っているものの方向性が合っているのかを都度確認することなどが挙げられます。

スクラム開発の特徴
スクラム開発には、以下のような特徴があります。

• 必要な機能やモノを並び替え、その順番に作っていく。順番を示したリストのことをプロダクトバックログと呼ぶ。
• 短い期間に区切って進めていく。その期間をイテレーション（スプリント）と呼ぶ。
• 現状や問題点をオープンにする。
• 定期的に進め方を検査する。
• 問題があれば、やり方を変えて適応させる。

スクラム開発は、無秩序かつ持続性のあるものを扱うときに導入すると効果的。反対に、手順を作ったほうがいい定期的な作業や、一つのことに深く踏み入れる必要があるもの、スクラムをやっている暇がない短納期なものの場合は、スクラム開発の効果が出ない場合があります。

具体的なスクラム開発はどうやるのか
スクラム開発は以下のようなイベントで構成されます。

1. スプリントプランニング
2. デイリースクラム
3. 開発作業
4. スプリントレビュー
5. スプリントレトロスペクティブ

ひとつひとつを詳しく見ていきましょう。

1. スプリントプランニング

スプリント（一定期間）に、どれだけのストーリー（機能）をリリースできるかを計画するイベントです。スプリント中にメンバーがどれだけストーリーを消化できるかは、ストーリーポイントという指標を用いて見積もります。その見積もりはリファイメントと呼ばれます。

2. デイリースクラム

前回のデイリースクラムからやったこと、次回のデイリースクラムまでやることの確認をします。連絡事項の共有や、スプリント内にストーリーが終わらなそうな人がいれば、アサインの相談を行います。朝会と呼ばれることもします。

3. 開発作業

スプリント内に終わるようにストーリーを進めていきます。

4. スプリントレビュー

スプリント中に完成したものに関して、レビューをもらいます。デモや共有を行い、フィードバックをもらいながら状況の変化や全体の共有を行います。

5. スプリントレトロスペクティブ
スプリント中に起こったことに対するふりかえりを行います。スプリントの最後にスプリント全体を振り返るのではなく、随時項目を書き出せるような仕組みにすると効果的です。

スクラム開発のメリット、デメリット

スクラム開発は、使い時を選べば効果的ですが、デメリットもあります。

メリット
短期間でリリースできるので、サービスの価値を最大化できます。また、顧客とコミュニケーションを取りつつ進められるので、ニーズに最大限応えることが可能です。さらに、工数決めをチーム全員で行うため、プロダクトに対しての知識の差が出ないよう進められます。

デメリット
多くのイベントが発生するため、MTGの時間が多くかかり、個々の開発時間は短くなってしまいます。また、いつ開発が終わるのかがわかりにくいスクラム開発は、予算納期が決まっている案件には不向きです。

庄子：
「GIGも準委任契約が増えてきており、スクラム開発を取り入れることでより案件を進めやすくなるのでは。ぜひスクラム開発を布教しましょう！」

まとめ

今回は、GIGのエンジニア3名によるLTの模様をお伝えしました。

エンジニア職だけでなく、デザイナーや編集職、ディレクターなどもLTを熱心に聞き、質問している様子が印象的な勉強会でした。このように異職種の知識も学ぶことで、より社内の連携がスムーズにいくようになるかもしれません。

GIGでは、今後も、ユーザーのみなさまに価値あるサービスをお届けするため、社員一同学びを続けていきます！