こんにちは、くどあです。

11/16(月)から 11/20(金)の 5 日間、ゆめみさんでフロントエンドエンジニアインターンをしてきました。

インターン中の課題

このインターンではベースとして、Figma のデザインカンプを元に画面を作成するという課題が与えられていました。ただそこまで厳密にやることが決まっていた訳ではなかったので、自分が学びたい・経験したいことを自由にやらせて頂きました。

やりたいと言ったこと

  • コンポーネントの切り出しと管理しやすい設計方法
  • フロントエンド開発でのツール周り(静的解析、自動テスト・デプロイ、その他実務で使用していること)
  • パフォーマンスを上げるための工夫
  • フロントエンドのテストの使い分け(どのようなものにテストを書くのか、または書かないのか)

このインターンでの自分の目標

このインターンでは以下の目標にしていました。

  • 管理のしやすいコンポーネントの設計
  • フロントエンドでのテスト
  • パフォーマンスへの取り組み
  • CSS Framework を使わないで CSS にちょっと強くなる

完成したもの

  • Figma のデザインカンプに必要なコンポーネント
  • TOP ページ(レスポンシブ対応:PC、Tablet、Mobile)

期間内に全て完成しませんでしたが、その分開発手法やデザインの考え方を学ぶことができました。

以下に学んで良かったことを列挙します。

学んだこと

開発手法

  • 今回は簡易的な git-flow を採用しました。featuremasterで管理し、PR をメンターの方にレビューして頂きました。

CSS

  • 思ったところにいかない辛み
  • media query
  • flexbox:超便利!CSS ちょっとわかった気になる!
  • relative, absolute
  • object-fit:正方形画像をトリミングかリサイズするかの判断

設計

  • コンポーネントの切り出し

    以下はシンプルなカードですが、フィードバックを元に正方形の画像や右側のコンテンツをコンポーネント化したり、タグとそれらをまとめたタググループのコンポーネントを作成しました。

    スクリーンショット 2020-11-18 9.59.19

  • ディレクトリ管理

    • 共通の CSS プロパティを外部に外出ししました。 仕様変更の際は一箇所だけ変更すれば良いので、変化に強くなります。

      • media-query

        export const size = (screenSize: string): string => {
          if (screenSize === 'mobile') {
            return `@media (max-width: 767px)`;
          } else if (screenSize === 'tablet') {
            return `@media (min-width: 768px) and (max-width: 1151px)`;
          } else if (screenSize === 'mt') {
            return `@media (max-width: 1151px)`;
          } else if (screenSize === 'pc') {
            return `@media (min-width: 1152px)`;
          }
        };
                  
        export const mq = {
          mobile: size('mobile'),
          tablet: size('tablet'),
          mobileTablet: size('mt'),
          pc: size('pc'),
        };
        
      • max-width

        export const width = (size: string): string => {
          if (size === 'pc') {
            return `max-width: 1152px;`;
          } else if (size === `tablet`) {
            return `max-width: 768px;`;
          } else if (size === `mobile`) {
            return `max-width: 375px;`;
          }
        };
                  
        export const mw = {
          pc: width('pc'),
          tablet: width('tablet'),
          mobile: width('mobile'),
        }
        
    • Template, Modules のようなまとまったコンポーネントを別のフォルダに管理しました。

      folder

静的解析

  • huskyで git hook を扱い、commit の前に ESLint と Prettier が動くように設定しました。

CI/CD

  • Jenkins, Circle CI, AWS CodePipLine

jenkince

  • AWS Amplify

テスト

  • 現場でもフロントはテストを書くとのことでした。
    • ユニットテスト:Jest(主流), ava(並列処理が強み)
    • E2E テスト:codecept.js(自動化)

パフォーマンス

感想

  • 当初の目的であった設計周りの話を実務ベースで学べたのが良かったです。
  • 自分の知らない技術に触れられて知見が溜まりました。
  • 技術だけでなく、考え方(コンポーネントの切り方、拡張性の高いコンポーネント・スタイリング)を知り、次へつながるモチベーションになりました。

お礼

自分のやりたいことをどんどんやらせて頂きました。 レビューや質問などに丁寧に対応して頂いた桑原さん、人事の方、フロントエンドチームの方々に感謝します。ありがとうございました。