2019年の振り返りと2020年
メモ程度にざーっと振り返ります。
2019年振り返り
エンジニアリング
インターン
8月、9月にかけて参加した就業型インターンでは多くのことを学ぶことができたけど、一番の気付きは自分の実力の低さだった。
実際に働いてみてベンチャーのような環境では自分が思っていた以上にできないことを知れて、天井が大きく開けた感じがした。とても良い刺激になった。
アルバイト
3月で終わってしまうのが悲しい。
自分達の納得いく成果を出して終わるしか無い。
ハッカソン
チームのみんなが納得のいく動く成果物を作れてよかった！！
それぞれ得意なことがあって、バランスの良いとても良いチームだった。
ハッカソンで最も大事なことは睡眠。
ICT演習
9月の終わりからPWAを作りはじめて超楽しくなった。
反省点としてはプラットフォームを越えたマネジメントが必要なこと。来年はそこら辺も気にして活動していきたい。
研究
とにかく辛かった記憶しかない。原因の大半はかけた時間に対して何もできていない虚無感。7月辺りからテーマに対するモチベも消え失せてきて、作業も中々進まない。年末は本気で退院を考えた。
就活
11月から本格的にスタートして、12月末に無事に終わることができた。
3/4社に内定を頂いた。就活の中で考えが色々変わったり、最後は悩んだが、自分の納得行く会社を選択できたと思ってる。
早く働いてプロダクトを成長させていきたい。
アウトプット
アウトプットの力を知れた年でもあった。
インターンのブログを書いたら予想以上の反応を頂いたり、サマーインターンLT会で数百人の前で登壇するチャンスを頂けたりなどなど、チャンスが増えることを知れた。
2020年
とても悩ましいが、親や周りの方々の意見を聞いた結果、もう少し大学院生活を続けようと思う。
両親に生活を助けてもらっているが、本来大学院まで行くとは想定してなかったり、高校生の兄弟も二人いるので結構切り詰めているっぽい。
4月から働いたほうが家庭的に経済面では嬉しいけど、小さい頃から物事を途中で投げずにこれまで教えられてきたし、そうやってきたので、もうちょっと耐えて修了してやろうかなと思った。
高度ICT演習・函館スイーツプロジェクトのWeb班の話
はじめに
この記事は FUN part2 Advent Calendar 2019 3日目の記事です。
3日目だけ空いていたので書くことにしました。
今日のメイン記事はkmdkukの テック系Podcastのススメ です。
さて、本記事の内容を要約すると、Webアプリ開発に興味がある人は函館スイーツプロジェクトで一緒にやりましょう！というお話です。
僕は現在M1で、函館スイーツのWeb班で活動しています。
高度ICT演習とは
公立はこだて未来大学で月曜の4・5限に活動している開発演習です。
学部1年生から修士2年生までの希望者が集ってチームで色々なプロダクトを開発しています。
2019年のプロジェクトは以下5つのプロジェクトがあります。
- 函館スイーツ
- はこだてマップ＋
- Fintech
- お魚日和
- クラウド
函館スイーツプロジェクト
みなさん「函館スイーツ」って聞いたことありますか？
実は函館市にはおいしいお菓子屋さんがたくさんあるのですが、観光客や函館市民にあまり認知されていません。
函館スイーツプロジェクトでは、「函館スイーツ」をITの力で広めて、函館市を活性化させる取り組みを函館市と函館スイーツ協議会と連携して行っています。
函館スイーツでやっていること
函館スイーツでは、「あまはこ」というモバイル向けアプリを開発しています。
トップ画面ではスイーツを一覧で見ることができたり、売っているお店を確認できたりします。画像は開発中のWeb版の画面です。PWAという技術を使って、ネイティブアプリライクに「インストール」して使うこともできます。
プロジェクト全体では、iOS, Android, Web (PWA) の3プラットフォームで開発しています。
なぜWebで作るのか
1. 早くリリースして、多くの人に使ってもらいたい
iOS版あまはこは2018年12月にApp Storeへリリース申請を出したのですが、マーケティング要素が強いかつユーザインタラクティブな機能がないという理由でリジェクトされてしまいました。Apple、許せませんね。そのため、現在は学部生が主体となって、新機能を開発しています。
Webの話に戻りますが、Web班ではあまはこ本体ではなく、スイーツデータを管理する裏方のアプリを作っていました。
しかし、函館スイーツプロジェクトは設立3年目という背景があり、スイーツ協議会の方もとりあえずリリースしたいねという思いが強まってきていたので、ちょうど夏休みが終わる今年の9月の終わりごろからWeb版のあまはこも本格的に作ろうと思い、開発をはじめました。
Webであれば、リリースの申請をする必要がなく、デプロイすれば全プラットフォームで使うことができます。
2. 使ってもらう敷居を下げる
みなさん、外出先のお店などでアプリの広告を見たときや、店員さんに進められたときにその場でアプリをインストールしますか？
僕はあまり気が乗らない派で、めんどくさいですし、通信量を気にする人も多いかと思います。
Webアプリだと、例えばQRコードを置いておけばインストールせずに見ることができるので、あまはこがどんなアプリかだけでも知ってもらう機会が幾分か上がるのではないかと考えています。
3. ネイティブアプリに誘導したい
じゃあネイティブいらないじゃんと思うかもしれませんが、ヌルヌル動くUXなど、ネイティブの良さもあります。
PWAではネイティブアプリのインストールバナーを出して誘導することもできます。
まずはPWAで見てもらって、もっと使ってほしいユーザにはネイティブアプリをインストールして使ってほしいなという策略があります。
Web班のメンバー
現在は @wakeupsloth (僕) と @kazuma_0129 の二人でWeb版あまはこを開発しています。
函館スイーツ全体だと30人くらいはいるのですが、現状Webはあまり人気がない状態で寂しいです。
しかも@kazuma_0129 は来年の3月に卒業してしまうので、春からは僕一人になってしまいますね。😇
どうやっているのか
GitHubのIssueからやりたいタスクを選んで進めています。
10月ごろは二人でずっとペアプロして知識を共有しながら進めていました。
現在はわからないところが出てきたらペアプロしています。メンバーが増えたらモブプロもアリですね。
こんなことやってます
割とモダンな環境で、僕を含めて勉強しながら楽しく開発してます。
興味とやる気があれば、たいしたことは教えられないですが僕のこれまで学んだ技術をペアプロなりモブプロで教えながら一緒にやっていきたいなと思ってます。
使っている技術
- Progressive Web Apps (PWA)
- React
- TypeScript
- Redux
- Ionic5
開発中のアプリ
このリンクから確認できます。
モバイル用のビューを先に作っているので、ブラウザの「検証」タブからスマホの画面で見てみてください。
開発中のレポジトリ
ここで開発してます。気になった方は覗いてみてください。
おわりに
この記事を読んで、PWA作りたい！！面白そう！！やWebの開発経験を積みたいと思った方は @wakeupsloth に連絡するか、月曜4・5限に495教室に話を聞きに来てみてください。
【CATechJOB】CyberAgent Advanced Technology Studioで1ヶ月間インターンしてきました。
9月5日〜30日の1ヶ月間、サイバーエージェントの就業型インターンCA Tech JOBに参加してきました。
CATSという組織で、Webフロントエンジニアとして、WinTicketというサービスの開発に携わりました。
あまり良く知られていないであろうCATSのことや、参加までの経緯から取り組んだタスクなどについて振り返っていきます！
サイバーエージェントってどんな会社？
株式会社サイバーエージェントは、「21世紀を代表する会社を創る」というビジョンをもった、インターネット×〇〇の会社です。
事業領域はインターネットに関連していれば何でもOKで、大きく分けると、メディア、広告、ゲーム、その他色々です。100以上の子会社で構成されていています。若手の活躍を喜ぶ社風で、実際中に入って見てもそれが伝わってきました。
参加までの経緯
3月31日に開催されたキャリアセレクトの逆求人イベントで人事のみねさんとお話したのがきっかけでした。その頃は就業型インターンシップにビビっていたのですが、みねさんに「うちの就業型インターンに来て、一回技術でボコボコにされて成長してほしい」と言われたことが心に響いて、「よし、ボコボコにされてこよう」と参加を決意しました。
その後、人事のななさんと面談してどんな部署で働きたいかを相談したあとに、CATSとアメブロのエンジニアの方と1回ずつ面談して、最後にもう一度ななさんと面談して、最終的にCATSへの配属が決まりました。
私の大学はCA内定者の先輩が多いのですが、先輩方に「CATSはOSSの開発もしてるし技術力ゴリゴリでやばい」みたいなことを聞いて、ネットでCATSを調べても情報が少なかったので、ついていけるのかという不安もありながらインターン初日を迎えました。
CATSとは？🐱
CATSはCyberAgent Advanced Technology Studioの略で、「作るたびに新しい挑戦でサービスを成功に導く」というビジョンのもと、従来よりも早く、いいモノを作るために結成されたCAの中でトップクラスの技術集団です。
ビジョンの通り、使っている技術はとてもモダンで常にワクワクしながら開発できる組織だと思います。Web、iOS、Android、Serverを合わせて40人弱のエンジニアで構成されています。
現在はWinTicketという、AbemaTVの競輪チャンネルと連携してネットで競輪投票ができるサービスを中心に開発しています。先日のCAの総会で、最優秀プロジェクトX賞を受賞していました！おめでとうございます。👏👏👏
CATSはOSSを積極的に公開していく文化もあります。
CATSの歴史🐈
CATSができる前のCAでは、新規事業を立ち上げるたびに、一からチームビルドと技術選定をしていました。しかし、時価総額1兆円に向けて挑戦的な事業が続く中で、従来よりも早く、品質の高いプロダクトを作る必要がありました。そこで、2018年に開発経験や技術ノウハウを蓄積するための組織として、CATSができました。
CATSはエンジニアの組織ですが、デザイナー版CATSのCAFSという組織もあります。
インターンの内容
目標設定 🎯
Tech JOBでは初日にトレーナーの社員さんと一緒に目標設定をしてからスタートします。
私は「新機能を一つ以上実装しきる」という目標を初日に設定しました。
一機能を丸々実装することで、スタイルの実装からロジックまで幅広い実装力をつけられると考えて、この目標を設定しました。
取り組んだタスクの概要 👨💻
大きく分けると3つのタスクに取り組みました。
1，2のタスクは、肩慣らし的なリファクタリングのタスクで、3日目までに修正を終えました。
残りの期間で、レース情報ページの実装に取り組みました。
レース情報ページの実装 🚴♂️
レース情報ページは、カップごとに1〜12レースまでの「予想」、「オッズ」、「結果」へのリンクがまとまっていて、日付ごとにページングされているページです。
これはSEO（検索エンジン最適化）施策の1つで、日付ごとにページを作成することで検索結果の順位を上げる効果が期待できます。
SketchのデザインとKibelaにまとまっていた要件をもとに、実装しました。
実際のページは下記のリンクです。
加えて、これらのページへの導線としてトップページの下部に、レース情報フッターも実装しました。
実装を通して得た学び
クライアントサイドの複雑なデータ整形
レース情報ページに関連するロジックの内部では、予想・オッズ・結果が存在するレースIDをもとに、カード1枚分の単位で必要な情報を1つのオブジェクトにまとめています。
この処理が結構複雑で、正規化されているカップ・レース・競輪場情報から、なるべく無駄な処理をしないで、必要な情報をオブジェクトにまとめるテクニックがとても学びになりました。
また、このロジックを3つのページでそれぞれ書くのではなく、共通化していく考え方や実装力も身につけることができました。
パフォーマンスやコードの設計を考えた実装
プルリクエストを通してたくさんのレビューを頂いたのですが、
その中でも、パフォーマンスの観点では、
といったことを意識できていなかったため、とても学びになりました。
また、コードの汎用性や拡張性の観点に対するレビューやご意見を、色々な箇所で頂けたことで、動くものを実装できれば良いというわけではないという考え方が身につきました。
CSSの実装力
1つのページをデザインを見ながら丸々実装したことで、CSSの実装力がインターン前と比べて上がったことが実感できました。
CSSは一番苦手意識を持っていた部分で、目標設定時に「苦手意識なくしたいね」と、トレーナーのおおつかさんとテックリードのわだまるさんとお話していたのですが、無事、苦手意識がなくなって良かったです！インターンを通して一番伸び率が高かった部分だと思っています。
自分の考えを伝えることが大事
レース情報ページを実装している最中に、仕様が決まりきっていなかったり、実装が難しい点などをデザイナーやビジネスの方に相談する機会がたくさんありました。
このようなときに、ただ現状を説明するだけではなく、現状を踏まえて「このようにしたい、こうした方が良いと思う」といったように自分の考えも合わせて相談すると、その後のコミュニケーションが円滑に進むと実感しました。
1ヶ月間CATS Webチームで働いた感想
超フレンドリーなチーム
初日までは、しばき倒されないか心配してたのですが、みんなフレンドリーで話しやすい方ばかりだったので、すぐに馴染むことができました。
特にトレーナーのおおつかさんは、年が近いし優しくてとても相談しやすかったです。他の方々も、気になったりわからないことを聞いたら丁寧に答えてくれて、最高のチームでした。
コードレビューがとても丁寧
プルリクエストを出したらチームの複数の方々がすぐにレビューしてくれてとても良い環境だと思いました。細かいところまで見て頂けて、多くのことを学んで吸収することができました。
私も自分のタスクをやりながらPRが出たらパパっとレビューできるくらいの実力を早くつけたいです。
開発環境が超モダンで開発しやすい
私のように経験が浅くても、プロジェクト構成全体をすぐに理解できて、開発できる環境が整っていました。
ディレクトリがわかりやすく分割されていたり、cats-oss/scaffdogを使ってディレクトリのテンプレを作成することができて感動しました。
コンポーネントの実装はStorybookでドキュメント化されていてとてもわかりやすかったです。
APIの型はgrpcの定義ファイルをprotobuf.jsを使用してTSに変換したファイルを、cats-oss/ts-proto-optimizeを使っていい感じに整形して使っていました。ネストしたEnumなどを取り出してくれるので超オススメです。
コンポーネントのテストは、reg-suitを使ったビジュアルリグレッションテストを採用していて、見た目の差分でテストができてすごく便利でした。（丸の数がえぐかった）
そのほか
シャッフルランチ
人事の方＋学生＋エンジニアの方のシャッフルランチも複数回設定して頂けました。
普段食べられないような美味しいごはんを食べながら、他の学生のやっていることや、他のサービスのことを聞くことができて楽しかったです。
最後のシャッフルランチでは、人事の苑子さんがオシャレなイタリアンレストランに連れて行ってくれて、テーブルマナーまで教えてくれました。笑
今日のランチはマダムがいっぱいいるイタリアンでテーブルマナーを学んできましたw#catechjob pic.twitter.com/Ir65oQVDlf
— はしごだかのゆうた (@Wakeupsloth) September 26, 2019
交通費・報酬・宿泊
交通費は全額支給して頂けたので道民の私にとっては非常に助かりました。
報酬は時給1,500円で、ありがたやという感じです。
宿泊は、アベマタワーから徒歩5分くらいの距離にある会社のシェアハウスを貸して頂いて、地方から来た他のインターン生や社員さんと泊まっていました。一人一部屋あるし、作業部屋やラウンジもあってとても過ごしやすかったです。出勤が徒歩5分なのも最高でした。
残念ながらこのシェアハウスは9月末までの契約だったので、次からはマンスリーマンションになるみたいです。
おわりに
1ヶ月間働いてみて、とても楽しかったです！
WinTicketチームや人事の方々をはじめに、関わっていただいたすべての方々に感謝の気持ちでいっぱいです。 🙏
本当にありがとうございました！
Wantedly, Inc.のサマーインターンに参加してきました。
8月5日から8月16日の2週間でWantedlyのサマーインターンに参加してきました！
夏休み序盤からとても楽しくて、やり甲斐があり、学びのある充実した2週間を過ごすことができました。
学びや思い出の記録と、これからWantedlyのインターンに参加する方や、Wantedlyに興味がある方へインターンの雰囲気を伝えることを兼ねて、インターンの内容をまとめます。
Wantedlyってどんな会社？
Wantedlyは”シゴトでココロオドルひとをふやす”ために、人と企業の出会いを生み出す「会社訪問アプリ」Wantedly Visitと、名刺管理をきっかけとして、人と人のつながりを将来持続的に使える資産へと変える「つながり管理アプリ」Wantedly Peopleという2種類のビジネスSNSを開発・運営している会社です。
ミッションの”シゴトでココロオドルひとをふやす”とは？
このミッションをWantedlyでは、”没頭することによって成果を出し、成果によって成長を実感する”と定義しています。”没頭”とはフロー状態のことで、時間や食事を忘れるほどに熱中して作業するようなことです。”仕事に没頭する”→”成果を出す”→”成長を実感する”というサイクルを繰り返すことによって、AIやロボットに奪われない仕事を持ち、経済的・精神的に自立した人を増やすことがWantedlyのミッションです。
インターンの内容
参加したコース/なぜ参加したのか
フロントエンドコースに参加しました。
参加した理由は、大きく分けると4つあります。
- 最近触っているReactやフロントエンドが好きで、今年の夏は就業型インターンでフロントエンドの技術力を伸ばすことを目標にしていたから。
- 会社の価値観が面白そうだと感じたので、実務を通して感じてみたいと思ったから。
- 他社のインターンの都合で、8月5日から8月16日のインターンを探していたところ、第1タームの期間が丁度ピッタリだったから。
- サポーターズの1on1面談イベントで人事の竹内さんから熱烈なお誘いを頂いたから。
何をやったのか
Wantedlyのインターンは完全就業型です。取り組むタスクはすべて実際のプロダクトに直結します。
僕は、Wantedly Visitの新機能開発をしているチームにジョインして、企業ユーザが使う募集作成フローのリニューアルに関連するWebフロントエンドのタスクに取り組みました。メンターはインターン生1人につき1人ずつ付いて頂けます。僕のメンターは原 剛士さんでした。原さんには、僕の希望に沿ったタスクのアサインや、困ったときの相談、1on1面談などインターン中における様々なサポートをして頂きました。
使用した技術は、React, GraphQL (Apollo client), styled component, TypeScriptなどです。具体的には下記のようなタスクに取り組みました。
募集作成フローで新規実装されたUIコンポーネントをWantedlyのデザインシステムに移植
最初はソースコードを雰囲気を把握するために、このタスクに取り組みました。
デザインシステムとは、社内の様々なプロダクトで共通のUIコンポーネントを使用できるように、汎用性の高いUIコンポーネントを集めたライブラリのことです。（Material-UIのようなコンポーネントライブラリの社内バージョン）
一見すると大したことないタスクだと思われますが、僕にとってはかなり難しいタスクでした。難しかった点の1つは、コードを理解することです。普段自分が書いているコードよりも複雑で規模が大きかったので理解するまでに時間がかかりました。実務を素早くこなすには、コードリーディングのスキルがとても重要だという学びを得ました。また、デザインシステムは、利用する開発ユーザが便利にコンポーネントを利用できるように、わかりやすいpropの命名や汎用性の高い実装が重要だということを学びました。
新機能のためのルーティングの追加と、追加したルートをWantedly社員だけが閲覧できるように制限する機能の実装・ユニットテストの実装
2つ目のタスクは、新機能用のページを作ってモックAPIを叩くという内容でした。この実装はすぐ終わったものの、実装したページが一般ユーザに見られると良くないので、Wantedly社員のみが閲覧できるように制限するコンポーネントも実装しました。加えて、閲覧制限の機能を保証するテストも実装しました。
このタスクで印象的だったことは、リーダーの森脇さんにペアプロで詰まっていた実装のやり方を教えて頂いたことです。ユニットテストでログイン情報のモック化に詰まってしまい相談したところ、VSCodeのliveshareを使って、丁寧にスマートな実装方法を教えて頂き、すごく感動しました。
非公式ライブラリapollo-react-hooksを先日公式リリースされた@apollo/react-hooksへ移行して影響を調査
先日、@apollo/react-hooksがリリースされたことで、apollo-react-hooksがdeprecatedになったので、移行するタスクをやりました。
しかし、useQueryのloadingが常にtrueのまま更新されないというバグがあったので、マージは見送りとなりました。
デザインシステムにRange Slider（始点と終点を指定できるスライダー）コンポーネントを新規実装
最後のタスクは、始点と終点を指定できるスライダーコンポーネントの実装にチャレンジしました。残念ながら時間が間に合わず、最後まで実装し切ることができなかったのが心残りです。このタスクを通して、普段当たり前に使っているMaterial-UIなどのライブラリの凄さを実感することができました。
色々な会議
社員さんと同様に、様々な会議に参加しました。 毎週月曜日に開発の各チームの進捗を報告するDeveloper's Meeting、毎週金曜日に社内全体で進捗を共有するDemodayをはじめに、チーム内のスプリントレトロスペクティブや、スプリントプランニング、新機能のUI/UXの草案をデザイナーさんが発表する会議にも参加させて頂き、開発以外の社内の雰囲気も掴むことができました。
そのほか
勉強会
Wantedlyでは社内勉強会が活発で、曜日ごとに、マイクロサービス, 、iOS, Go, フロントエンドの勉強会が毎週開催されています。
僕はフロントエンドの勉強会に2回参加しました。雰囲気はとてもフランクで、気になった記事を共有してみんなで読むという感じでした。最新の技術動向にキャッチアップしながら、わからないことも気軽に聞けるので、とても良い環境だと思いました。
交流ランチ
インター生交流ランチ、エンジニア社員との交流ランチ、全社シャッフル交流ランチで業務では関わっていない社員さんやインターン生とたくさんお話することができました。他のコースのインターン生が取り組んでいる内容や、社内で使っている技術についてのコアなお話をたくさん聞くことができて楽しかったです。
ランチはお弁当の日もありましたが、大体は白金台のお店に行きました。白金台はオシャレで高級なお店が多くて、1,200円以上が当たり前みたいな世界だったので金銭感覚がちょっとバグりましたが、美味しいご飯を毎日食べられて幸せでした。
待遇
募集要項にも書いてありますが、日給は15,000円で、往復の飛行機代も支給して頂けました。
宿泊はAirbnbで民泊を用意して頂き、遠方から来た4人（途中から2人）で同じ家に泊まっていました。お互い何をやっているか話したり、一緒に夜ご飯を食べに行ったりできてとても楽しかったです！
また、初日に報酬から5万円を先払いして頂いたのがとても助かりました。もし前払いがなかったら、あんなにお店でランチを食べれなかったと思います笑。
おわりに
就業型のインターンは初めてだったのですが、今回のインターンで一番実感したのは、自分の技術力がまだまだだということです。
Wantedlyのエンジニアは、今の僕が持っている技術力なんて当たり前で、平均的な技術力が高く、さらにその中で尖った強みを持っている方々ばかりでした。
このようなすごい方々と一緒に仕事ができるように、頑張っていこうと思います。
メンターの原さんをはじめ、Wantedlyのみなさん、2週間、本当にありがとうございました！！
README
自己紹介
私のことを全く知らない人がこのブログを訪れるのかはわかりませんが、一応自己紹介をします。
北海道で情報科学を専攻している大学院生です。
将来はエンジニアを目指しています。
最近はWebフロントにハマっていてReactを使って開発しています。
学生主体の開発アルバイトにジョインしていて、実際に使えるプロダクトを作るために日々奮闘しています。
ちなみに、IDのwakeupslothは大好きなLiSAの曲から取っています。
Twitter: @wakeupsloth
本ブログについて
経緯
きっかけは周囲の学生を見ていたり、企業の方と話していて、自分がどんなことをしているか発信することは重要だと思ったからです。
最近はインターンのESなどでもブログやQiitaなどのURLを書く欄が当たり前にあるので、何も発信していないとそれだけで周りから一歩遅れを取っているように感じます。
エンジニアを志望している身として、日々の活動や感じたことの共有、自分の振り返り用の日記としてこのブログを活用していこうと思います。
何を書くか
活動日記
イベントや研究、開発アルバイトのことについて書きます。
技術ネタ
技術系のことについてはQiitaもやっているので、どちらに書くのかを内容によってうまく線引したいですね。
ブログ、始めます。
ブログを作ろう作ろうと思ってたら、今年が半分以上過ぎてました。
色々アウトプットできたらと思います。
あ、ブログアイコンください。
