Next.js+TailWindCSSのランキングページ実装から、学生の開発では得られない経験ができた話

WRITER: internship
このエントリーをはてなブックマークに追加

こんにちは！
6月7日から6月30日までの4週間弱、株式会社CAMのキギョトピチームで「CA Tech JOB」のインターンシップ生として参加しました、上田匡成と申します。
本記事では、ハッカソン等の学生としての開発を多くやってきた私が、フロントエンジニアとして業務の開発を3週間やって気づいたことや大切だと感じたことをまとめています。

 

所属部署について

私が今回所属した部署は、主にWebメディア事業を扱っている「株式会社CAM」で、「新R25」が運営する、企業発の明るいトピックスをお届けするメディア「企業トピ(キギョトピ)」でした。その中の開発チームで、トップページのランキング部分とランキングページを実装させていただきました！

 

インターンシップ参加の目的

サイバーエージェントの働き方や雰囲気を知りたかったことと、メガベンチャーの業務レベルのコードを学びたかったことが主な理由です。
今までハッカソン等のチーム開発は20回以上経験してきたのですが、学生同士で行っただけであり「仕様通りに動くものを作る」がゴールでした。また、ハッカソンが終了したら継続開発をすることもないので「保守性」や「可読性」を高いレベルで考えることもなく、きちんと説明できるようなコードを書けているわけでもありませんでした。
ということからインターンシップに参加しました。

 

インターンシップで取り組んだこと

「企業トピ(キギョトピ)」の記事PVのランキングを表示する部分を担当させていただきました。
主に、トップページのランキング部分と、ランキングページを丸ごと実装いたしました。

 

3週間の作業内容

1週目はPCの設定や環境構築がほとんどを占めていました。
環境構築はさまざまなエラーに苦戦し、2週目の3日目までかかってしまいました。
1週目

  • PCの設定
  • 環境構築

2週目

  • 環境構築
  • トップページのランキングPR作成
  • ランキングページ7割完成

3週目

  • トップページのランキングのコードレビュー対応
  • ランキングページPR作成
  • ランキングページのコードレビュー対応

4週目

  • ランキングAPI接続
  • 環境が壊れたので環境構築
  • ランキングページの最終調整
  • フロント3人、デザイナー1人に最終確認依頼
  • 成果発表LT会

 

フロントエンジニアとして学んだこと

ここでは1ヶ月の開発経験を通して、学生の開発ではなかなか学ぶことができない大切だと思ったことをまとめました。
開発環境としては、Next.js・TypeScript・TailWindCSSを使用していました。

 

i18next

ウェブサイトやアプリケーションを多言語対応するためのツールです。
i18nextの書き方に沿ってコーディングすることで、自動で言語変換してくれます。

 

Open Graph

TwitterやSlackなどのソーシャルメディアプラットフォーム等で、リンク等を共有する際に、どのように表示されるかを制御するプロトコルです。
metaタグに追加することで、表示したい内容を制御することができます。

 

React fragmentの使い所

2つのdiv等のタグをフラグメントで囲っていた場合、フラグメントが外れた際に親にflexが適用されていたら2つの要素が横並びになってしまいます。このような使い方ではなく、フラグメントが外れても全体が1つのタグでまとまるように親に渡すことができれば、エラーを回避しながらもスタイルも維持することができます。

 

ページ遷移時の値受け渡し方法

  • トークン等はcookieに
  • [id].tsxファイルを作成しリンク情報として渡そう

リロードされても同じ状態を保てるかどうかという考え方が大事

 

デザイナーさんとのコミュニケーション

  • 意思を汲み取る
  • 要件が詳しくわからない場合は直接聞く
  • 変更可能かどうかコミュニケーションをとる

 

HTMLタグをきちんと設定する理由

  • アクセシビリティの観点で、視覚に障害がある方が使うボイスリーダー等がサイトをきちんと読み取ることができるようにするため
  • 検索エンジンがウェブページの内容を理解し、SEOの評価を最適化するためにも不可欠

 

まとめ

この1ヶ月間で以下のことを学ぶことができました。

  • 学生の開発では意識しないSEOやアクセシビリティの概念や技術を学ぶことができた
  • コンポーネント化の基準や可読性など、業務レベルのコーディングの概念を学ぶことができた
  • CAMならではの技術や環境やツールを学ぶことができた
  • サイバーエージェントの働き方や社員の方々の雰囲気を知ることができた

 

また、インターンシップ中に色々な方とランチへ連れて行ってくださったり、個人的に気になっていた技術の質問に答えていただいたりしていただきました。

この1ヶ月は、私の人生の中で1番濃い1ヶ月となりました。
ここで学んだことを今後さまざまな形で活かしながら、エンジニアとして頑張っていこうと思います！

私の担当をしていただいたトレーナーさんやメンターさんをはじめ、CAMやサイバーエージェントの皆さん・私に関わってくださった皆さん、ありがとうございました！

仏教学部の学生がサイバーエージェントのFlutter開発に参加してみた件
次の記事
クラウドにおけるコスト管理のためのリソースラベル監視ツールの開発
前の記事