CRAIDでブリッジエンジニアをしている入社一年目のAriです。
普段ともに仕事しているセブ在住エンジニアのLawrence Beloさんが投稿した記事を翻訳、加筆したので、当記事で紹介します。
英語を勉強されている方は、ぜひ当記事を日本語で理解した上で、英語記事を読んで頂くと英語の勉強にもなるのでおすすめです。
翻訳元記事(オフショア子会社Full Speed Technologiesの技術ブログ)
新しいことを学ぶのは必ずしも簡単ではありませんが、楽しいことも多いです。
C/C++を使用していたので最初はあまり好きではありませんでしたが、時間が経つにつれPHPでのコーディングにも慣れてきたと感じていたところだったので、別の技術スタックを使用したプロジェクトに取り組むときは心の準備ができていませんでした。
導入
この投稿では、Next.jsと Typescript を使用した私の経験、その過程で学んだこと、およびNext.jsを使用するための準備に役立つことをいくつか紹介します。
これは主に、技術に関する私の個人的な経験に基づくものです。
私が今でも主に PHP を使って作業していることに注意してください。
Next.jsは素晴らしいツールですが、自信を持って使えるようになるにはまだまだ勉強が必要です。
PHPからTypeScriptへ
一部の言語は他の言語よりも簡単に切り替えることができます。
私が大学時代に学んだ最初のプログラミング言語の 1 つは C/C++ で、次に Java でした。 C++ の概念の多くは Java に適用でき、構文もほとんど似ているため、C++ から Java への切り替えは比較的簡単であることがわかりました。
ただし、PHP から Typescript に切り替えたときは、そううまくはいきませんでした。
もちろん、いくつかの類似点もありましたが、多くの相違点もありました。
私が感じた類似点、相違点の中でも主な３つの点は以下のとおりです。
- あらゆるものに型があることに慣れる。
- アロー関数に慣れる。
- 非同期関数に慣れる。
一つ一つ簡単に説明していきます。
あらゆるものに型があることに慣れる。
変数と関数パラメータには、明示的に定義された型が必要です。
その名の通り、Typescript は型と大いに関係しています。
アロー関数に慣れる。
PHPとJS で似ている点の 1 つは、関数の宣言方法です。
PHP では、function add($x, $y)のように関数を定義できますが、JS でも似たように function add(x, y) と関数を作成できます。
ただし、JSには(<関数パラメーター>) => <戻り値> という異なる構文を持つアロー関数があり、多くの場面で使用されています。
アロー関数に関するわかりやすい資料はこちら
非同期関数に慣れる
PHP では、関数を呼び出すとき、関数が返されたときにそのタスクがすでに完了していることを期待します。
JS でも関数はこのように動作しますが、JS では関数にasyncを追加すると、タスクの完了を待たずに次のような結果を返します。
非同期関数について学ぶということは、async、Promise やその他の関連する概念についても学ぶことを意味します。
OOP から関数型プログラミングへ
Next.jsに移行する際に直面したもう 1 つの困難は、関数型プログラミングの使用でした。私は長い間 PHP/Laravel を使っていたので、OOP (オブジェクト指向プログラミング)で考えることにすでに慣れており、問題を解決する必要があるときは常にデフォルトで OOP を念頭に置いて問題を解決しようとします。
ただし、Next.jsは、一般に関数型プログラミングを促進する構造を提供します。
Next.jsが OOP をサポートしていないという意味ではありませんが、少し創造性が必要です。
LaravelからNext.jsを学ぶ時の５つのコツ
デフォルトの Laravel インストールには、Web アプリケーションを開始するために必要なものがほぼすべて含まれているため、Laravel は簡単に入手して使用できるツールになっています。
独自のファイル構造、ORM、および一般的なサードパーティ サービスに対する多くのサポートが組み込まれています。
私が初めてNext.jsを試したとき、Laravel で経験した便利さのほとんどはNext.jsにはありませんでした。 (あるいは、私がまだそれらを理解できていないのかもしれません)
そこで、PHP のバックグラウンドを持つ開発者として、Next.jsを学ぶコツを紹介します。
Next.jsを学ぶコツは以下の5つです。
- Javascriptを勉強する
- Reactへの知識を深める
- Typescriptを学ぶ
- Next.jsと他のフレームワークを比べない
- 試す、調整する、テストする
一つずつ簡単に説明していきます。
Javascriptを勉強する
Next.jsは Javascript フレームワークなので、Next.jsを学ぶにおいて、Javascriptは押さえておきたい基本知識です。
以前にいくつかの JS コードを書いたことがありますが、主に jQuery を使用していました。
私はJSだけで実際に何かを書いた経験がなかったため、JS を「学び直す」必要がありました。
ただし、PHP から来ているので、JS を学習するのはそれほど難しくありません。
JS にはPHPと類似した構文がたくさんあり、どちらもインタープリター言語であり、どちらも動的に型付けされます。
Reactへの知識を深める
Next.js はReactベースのフレームワークです。
Next.jsのドキュメントのいくつかは、少なくともReactの基本的な概念を理解していれば理解できると思います。
私にとっては、このチュートリアルがとても役に立ちました。
Typescriptを学ぶ
Javascript のみを使用して Next.jsでコードを記述することもできますが、時間をかけて TypeScript を学習することを強くお勧めします。
Typescriptでは、コーディング方法を実際に改善するためのいくつかの規律が導入されているので、特に PHPの使用経験が長い方にはおすすめです。
Next.jsと他のフレームワークを比べない
私は、フレームワーク (またはその他のテクノロジー) は、まずその作成者または開発者が学習することを意図した方法で学習する必要があると個人的には考えています。
これまでに他のフレームワークを使用したことがある場合は、物事がどのように機能するか、または物事がどのように行われるかについて、何らかの期待や先入観を持っている可能性があります。
これは、フレームワークの学習方法に影響を与える可能性があります。
これについては私に同意するかもしれませんし、そうでないかもしれませんが、最初に学ぼうとしているフレームワークであるかのようにこのフレームワークを学ぶことをお勧めします。
これを完了したら、他のフレームワークとの比較に進んだり、他のテクノロジーのアイデアをNext.jsアプリに取り入れたりすることができます。
試す、調整する、テストする
「Next.jsと他のフレームワークを比べない」でお話した内容と同様に、最初は何も変更せずに試して、どのように機能するかを確認します。
次に、独自の微調整をいくつか追加してテストし、それが結果にどのような影響を与えるかを確認します。これを何度も繰り返します。
これを行うことで、何が機能し、何が機能しないのかについての一般的なアイデアを得ることができました。
より自由なフレームワーク
私の意見では、Next.js は Laravel ほど堅苦しく指定されている印象がありません。Next.jsを使用すると、より自由に、希望通りに開発できるようになります。
適切と思われる方法でコードを構造化することも、選択したライブラリを使用することも、ライブラリをまったく使用しないこともできます。
Next.jsは、従うべきデフォルトの構造を強制しません。
実際、Next.jsの新規インストールには、非常に最小限の量のファイルが含まれています (node_modules フォルダーを除く)。
経験豊富な開発者にとって、この自由により多くの可能性が開かれます。
しかし、新しい開発者にとって、他のフレームワークがすぐに提供できるさまざまなサービスを組み合わせるのは気が遠くなるかもしれません。
結論:Next.jsは学ぶ価値があるのか?
メジャーな JS フレームワークの傾向を見ると、Next.jsへの関心が徐々に高まっているようです。
他の確立された JS テクノロジーに追いつくまでにはしばらく時間がかかるかもしれませんが、最終的には今以上に人気が高まることを願うばかりです。
将来のプロジェクトでNext.jsを使用するかどうかはわかりませんが、Next.jsと Typescript を使用することで、Web 開発を別のフレームワークやプログラミング言語の視点からウェブ開発を見ることができるようになりました。
技術は移り変わるかもしれませんが、そこから学ぶアイデア、原則、コンセプトこそが本当に重要だと私は考えています。
初心者でも安心！Typescript, React, Next.jsを勉強するのに役立ったサイト
この章では、入社一年目でPHP, Laravelを少し勉強した程度だった翻訳者が業務でTypescript, React, Next.jsを扱うために使用したおすすめのサイトを紹介していきます。
Typescript, React, Next.jsを勉強する上で役に立ったサイトは以下の通りです。
- React で紐解くモダンフロントエンド開発の歴史と進歩
- React公式 (雰囲気を掴むためクイックスタートまで)
- Next.js公式 (Deploying Your Next.js App)
- サバイバルTypeScript (読んで学ぶTypeScriptまで)
これらのサイトに加えて、以下の書籍も購入しました。
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
Typescript, React, Next.jsの基礎をそれぞれ分けて学ぶことができ、経験の浅い私でも困惑することなく勉強することができたので、おすすめです。
