ファーストキャリアとしてのNuxt.js
エンジニアとして最初に使ったフレームワークがNuxtだったことは、総合的には恵まれていたと思います。
未経験が現場に放り込まれて、何度もつまずいたポイントはありましたが、それらを乗り越える度にエンジニアとしての総合的な基礎力を養えた実感があります。
同じ早大の文系からエンジニアになった知人たちは、Angular.jsやJava等勢いを失いつつある技術で開発することになり、「もっと将来性がある技術を扱いたい」と不満を溢していました。キャッチアップにも苦労したようです。
今イケてるとされていて、「学習コストが低い」(=「easy to start」)Nuxtが最初の使用技術だったのは幸運な方だった方なのではないでしょうか。
Nuxt.jsで学べたこと
モダンWebの共通項
Nuxtを通して、モダンWebの重要な項目を実際の開発の中で学ぶことができました。
「コンポーネントベースの開発」「単方向データフロー」「SPA(シングルページアプリケーション)」「SSR(サーバーサイドレンダリング)」「仮想DOMによる高いパフォーマンス」「Firestoreと組み合わせたサーバーレス開発」「Typescript導入」etc.
ES6
NuxtではES6以降追加された、JavaScriptの新しい文法を前提としたコードを書くことが求められます。
const・let,async await、アロー関数、Class等、ES6の記法を身体知として吸収できたことは大きな財産となりました。
CSS
Nuxtの特徴の中では影に隠れがちですが「CSSが書きやすい」のは大きな長所だと思います。
幸運にも、職場にデザイナー兼フロントエンドエンジニアの方がいたことから、「CSSやScssの実践的な書き方」 や「CSS設計(BEMやFLOCSS等)」、「セマンティックWeb」をしっかりと教えてもらうことができました。
敬遠されがちなCSSへの苦手意識を払拭し、むしろ自信を持てるようになったことは有意なアドバンテージだと感じています。
グッバイNuxt
しかし、次第にエンジニアとしての成長に大きな壁を感じるようになりました。曲がりなりにもプロダクトのコンポーネントやページの実装を任せてもらえるようになりましたが、**「きちんと原理原則を理解してコードを書けていない」**という感覚から抜け出せませんでした。
特に、データフローやモデルを実装する中で顕著な弊害となりました。いえ、正直なところそれらの部分のコードリーディングにも支障がありました。
「Nuxt独自の記法にはなんとかキャッチアップした」ものの、「それ以前のエンジニアとしての土台が十全でない」歪な状態で開発に参加したのがボトルネックだったのではと。恥じ入るばかりです。
Nuxtは「easy to start」ではあるものの、それ以上ではないというのが私の所感です。
ハローReact
そんな中目に入ったのがこの記事(『ReactとVueのどちらを選ぶか』)です。まさに、当時の自分の焦燥感を言語化してくれたような記事でした。しかしいきなりReactに飛びつけたわけではなく、「Nuxtでさえ不完全なのに、まして学習コストが高いとされているReactなんて到底無理ではないか」と一歩踏み出す勇気が出ませんでした。
ある日、いくつかシンプルなLP作成の依頼があり、うち一つにGatsby.jsのStarterを使ってみました。これを機にReactとGraphQLを学んでみたところ、「きちんと理解した上でコードを書いている」という心地良い実感を得ることができました。学習コストが高いと言われるReactとGraphQLですが、そのような印象hは受けませんでした。まず、資料が体系的かつ豊富なので、一つ一つ丁寧に理解を積み上げていけます。また、独自の記法が多いNuxtに比べてReactはより純粋なJavaScriptに近く、JSの基本を押さえているならむしろスムーズに理解できます。
また,GraphQLにも深く感動しました。
Nuxtでは外部からのライブラリやコンポーネント等が入り組むと、仮想DOMのデータ構造を追うのが辛かったです。「なんとなく勘をつけてはブラウザの検証ツールとconsole.logで何度もTry&Errorを繰り返す」というやり方に頼るしかなく、時間が無限に溶けました。一方GraphQLは一度学ベばデータ構造を明瞭に理解することができます。GraphQL playgroundという使いやすいツールも提供されており、勘とconsole.logに頼らずデバッグできます。
Reduxによるデータフローも、まだ公式チュートリアルの三目並べゲームを作ってみただけですが、個人的にはVuexよりしっくりきそうです。
「simple」と「easy」の違い
ReactとNuxtの違いは端的には「simple」と「easy」ではないかと思います。
「simple」と「easy」は似て非なる概念であり、Reactは「easy」ではないが「simple」です。
名著『りあクト！ TypeScriptで始めるつらくないReact開発 第2版』から引用します。
simple」と「easy」、日本語ではよく混同して使われることもありますが、似て異なる概念です。現実の場においては両者が並び立つのが難しい場面が往々にしてあります。Reactとよく比較されるVueは「easy」なフレームワークと言えるでしょう。入門者のことを考慮して敷居が下げられていて、段階的に複雑なやり方にステップアップできるような作りになっています。しかしそれは同じことを実現するのに唯一の正解というものがなく様々なやり方が許容されており、原理の一貫性に欠けるという側面を併せ持ちます。いっぽうのReactは「simple」なライブラリです。コンポーネント指向、宣言的なView構築、単方向データフローといった原理が一貫しており、それを遵守するために一見回りくどくコードの記述量が増えるやり方を要求されることも多々ありますが、Reactで正しく開発したアプリケーションは非常に複雑なシステムでも見通しがよくて読みやすく、テストやデバッグがしやすく、メンテナンス性や拡張性が高いものになります。
その人の気質や、エンジニアとして何を目指しているのかによりけりではありますが、私はReactの姿勢を好ましく感じます。
（本記事でNuxtを批判する意図はありません。むしろ感謝しています。エンジニア未経験の状態でいきなりReactだったら、より低いレイヤーで挫折してしまっていたかもしれません。ここまで来れたのはNuxtのおかげです)
Reactを習得するためにやったこと
Reactを習得するための学習記録も記載する予定だったのですが、長くなってしまったので記事を分けます。
⇨『Reactを習得するためにやったこと』
お知らせ
Reactエンジニアを募集している会社があれば是非お声がけください！
できればReactの経験が豊富なシニアエンジニアの元で、力をつけたいなと考えています。
優先順位は技術ですが、事業領域としてはマッチングプラットフォームかメディア系だと嬉しいです。
参考文献
ReactとVueのどちらを選ぶか
React開発効率を3倍にするVS Code拡張機能&環境設定
React初案件獲得までの流れ(学習・案件探し・面接・契約まで)
The Complete React Developer Course (w/ Hooks and Redux)
Universal React with Next.js - The Ultimate Guide
React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版
React.js & Next.js超入門
実践Firestore
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
