40歳を超え、技術的な背景がない私が2週間でフロントエンドフレームワークを学んだ方法

過去 2 週間、事前の知識、経験、指導なしで HTML、CSS、JavaScript の基礎を急速に学習した私の個人的な経験を共有してきました。ただし、私と同じように、フルスタックの Web 開発者になること、または独自の製品を作成できる独立した開発者になることがあなたの目標である場合、これら 3 つの基本的な技術スタックを習得するだけでは十分ではありません。そこで今週は、フロントエンド フレームワークの基本を素早く学び、シンプルなプロダクトを作成するための完全な初心者ガイドを共有します。この投稿に含まれる学習リソースはすべて無料です。

学習を終えた後、このWeb アプリのような Web アプリを作成しました。自分のプロジェクトをデプロイせず、代わりに関連チュートリアルのプロジェクト例を使用することをご容赦ください。ここに私自身のリポジトリがあります。実際、サンプル プロジェクト内のすべてのエフェクトの 90% 以上を複製しました。導入しない理由については後で説明します。ご覧のとおり、これは比較的完全なプロジェクトであり、フロントエンドとバックエンドの通信、フロントエンドのアニメーション設計、ライフサイクル フックの設計、バックエンドのデータ構造の設計、状態管理、ルート管理などの多くの側面が含まれています。リッチ テキスト エディターと tailwindcss もこのプロジェクトに統合し、フロントエンドを非常にプロフェッショナルに見せました。私でもフロントエンド フレームワークの基本をすぐにマスターできるのに、なぜあなたにはできないのでしょうか?

いつものように、最初に私がフロントエンド フレームワークの学習プロセス中に行った寄り道について話しましょう。

フロントエンド フレームワークはたくさんありますが、初心者はどれを選択すればよいでしょうか?

これは初心者、特に独学の初心者にとって最も混乱する質問の 1 つです。これは、あなたの基本スキル、学習経路の選択、学習能力、短期および長期の目標、さらには住んでいる国や地域にまで関わる、非常に個人的な質問です。そのため、標準的な回答を与えることは困難です。初心者は、これらすべての要素の中から最適なオプションを評価するための知識や業界経験が不足していることがよくあります。

フロントエンド フレームワークは、Web アプリの構築時に使用する主要なプログラミング言語と密接に関連しているため、これは重要な問題です。また、あまり人気のないフレームワークを選択すると、関連するコミュニティ リソースを見つけるのが難しくなり、コースを受講したり他のユーザーとコラボレーションしたりするときに制約を感じることさえあるかもしれません。私は長い間これについて混乱しており、Flask や Django を学ぼうとしたこともありましたが、最終的にはさまざまな理由から断念しました。

この問題については 10,000 ワードの記事を書くこともできますが、それが今日の投稿の目的ではありません。これが私の短い答えです。仕事を探しているなら、React を学び、それをメインのフレームワークにするのが最善です。私のような初心者で事前知識がほとんどなく、すぐに学び、素早く構築し、将来的には独立して製品を開発したい場合は、Vue3 を選択できます。学習曲線は比較的スムーズで、初心者でも簡単に始めることができます。

初心者は 1 つのフレームワークを学ぶだけで十分ですか?

主流のフレームワークには、開発におけるあらゆる種類のシナリオを処理できる非常に豊富なエコシステムがあるため、メインのプログラミング言語のエコシステムでフロントエンド フレームワークを 1 つ選択すればすべての問題が解決すると考えたこともあります。しかし、徐々に他のコースを学び、製品を構築するにつれて、この考えが甘かったことに気づきました。

たとえば、私は現在、Alchemy University の Solidity ブートキャンプを学んでいます。このコースの正式な前提条件は、JavaScript の基本知識であることです。 HTML、CSS、JavaScriptだけでなく、Vue3も学んでいたため、このコースは簡単にこなせると思いました。しかし、3 週目で、その週のプロジェクトが React のフロントエンドで構築されていることが突然わかりました。私は唖然としました。幸いなことに、この 1 週間のプロジェクトは簡単で、React の基本だけが必要でした。それでも、半日をかけてReactの基礎をサクッと習得し、ようやく1週間のプロジェクトを無事完了することができました。したがって、初心者は単一の技術スタックに希望を託さないでください。素早い学習と適応力は私たちにとって不可欠なスキルです。

私のフロントエンド フレームワークの学習戦略

シンプルさ、実用性、目標指向性

