VOYAGE GROUPさんのインターン「Treasure」に参加してきたお話

インターン振り返り
Tomu Obata
📅2019/9/5

Treasureという3週間で、講義+チーム開発を行うインターンに参加してきた時の振り返りになります!

目次

もの創り実践プログラム「Treasure」とは

一言でいうと3週間で、講義+チーム開発を行うインターンになります。

それでは、どんなことを考えて過ごしていたのか、どのように変わっていったのかなどを書いていこうと思います。かなりボリューミーな内容になっているので、興味をもってくださった部分から気軽に見てくれると幸いです笑

参加した理由

実際に利用するユーザー視点を常に持ちながら、本当に価値のあるサービスとは何なのか共に議論し考え抜き、一緒にチーム開発を行うことで技術力・思考力をより高めていきたいと思い、参加しました。

日程スケジュール

となっていて、Treasureが始まるまでの間に事前課題がありました。

事前課題

それぞれの課題に対して丁寧なレビューをしてもらえたので、インターン当日までにリファクタリングして理解を深めていきました。

前半戦の講義内容

それでは、まず前半戦の講義について書いていきます。

1日目 8/12(月)

午前中ではみんなと顔合わせを行い、これから始まる3週間がより楽しみになりました!そして、好きなエディタなどは、各々こだわりがあって改めて面白いなって思いました。

Goの講義 その1

午後からは、ペアプロ形式でGoの学習を進めていきました。内容としては、Goでcurlコマンドを実装したり小さなコマンドラインアプリケーションを作ったりしました。

自分だけでなくペアの方も読みやすいコードを心がけることが生産性を高めていくために重要なことだと再認識しました。そして、実装で詰まってしまった時ほどしっかりエラー文を読むことが何より大事だなって痛感、、

ドキュメントを読めばあまり悩まず実装できることが多かったので、コードジャンプなど便利な機能はしっかり使っていき、仕様を理解してコードを書いていきたいです。

振り返り

2日目 8/13(火)

Goの講義 その2

2日目は、Goで書かれたベースアプリにAPIを追加していきました。

実装の流れの例

といった手順でAPI実装を進めていきました。

途中でCTO 小賀さんのLTがありました

内容をまとめると

これからTreasureでコンフォートゾーンの外側で挑戦し続けていけるように意識していこうと思いました!🔥

フロントの講義 その1

インターネット技術の時代の流れについての紹介後に

について比較しながら学んでいきました。

3日目 8/14(水)

フロントの講義 その2

フロントの講義では、

クロージャとクラス

Promise

fetch(function(res) {
  return res.json();
}).catch(function(error) {
  display(error);
});

よりも

function parseJson(res) {
  return res.json();
}
fetch.then(parseJson).catch(display);

の方が短く記述できる

また、axiosというライブラリの方がエラーハンドリングや処理の記述が容易に行えたりするので便利だったりします。

しかし、fetchは外部リソースを読み込む必要がない・対応しているブラウザがaxiosより多いといったメリットもあるので、どの技術を使用して実装するのかお互いの側面を理解した上で選定していきたいですね。

フレームワークの選定

Parcel

React/Vue

2つの種類のComponent

などの内容を学んだ後に、Reactで先日のGoの講義で作ったAPIを使って機能追加していきました。

4日目 8/15(木)

データベースの講義

データベースでは、

データベースの種類について

RDB

DWH

KVS

データベースの選択と特性

ACID

1. Atomicity(原子性)

2. Consistency(一貫性)

3. Isolation(独立性)

4. Durability(永続性)

BASE

などの内容を最初の講義で学びました。

グループワークのモデリング実践入門

そして、次はグループワークに入る前にモデリングの講義がありました。

データモデリング

データ≠情報

エンティティとは

モデリングの技法

1. 論理モデルの作成

2. 論理モデルから物理モデルへの変換

モデリングの講義の後は、3人チームとなって架空サービスのデータモデリングを行い、migrationを適用しました。

なぜ、このようなテーブル設計にしたのか3人で何度も見つめ直すことで仕様漏れの防止に繋がったと思います。

社内LTにも参加しました

どれも非常に楽しい内容で充実した時間になりました。 (進捗を最高にするイヤホン・ヘッドホンの選び方やBash Scriptで3分APIサーバー作成など笑)

美味しくいただきました!
美味しくいただきました!

5日目 8/16(金)

中間課題

5日目は中間課題の発表がありお題は、

というものでした。

