こつつみ

コツコツ積み上げる

「フロントエンド開発入門」を読んだので振り返る

基本情報

最近のWeb開発ではフロントエンドの技術が必須です。とはいえ、HTMLに追加される新しい要素や属性、増えていくCSSプロパティやルール、年々アップデートされるJavaScriptなど、複雑かつ膨大な情報を整理するだけでも大変です。本書は、初級者向けにフロントエンド開発支援ツールの選び方や使いこなし方、効率的に開発をするための基礎知識が身につく入門書です。複数の支援ツールから「なぜそれを使うのか」選択する基準がわかります。

本の目次

以下は本書の目次です。

  • 1 - フロントエンドエンジニアの歴史
  • 2 - フロントエンドエンジニアに求められるスキル
  • 3 - フロントエンドにおける一般的なツール群
  • 4 - 開発の現場における仕事の進め方
  • 5 - 開発環境
  • 6 - 設計と実装
  • 7 - CI/CDによって受けられるメリット
  • 8 - 解析とモニタリング
  • 9 - チーム開発とWebへの貢献

自分のレベル

まずは自分のレベルを教える。

  • フロントエンドは完全初心者の状態で、Web開発経験のある友達と一緒にアプリケーションを作り始めた
  • Nuxt.js + TypeScript で開発を始めたが分からなすぎて置いてかれている
  • Rubyチュートリアルはやったことある
  • 仕事ではC言語で開発している

仕事がC言語ということもあり(言い訳)、Web開発のフローや使っている技術は聞いたことあるけど全然わかってないで使っている状況だ

導入編

以下のような単語が出てくる

自分の最初の知識と用語の簡単な説明だけ書いておく

単語見て分からないなら購入してみることをお勧めします

Javascriptの仕様を定めている

Ecma Internationalという団体によって標準化されている仕様

以前の認識: 聞いたことない

  • Node.js

非同期型のイベント駆動モデルを採用したサーバーサイド向けのJavaScript

libuvという非同期I/OをサポートするC言語のライブラリなどから構成されており、バイナリ化されて配信されている

以前の認識: JavaScriptのサーバーサイド版ってイメージ

  • npm

Node.jsに付随するJavaScript用のパッケージマネージャー

似たパッケージマネージャーである Yarn は Facebook が開発した

以前の認識: 名前の通りパッケージ管理しているのかな

  • Babel

構文解析を行い下位仕様の構文へと変換をするコンパイラ

新しいJavaScriptの構文を環境に合わせてダウンコンパイルしてくれる

以前の認識: コードで使っていることは知っていたが、何をしているかは知らない

  • webpack

ファイル間のモジュール解決を行い、1ファイルに連結させる機能を提供するモジュールハンドラー

別ファイルの関数などをブラウザが紐付けてくれるとは限らないので必要となる

以前の認識: 知らない

  • Flux と Redux

自分はVue.jsをやっていたので、VuexがFluxライクで作られていることで腑に落ちた

medium.com

以前の認識: 聞いたこともなかった

SassやBEM形式についてはすでに学んでいたため、復習になった

  • Prettier

コードスタイルのフォーマット

以前の認識: VSCodeで使っていた

  • ESLint

ルールを設定することで、ルールから違反したコードを検知することができる

ルールは100以上あり、バグの芽を摘み取ることができる

以前の認識: 名前しか分からない

Mocha, Jest, Karma についてそれぞれ説明があった

以前の認識: Jestでテストを書いていたが、結局テストを書かなくなっている状況

実践編

ここからが本題だ

まずサンプルコードがどこにあるか分からず焦った... 同じような人もいると思うので、リンクを貼っておく

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装|サポート|秀和システム

Reactに移行する流れを順を追って説明してくれているので、躓かずに進めることができた しかし、この本だけではReactは理解できないのでそこだけは注意が必要

JSXやFlux/Reduxについても説明があり概要は理解したが、実際に使えるようになったかと言われると微妙だ (ここは実践編にないためコード上で理解できていない) なので、Reactを使うときにこの書籍を持って一緒に進めるのが良いのだろう。

ESLint, Prettier, Babelなど単語しか知らなかったが、使えるようになった ここが一番実務や個人開発で反映しやすそう、自分もここを個人開発ですぐに設定した。

珍しく(?)技術だけでなく、パフォーマンスについても詳しくかいてあり自分のようなWeb開発初心者には大変助かった。

最後に

上で書いたのは本の一部だけである。他にも解析の方法やチーム開発のことであったり色んなことが書かれている。

この書籍はWebを触ったことない人には難しいので、対象者は少し開発をした人だろうと思う。

フロントエンジニアだけでなく、フロントエンド技術に少し興味がある人、お金をケチって買おうか悩んでいる人は買うのをオススメする。

この書籍に限らず技術書はどんどん買おう!!!!!!!