わずか 2 週間でフロントエンド フレームワークのエキスパートになれるとは思っていません。 Vue3 は React よりも初心者に優しいにもかかわらず、そのエコシステムは豊富でコンテンツが豊富で、Vue3 自体、Vite、Vue Router、Ponia などの多数のドキュメントが含まれています。高品質のフロントエンド UI を構築したい場合は、Element Plus のような UI ライブラリについても学ぶ必要があります。さらに、製品に特別な機能がある場合は、Web アプリに統合したリッチ テキスト エディターの wangEditor など、その機能に特化したいくつかのライブラリを学習する必要があります。

これらすべてを 2 週間で学ぶのは不可能なので、Vue3 のコア機能を把握し、最初にプロフェッショナルな外観のフロントエンドを構築することを目標に設定しました。

Vue3 ドキュメントを中心に、実践の複雑さが徐々に増加

私はプログラミングを独学で始めて以来、多くのドキュメントをレビューしてきましたが、Vue3 が最も初心者に優しいドキュメントの 1 つであることは認めざるを得ません。ドキュメントの優れた作成により、フロントエンド フレームワークを学ぶことができました。したがって、Vue を学習したい人には、サードパーティのチュートリアルを推奨するのではなく、Vue3 独自のドキュメントを中心的な学習教材にすることを強くお勧めします。

フレームワークを習得するには、優れた教材があるだけでは十分ではありません。フレームワークを理解する最良の方法は、それを使用してプロジェクトを構築することです。ただし、この記事の冒頭で説明した Web アプリを構築しようとするのは良いアイデアではない可能性があります。実際に調査中に 2 つのプロジェクトを構築しました。1 つ目は非常に単純なもので、主にフレームワークの使用感を把握し、一般的なプロセスとコア部分を理解するためのものでした。 2 番目のプロジェクトは最初のプロジェクトの拡張であり、フレームワークのエコシステム内で実際の Web アプリを構築するために必要なリソースを見つける方法を学習します。

勉強時間とスケジュール

1. 私は半日かけて、考えられる学習リソース、主にいくつかのドキュメントと 2 つの慎重に選択したプロジェクト チュートリアルを整理しました。ドキュメントには、 Vue3 ドキュメント、 Vite ドキュメント、 Vue Router ドキュメント、 Axios ドキュメント、 Element+ ドキュメント、およびPinia ドキュメントが含まれます。これらの中で最も重要なのは Vue3 ドキュメントです。

   
   

2. その後、約 3 日半をかけて Vue ドキュメントのほとんどを読みました。基本的な部分に重点を置いているので、初心者でもこの部分は問題なくクリアできると思います。しかし、後半に行くにつれて、内容が徐々にわからなくなってきました。それは初心者にとっては普通のことであり、問題ありません。とりあえず理解できなかった部分はメモして次に進みました。ベスト プラクティス、TypeScript、高度なトピックなどの一部の部分は、完全にスキップすることにしました。つまり、最も重要で基本的な部分だけに集中するのであれば、3 日半もあれば十分な時間です。私は習得が早い方ではなく、基礎が弱かったので、それほど時間はかからないかもしれません。

   
   

3. 次の 1 日半で、Traversy Media の古典的な無料チュートリアルに従い、タスク トラッカーという小さなプロジェクトを実行しました。ここでは特にブラッドの指導スタイルについて話したいと思います。彼は間違いなく伝説的な人物であり、多くの独習者からプログラミングのゴッドファーザーと考えられています。彼のコースを見るたびに、私は多くのことを学びます。彼は、小規模なプロジェクトを使用して、テクノロジー スタック内で学ぶ必要があるすべての側面を完全に実証するのが非常に得意です。 ** ただし、新人として注意しなければならないのは、何の根拠もなく授業を聞かないことです。 ** ブラッドの教え方は非常に簡潔でエレガントだからです。基礎ができていないと、彼のペースについていけないかもしれません。したがって、この小さなプロジェクトのチュートリアルは、学習の第 1 段階ではなく、第 2 段階に意図的にスケジュールしました。

   
   

4. 彼のチュートリアルに真剣に従った人なら、フレームワークを使用してフロントエンドを構築する感覚を理解したと思いますが、同時に、さらに多くの疑問もあります。そんな私も、vite、vue Router、Axios、pinia のドキュメントをざっと閲覧するのが待ちきれませんでした。今回は1日半だけ過ごしました。 vue3 プロジェクトを構築するために必要な上記の技術スタックの基礎知識はすでに大まかにわかっているので、これらの内容を中心に説明します。その他、比較的複雑ではありますが、あまり一般的には使用されないコンテンツをざっと閲覧しました。一度に理解できない場合は、読み飛ばしてください。

   
   

