こんにちは、しまです。
今回はCyberAgentが主催するサマーインターン「CA Tech Challenge」に参加してきたので、その時の話を振り返りも兼ねて書いていこうと思います！
CA Tech Challengeとは？
「CA Tech Challenge」は、株式会社サイバーエージェントが主催する2Daysのハッカソン形式のサマーインターンシップです。
概要はこんな感じ。
- 期間：9/26〜9/27
- 参加人数：学生25人?くらい（高専生〜大学院生まで様々）
- 形式：オンライン（基本的にSlackとZoom）
今回僕が参加したのは、以下のWebフロントエンド向けのインターンシップです。
なぜ参加しようと思ったか
もともとはCyberAgentの同インターンに参加した人のブログ記事を読んで「面白そう！」と思ったのが最初のきっかけでした。
また僕自身、昨年末に「HTMLって何？」ってとこから学習を始めた身(プログラミング歴1年未満)なので、エンジニアとして就職を目指す上で「今の自分のレベル感を客観的に知りたい」と思ったのも大きなポイントです。
CyberAgentのインターンということで集まる学生のレベルも相当高いだろうなぁという予想で、参加が決まった時はとてもワクワクしていました！
実際のインターンの流れ
事前オリエン
インターンが始まる1週間くらい前に、オンラインで簡単な事前オリエンがありました。
技術的なお話をするというわけではなく、
- インターンに望む上での目標設計
- それに向けてここからの1週間で事前準備すること
- 当日に意識すること
などを個々人でまとめて提出しました。
もちろん、目標を持たずにインターンに参加する人はいないと思いますが、改めて言語化することの大事さを実感しました。
僕が最初に掲げた目標を簡単にまとめるとこんな感じです。
- 他の学生との交流や情報交換を意識する
- エンジニアの方への質問で今後の方針や学習ステップなどを明確にする
- レギュレーションを満たしたアプリを時間内に完成させる
- 成果発表を通して自分のレベルを客観的に知る
1日目
10:00〜 オープニング, お題発表
10時からオープニングが始まって、メンターの社員さんの自己紹介や簡単な会社紹介がありました。
また、今回のインターンのお題もこの時点での発表です。
気になる今回のお題は「番組表」です！
番組表アプリを事前に作ったことある人はほとんどいなかったんじゃないでしょうか？
そういった意味ではみんな平等な条件だったと思います。
お題発表があった後はチームに分かれて簡単に交流や自己紹介を行い、実装に移りました。
11:30〜 技術選定, 実装開始
今回の技術選定としては、Vue.jsを採用し、デプロイ先はNetlifyというシンプルな構成です。
今の勤務先ではTypeScriptを使っているので採用しようか迷いましたが、
- Vue × TypeScriptの経験がない
- ハッカソンで時間が限られているので開発スピード重視
という理由でTSの採用は断念しました。
（挑戦してみても良かったかも...と少し後悔しています🧐）
開発の流れとしては、バックエンド側はAPIが用意されていて、READMEが整備されているリポジトリをForkして個人で開発していくというフローです。
VueCLIで作ったので標準で入っているaxiosを使ってAPIとの通信を行う構成にし、1日目は
- 番組の一覧表示
- 番組の詳細表示
という最低限のレギュレーションを満たす段階まで実装を行いました。
この時点でUIはほとんどできていなくて正直焦ってましたが、僕は夜に著しく生産性が落ちるタイプなので潔く早めに寝ました😂
2日目
10:30〜 引き続き実装作業
2日目はUIの実装が主な作業になりました。
番組表と聞いて皆が最初に思い浮かべるであろう、UIを実装しようということで番組ごとに開始時間と終了時間から高さを計算して、自動で高さが変わるように実装する点に苦労しました。
（JavaScriptで日付の処理がめんどくさすぎた...）
また、VueCLIでアプリを作る際にPWA(Progressive Web Apps)を有効化していたので、PWAを使ってスマホ版の実装も途中まではできたのですが、結局作りきれず・・・
最終的にできたのがこんな感じのUIで、完成度的には悪くないかなといった印象でしたが、色々と悔しさも残る結果でした。
〜13:00 メンターの社員の方と個人面談
実装作業の合間に、メンターの方と15分程個人面談をする機会がありました。
会社のことやWebフロントエンドの学習法などについて相談し、とても有意義な時間でした。
特に、「とりあえず動くだけのコードを書ける段階には来たが、これから先のきれいなコード・実務レベルのコードを書いていく上で設計面などに不安を感じている」という質問に対し、親身に答えてくださり、かなり視界がひらけたような気がします。
ありがとうございました🙇♂️
16:00〜 最終成果発表
ギリギリまでレイアウトの微調整やデプロイ作業をしていたせいで、発表資料を作る時間が少ししか取れずにかなり焦ってしまいました。
正直自分でアピールしたかった部分がまだまだあるなぁと今になって思うので、「自分の考えを適切にアピールしたり、伝える力」も重要な要素だと実感できました。
また、発表が最初のほうだったので、他の学生の発表を落ち着いて聞いてられたのですが、
「レベル高い学生多すぎ！！！」
が率直な感想です（笑）
ただ、レベルの高さを知ってやる気を無くしたというよりは俄然やる気とモチベーションが上がりました🔥
皆さん本当にレベルが高かったですが、印象に残ってる人を簡単に紹介します。
- ニューモフィズムなどの流行りのデザインを取り入れてる人
- 開発前にCDを組んで、成果発表の直前までコミットしてる人
- デザイン経験が豊富で超キレイで使いやすいUIを構築してる人
- ダークモードや多言語対応などのa11yやi18nを意識している人
- Laravelなどバックエンドとの連携にチャレンジしている人 ...etc
一言で「番組表」と言っても、個々人で目の付け所が多種多様で本当に面白いなと感じました。
入賞された方々おめでとうございます🎊🎊
まとめ【振り返り・反省】
最後に良かった点・反省点を振り返って終わりにしようと思います。
- 他の学生や社員さんとの交流で自分のレベル感を知れた
- 期間内に最低限のレギュレーションを満たすアプリを作りきれた
- エンジニア志望学生とのいろいろな情報交換ができた
- デザインや設計が固まっていない状態から、見切り発車で実装した結果、手戻りが発生した。（ハッカソンの性質上、どこまで詰めるかは難しいライン...）
- UIを責務とするコンポーネントとデータを扱うコンポーネントを明確に切り分けたかったが、設計が甘く途中からカオスになってしまった。
- プレゼンテーションなどを通して自分の考えを分かりやすく伝えるという点に課題を感じた
同年代のエンジニア志望の学生とコミュニケーションを取る機会があまりなかったのでとても刺激をもらえた良い2日間でしたし、なにより初めてのハッカソン楽しかったです！
参加された学生の皆さん、メンターの社員の方々、ありがとうございました🙇♂️
今回のインターンのレポジトリはこちら
