フロントエンド初心者が業務を理解するために調査したサイトまとめ

具体的に実施したこと

【前提】

2年目の元バックエンドエンジニアなので駆け出しエンジニアではないです
異動によりフロントエンドエンジニアに配属されました。

【案件のために準備・調査したこと】

• フロンドエンドの体系的な知識学習
  →最低限エンジニア間の会話を理解するため

フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本

• HTML&CSSのProgateレベルの基礎知識習得
  →フロントエンドの基礎部分、ある程度理解できればよい

Progate(プロゲート) | Learn to code, learn to be creative.

• JavaScript学習
  →業務レベルの会話ができるため下記を重点的に理解

JavaScript学習ロードマップ - Qiita

• Node.js
  →JavaScriptだけではなく実行環境である部分を理解するため

Node.jsとはなにか？なぜみんな使っているのか？ - Qiita

• DOM操作
  →JavaScriptで操作するDOMの根本を理解する

文書の操作 - ウェブ開発を学ぶ | MDN

JavaScript超基礎講座！DOM操作を学ぶ | Hypertext Candy

【javascript】DOMの基礎知識について初心者向けに徹底解説！ - tagnote【javascript】DOMの基礎知識について初心者向けに徹底解説！

• ブラウザレンダリング
  →どのように画面描画されているかの基礎を学ぶ

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog

ブラウザレンダリングの仕組み - Qiita

【実際の業務内容】

• ECサイトでいうカゴ〜購入部分の改修

  • 主な技術はHTML/CSS・JavaScript

• スクラムを用いて1スプリント1週間で実施

• 実装はモブプロ

• 単体テスト・自動テスト（E2E）も追加で担当

【業務と自己学習の比率は】

• 基本勤務時間は7:45
  →モブプロは4h程度

• 残業時間は月に10h以下（異動先部署がホワイトっぽい）

• ライフスタイルの変化もあり業務外の勉強時間は1h

【実際にどこまで理解できたか？】

• 既存コードであればリーディング・仕様理解は可能

• テスト設計・Autifyへの知見が増えた。

• フロント・バックエンド両面の基礎習得

• スクラム開発を13スプリント実施しコツを掴む

【本当に必要・役に立ったこと・意識したことは何か？】

• ドメイン・バックエンド・社内知識は余すことなくチームに還元した上で誠意をもって無邪気に質問する

• package.json・node.jsなどの環境構築に必要な知識は事前に持っておいた方が良かった

  • 環境構築で手間取る・脳死で言われたことばかりしていると応用力がつかない

原理がわからないまま使っているから応用ができないってこと。

葬送のフリーレン

• スクラム開発が個人的にベストマッチ。参考となる書籍・スクラムマスターに質問して理解度を増やしていくことが円滑なコミュニケーションにもつながった。

• フロントエンド・バックエンドの両面を理解していると、ターミナル・ログ調査・コミュニケーションなどでメリットが非常に多い

今後は何をしていく？

2月からプロジェクトが変わりReactの案件に入ります。
まずはコンポーネント側の理解を深めた上でBFF設計や
ログフォーマット整備・ログ調査の周知などを実施していこうと思います。

• アジャイル開発推進

• 効率の良いテスト設計の追求

  • TDD・E2Eなど

• React・NextのWebアプリケーション理解

• 個人開発

正直、この部分は業務で得た知識が個人開発に繋げられる気がするので非常に楽しみですね。
バックエンド側も好きなのでアーキテクチャ・クラウド知識は常にアップデートしてT型人材を目指していこうと思います。

今後もこのような形で調査したURLを貼っていこうと思うので
似たエンジニアの方・興味があれば応援していただけるとモチベーションにつながります🙇

では、楽しいエンジニアライフを