何を作ろうかと考えた時に、最近困っていることは何だろうと思い書き出していきました。

困っていること

1. 前に見ていたページを探したいと思った時に、開いているタブが多いと、ページタイトルが見切れてしまい切り替えることが困難

2. 見ているページをスマートフォンやiPadですぐに見たいときに、Slackなどで送るのは手間

3. Chromeのタブをたくさん開いていると、メモリを沢山消費しているので開いているが不要なタブを削除したい

タブを開きすぎている様子
タブを開きすぎている様子

上記の問題の解決策

  1. 開いているタブの一覧を表示して、タップするとそのページに遷移できるようにする
  2. 開いているタブのQRコードを読み取ることで、スマートフォン・iPadでも別のサービスを経由することなく瞬時に開くことができるようにする
  3. 複数ページを開いている際に「いくつタブを開いているのか」すぐに見ることができ、知りたい情報が記載されているタブがどれだったのか、「タイトル」「ロゴ」を表示して知ることができるようにする

そして、Chrome APIを使ったChromeプラグインを作ろうと決めて開発していきました。

8/17,18(土日)

オフィスで行き中間課題に取り組んでいました。今回のChrome拡張を作る上で使用した技術は、 React, ChromeAPI, Material-UIです。Chrome拡張のデバッグでは、React Developer Tools を使うことができなかったので大変でした笑

Reactは、あまりキャッチアップし切れていない現状でしたが、少しずつ書けるようになってくると、ライブラリ・ドキュメントの充実度が高くて楽しくなってきました。今回の中間課題に取り組んだことで、Material-UIやAtomic Designを意識したコンポーネント分割には少しずつ慣れてきて、後半のチーム開発でも活かしていけたかなと感じています。

6日目 8/19(月)

中間発表

最終的に出来上がった僕の成果物は以下のような画面になります。

Chromeプラグインの動作画面
Chromeプラグインの動作画面

「QRコードを表示」ボタンにマウスオーバーすると、それぞれのQRコードが表示されます。 実装したかった機能は動作するので、UIを少し整えてchromeウェブストアにリリースしようと思います。

【2019/12/19 追記】リリース!

Active Tab Listerというアプリ名でリリースしました! 良ければ使ってみてください〜

セキュリティの講義

午後からは様々なセキュリティリスクや、攻撃手法(XSS, SQL Injection, セッションハイジャックなど)について学びました。今後は、脆弱性が生まれてしまうコードは書かないように気をつけていきたいです。

7日目 8/20(火)

認証の講義

午前中は認証の講義で、自前で行う古典的Cookie認証やOpenID Connectなどついて学びました。

OpenID Connectのよくない実装例と、推奨する実装例として以下のようなものがあります。

よくない実装

推奨する実装

講義で学んだ重要なことを要約すると、

ライブラリを選定できる知見が必要

途中で株式会社fluct COO 望月さんのLTがありました

内容をまとめると、

インフラの講義

午後はインフラの講義で、Application Load BalancerやCI/CDについて学びました。講義を受けて、後半のチーム開発ではCI/CDを回して動く状態を継続し小さいスプリントを回していきたいと思いました。

後半戦のチーム開発

そして、前半の講義が終わってからは学んだことを全力でアウトプットするチーム開発が始まりました!

チーム発表

この日の最後にチームメンバー発表があり、チーム開発を本格的に始める前に事前課題が1つ与えられました。 その内容は、 「チームのSOULを決めてくること!」 でした。

SOULとは

💡
チームの「価値観」「考え方」「想い」などを表すもの SOULを共有、形にして悩んだときに立ち返ることができるようにする

というものです。

SOULを置く意味

SOUL決め

ご飯を食べながら、全員がどんな人になっていきたいのか、どのような思いを持っているのか本音で言い合うことでメンバーみんなの見る方向性が明確になりました。僕は「多くのユーザーの方に幸せ・楽しい・便利と思ってもらえるサービスを提供していきたい!」と思い中心にあるということを話しました。

みんなが持つ共通の思いを言語化していき、最終的に僕たちのチームのSOULは、「世の中のスタンダードに」に決定しました。

また、モラルはわきまえて発言(相手の意図を汲み取る前に否定し強い発言をしないなど)しつつも、まずは自分を信じて考えを伝えることを妥協しない姿勢は大事なことで、お互いを尊重し合えるチームは良いチームだなと思いました。

チームの開発方針

