フロントエンドをやって丸 2 年。今年は本当に「エンジニアリング」の視点に入った年でした。この記事で整理して、年末の振り返りの基準点にします。

「動けばいい」から「エンジニアリング」への転換

入職当初は、ページが動けばよかった。今年になって、製品に必要なのはそれだけではないと気づきました：

以前気にしていたこと：この機能は実装できるか
今気にしていること：この機能はメンテナブルか、テストしやすいか、協力しやすいか

具体的な変化：

コードの組織化：すべてのロジックをコンポーネントに詰め込むことから、関心の分離（API 層、状態管理、ユーティリティ関数）へ

ビルドツール：「プロジェクトに webpack の設定はあるが見方がわからない」から、Tree Shaking、コード分割、環境変数を要件に応じて設定できるように

コード品質：ESLint + Prettier を導入し、コードスタイルが統一。単体テストを書き始め、少なくともコアロジックのテストカバレッジがある

今年最も収穫のあった知識ポイント

1. Vue のリアクティビティの原理

Object.defineProperty の仕組みを理解した後、多くの「奇妙な現象」に説明がつきました：

// なぜこれは反応しない？
this.obj.newKey = "value"; // ❌

// なぜこれは動く？
this.$set(this.obj, "newKey", "value"); // ✅
Vue.set(this.obj, "newKey", "value"); // ✅

2. 非同期 JavaScript

// コールバック → Promise → async/await の進化
// async/await がジェネレータ+Promise のシンタックスシュガーである理由を理解
// Promise.all/race/allSettled の違いもわかった

// 並行リクエストを扱う際のツールが増えた
const [users, orders] = await Promise.all([api.getUsers(), api.getOrders()]);

3. パフォーマンス最適化

Lighthouse が日常のツールになった
Chrome DevTools の Performance パネルを見方がわかった
CRP（クリティカルレンダリングパス）を理解した
left/top の代わりに transform/opacity でアニメーションを行う

4. TypeScript

// 「何の役に立つかわからない」から「最高だ」に
// 最大の収穫は型安全性そのものより、IDE のインテリジェントな補完
// リファクタリング時、TypeScript の型エラーが多くの変更漏れを見つけてくれた

まだ習得できていないもの

正直に言うと、一部のものはまだ「知っているが慣れていない」状態です：

• テスト：単体テストをいくつか書いたが、結合テスト、E2E テストの実践はない
• CI/CD：プロジェクトに Jenkins はあるが、設定はあまり理解していない。問題が起きたらインフラに頼る
• パフォーマンスモニタリング：理論上はわかるが、本番のモニタリングシステムはまだ構築していない
• Nginx 設定：変更はできるが、ゼロから書けない

2019 年にやりたいこと

React：現在チームは主に Vue を使っているが、React のエコシステムは強力で、React Hooks の提案は興味深い

TypeScript の高度な使い方：今は基本的な使い方しかできない。高度な型（条件型、マップ型）を深く学びたい

Node.js：完全な BFF（Backend for Frontend）層を書く。スクリプトを書くだけでなく

まとめ

2018 年は「熟練工」から「エンジニア」への転換の年でした。技術は使えるだけでなく、原理を理解し、チームでどう協力するかを知ることが大切です。

2019 年はさらに高品質なコードを書けるようになりたいと思います。