5. 2 週目までに、比較的複雑なプロジェクトを構築することで、1 週目で学んだ基本的な知識を定着させるのに十分な自信がつきました。また、実際の Web アプリを構築するニーズに応じて、以前に学習した内容を拡張します。今回も人気のあるvue チュートリアルである Traversy Media の FireBlog を選択しました。このチュートリアルはJohn Komarnickiによって説明されています。私がこのチュートリアルを選んだ理由を説明しましょう。

   
   

• このプロジェクトの利点は、プロ仕様のフロントエンド ユーザー インターフェイスと Firebase を利用して実装されたバックエンド API を備えた非常に完成度の高いことです。プロジェクト全体には、フロントエンドとバックエンドの通信、フロントエンドのアニメーション設計、ライフサイクル フックの設計、バックエンドのデータ構造設計、状態管理、ルート管理などの多くの側面が含まれます。構築中にドキュメントを読んでも理解できなかった内容もたくさんありました。将来的に Web アプリを開発したい場合は、実践的な経験を積む絶好の機会です。

• その主な欠点は、これが 2 年前のチュートリアルであるため、必然的に一部のテクノロジー スタックがアップグレードされていることです。例えば、チュートリアルで使用した vue-cli は現在メンテナンス状態ですが、ビルド時には vite を使用しました。もう 1 つの例は、チュートリアルで使用されるリッチ テキスト エディターが長い間更新されていないことです。私は wangEditor を使用しました。これも軽量ですが、より最近のメンテナンスが行われ、ビルド時に vue3 との統合が向上しています。

  
  

6. このチュートリアルのバックエンドは Firebase を使用して構築しますが、複雑ではありませんが、私たち自身の実践ニーズを満たしていない可能性があります。たとえば、私の理想的なバックエンドは、node.js+express+mongodb+mongoose で構築された RESTful API です。したがって、チュートリアルに従って Firebase バックエンドを構築するのではなく、一時的にjson-serverを使用して仮想バックエンドを構築して、Restful API の動作をシミュレートしました。これが、私がプロジェクトをオンラインで展開しなかった理由でもあります。 github page と vercel は両方とも静的 Web ページのみをデプロイでき、json-server のターミナルはローカルでのみ実行できるため、それらにデプロイすることはできません。このチュートリアルに従うときは、自分のニーズに応じて選択することも、同様の Firebase バックエンドを構築することもできます。

   
   

7. このチュートリアルの所要時間は 6 時間半です。通常、毎日 1 時間のコンテンツを学習する場合、6 日間で十分です。年齢を重ねるにつれて、学習速度が遅くなります。ビルドは 6 日以内に完了できる場合があります。最終日もいつものように前回の内容を復習しましたが、最も重要なことは、2週間の学習中に作成したメモを整理し、適切なカンニングペーパーを作成することです。この行動が重要であると感じたからです。学習を終えてから 1 か月後、コードを再度開くと、理解できない部分や覚えていない部分がたくさんあることがよくあります。この時点で、新しいプロジェクトを構築したい場合は、メモやチートシートが役立つことがよくあります。

最後のアドバイス:

1. 以前は、私は常に「完璧なチュートリアル」を見つけることに夢中でした。しかし、実際には完璧なチュートリアルは存在しないことが後でわかりました。 2 週目で学んだ FireBlog チュートリアルを例に挙げると、これには多くの欠点があり、要件を満たしていない部分さえあります。でも、だから何？これは依然として優れたチュートリアルであり、まれな実用的なプロジェクトです。要件を満たさない部分をアップグレードまたは変更するだけで済みます。

   
   

2. フロントエンド フレームワークの学習は、先週話した JavaScript の学習に似ていますが、2 週間ですべてを完了できるとは期待しないでください。そのエコシステムには多くのコンテンツがあり、常にアップグレードされています。言うまでもなく、先ほど説明したように、1 つのフレームワークを学習するだけですべての側面を克服することを期待するのは非現実的であるため、これは継続的な学習プロセスになることになります。私たちがしなければならないのは、これらすべてを負担と考えずに楽しむことです。

   
   

3. Vue の代わりに React を学習する予定がある場合、または Angular の場合でも、上で述べた内容が当てはまります。フロントエンドフレームワークもそうですが、学習方法や学習リソースの選択の方向性は実はよく似ています。

   
   

#Web開発 #フロントエンド開発 #VueJS #JavaScript #LearningToCode #Code初心者 #TraversyMedia #自己改善 #独学 #コーディングリソース #React