サポーターの方の提案で、実際の業務で徹夜はしないしTreasureもインターンとはいえ、毎晩夜遅くまで開発をして体を壊して欲しくないという考えの元で、僕たちのチームは10時〜18時の決められた時間の中で集中して成果を出そうということを意識して進めていくことにしました。

与えられた時間の生産性を最大化するために、僕たちのチームは最初に、KPTを意識して現状分析し、次に行うべきことを明確にして開発の進め方をブラッシュアップし続けていこうと決めました。KPTとは、Keep(良かったこと)・Problem(現状の問題)・Try(意識していくこと)から構成される振り返り手法の1つです。

また、各々が認識した課題は全員が把握できるように、チームメンバーが見ることのできる日報に書き、日々の課題を可視化したり、毎朝行なったスタンドアップ・ミーティングで共有していました。

進捗や現状の進み具合は、2時間おきに報告し合い、進み具合や各々の担当箇所を考慮してペアプロしたりしていきました。

それでは、日々どのような振り返りをし、得た気付きを元にどのように行動を変化していくことができたのか対比しながら書いていこうと思います。

8日目 8/21(水)

これまでの講義内容に関する補講

午前中には、これまでの講義で質問が多かった部分に対して補講が行われました。

アイデア講義

午後からは、価値あるプロダクトのアイデアを考える方法についての講義がありました。 アイデア講義の最初に、成功しているソフトウェアの特徴はどのようなものがあるのか紹介がありました。

成功しているソフトウェア

アイデア出しの手順

その後、以下の手順に沿ってアイデア出しを進めていきました。

時流ワークショップ

  1. たくさん「時流」を洗い出す
  2. 適切な粒度に揃える

アイデアワークショップ

  1. 考える領域を一つ決める
  2. 領域にいるプレイヤーを洗い出す
  3. 考えるのみ使う時流を選ぶ
  4. 領域 × 時流をかけ合わせて「その領域で起こっていきそうな事象」を考える
  5. プロダクト案を考える

アイデア出しでのKPT

Keep

Problem

Try

Team Geekはチーム開発におけるノウハウが非常に多く詰まっているのでオススメです✨

9日目 8/22(木) チーム開発初日

まずは、昨日の反省を踏まえて、再度アイデア出しを行なっていきました。何度か領域選定からプロダクト案の選定までのサイクルを回したのち、全員が納得できるアイデアが固まってきました。

そして、プロダクト案をより固めていくためにホワイトボードにターゲットや、必要な機能などを洗い出していきました。

プロダクト案を固めている様子
プロダクト案を固めている様子
必要な機能の洗い出し
必要な機能の洗い出し

チーム開発初日でのKPT

Keep

Problem

Try

振り返り

10日目 8/23(金) チーム開発2日目

アイデアが固まり、プロダクト案を実装フローに落とし込んでいく段階になりました。

行なったこと

今回開発する「eeNotes」というアプリについて

eeNotes
eeNotes

一言でいうと

あなたの書いたノードが価値を得る!ノート投稿型シェアリングサービス

ターゲットユーザー

ニーズ

特徴

SNS的に公開できる

マーカー

投稿

マーカーとは、ノートの本文をドラッグ&ドロップしたら以下のように強調表示され、右の一覧画面にある「ノートに追加ボタン」を押すとノートに挿入されるというものです。

マーカーの動作画面
マーカーの動作画面

技術選定で意識したこと

チーム開発2日目でのKPT

Keep

Problem

Try

学んだこと・考えたこと

DB設計の様子
DB設計の様子

8/24,25(土日)

axiosでGET,POSTする際にはSwagger Hubを見ることで、APIのエンドポイントやResponseの形式が一目で分かるため、すごく便利でした。 また、サーバーのAPIが立つまでにSwaggerHubのモックサーバーを叩くことも出来たので、フロントとサーバーサイドをスムーズに繋ぐために動作確認することもできて良かったです。

11日目 8/26(月) チーム開発3日目

この日から、コードをガンガン書いていきました。 最初はフロント2人・バックエンド3人の構成で僕はフロントエンドの開発を始めました。

行なったこと

中間課題のフィードバック

この日は、中間課題のフィードバックがありました。

などのことを話していて、疑問に思ったことは掘り下げて聞いていたら1時間くらい経っていました😇

丁寧に答えてくださりありがとうございました!!

チーム開発3日目でのKPT

Keep

Problem

Try

学んだこと・考えたこと

12日目 8/27(火) チーム開発4日目

行なったこと

最終的に「マーカー」という言葉になったのですが、開発の初期は呼び方が曖昧でした(付箋・しおり・ハイライト・クリップボード etc.)。

また、開発をしていて本当にその機能が必要なのか議論する場面もありました。

その機能本当に必要?
その機能本当に必要?
その機能本当に必要? その2
その機能本当に必要? その2

チームで良いものを作るために大切なこと

チーム開発4日目でのKPT

Keep

Problem

Try

13日目 8/28(水) チーム開発5日目

行なったこと

チーム開発5日目でのKPT

Keep

Problem

Try

学んだこと・考えたこと

14日目 8/29(木) チーム開発6日目

行なったこと

ペアプロ・モブプロについて

ペアプロやモブプロをしていて、うまく実装できてモノが動いた時は、 ハイタッチして喜びを共有したり、モチベーションを高め合うようにしていました (諸説あり??)

15日目 8/30(金) チーム開発最終日

行なったこと

最終プレゼン後

最終プレゼンの後、Treasure生とサポーター全員で3週間を振り返り、一言言う場面があったのですが、3週間の色々な思いがこみ上げてきてとても感慨深い気持ちになったのは今も鮮明に覚えています。

懇親会が終わった後も、チームメンバーやサポーター・Goの講師と最終成果物のフィードバックをして下さった すずけんさんで終電くらいまで、色々なエピソードについてみんなでワイワイと話し合い、本当に別れ惜しかったですが、アツい握手を交わしてオフィスを後にしました。

AJITO
AJITO

チーム開発を振り返ってみて

Treasureを振り返ってみて

まとめると

前半の講義で幅広いWeb開発の知見を広げ 後半のチーム開発では以下の流れ全般を、常にKPTを意識しながら学ぶことで

チームでの、ものづくりの楽しさを改めて感じることが出来ました!

そして、

のイテレーションを高速で回し続けてきたことで問題をしっかり言語化して解決へ導いていく力が、参加前の自分と比べて向上したかなと思います。

開発以外のこと

シェアハウス

遠方から来る参加者のためにシェアハウスを用意してくださり、8/11から過ごしていました。 みんなバックグラウンドが異なり、初日は日付が変わるまで様々な話で盛り上がりました。(ちょうどMacの充電が切れなかったらまだまだ話しこんでいたでしょうw)

Vue Nativeを書いていた方や機械学習周りも強い方、CG系のスキルも凄い方まで各々でした。 みんなのやってきたことを話すのは、知らないことが知れて有意義ですね。

途中でVGクルーの方も加わり計8人で毎日賑やかに楽しい日々を送っていました。燻製を毎日作っている人も入れば、置いてあるスピーカーでベートーヴェンを毎朝かける文化が生まれたりw 美味しい燻製を作るためには、いかに水分を抜くかがコツらしいです。

毎朝ベートーヴェンがかかるスピーカー
毎朝ベートーヴェンがかかるスピーカー

3週間一緒に過ごしていて幅広く知見が広がったように感じています。仲間たちと一緒って最高でした!

15時の差し入れ

インターン期間中は、毎日クルーの方が差し入れをして下さりました!バラエティ豊富で、どれも美味しかったです!

クレープ
クレープ
ふわふわドーナツ
ふわふわドーナツ
わたあめ
わたあめ
みんな大好きラムネ
みんな大好きラムネ

VGクルーさんのサポート体制

Treasureではサポートがとても手厚く、僕たちが困った時・迷った時・どうしたら良いかわからない時に一緒に考えたり、解決の糸口になりそうな考え方を幾度となく示してくれました。

チームとして納得感をもって開発するための手助けやアイデア出しや各々のタスク振りの流れを効率化するためのアドバイス、技術的には実装に対する多面的なアプローチをしていただいたおかげで 多くのこと吸収し続けることが出来ました。

最後に

VGクルーの方々・TAさんには、事前課題から始まり、8月の3週間の間最大限サポートしてくださり本当に感謝しています!そして、この8人で一丸となってチーム開発していくことができて本当に良かったです!!

サポートしてくださったみなさんと次に会うときには、今回の学び・経験を活かしてより成長した姿を見せられるように頑張っていきます!!

最後になりますが、一緒に学び合ったTreasure生・3週間共に生活したシェアハウスのみんな・一緒にeeNotesを作ったチームメンバー・本当にありがとうございました❗️

最高の夏の思い出
最高の夏の思い出

SHARE

スポンサーリンク