フロントエンドのスキルを磨くためのさらに 9 つのプロジェクト

導入

プログラミングの初心者であっても、熟練した開発者であっても、この業界ではトレンドに遅れないようにするために、新しい概念や言語/フレームワークを学ぶことが必須です。

たとえば、Facebook がわずか XNUMX 年前にオープンソース化した React は、すでに世界中の JavaScript 開発者にとって第一の選択肢となっています。

もちろん、Vue と Angular にも独自の正当なファン ベースが存在します。 さらに、Svelte や Next.js や Nuxt.js などの他のユニバーサル フレームワークもあります。 そしてギャツビー、グリッドサム、クェイサー...などなど。

経験豊富な JavaScript 開発者であることを証明したい場合は、古き良き JS を使用した作業に加えて、さまざまなフレームワークやライブラリに関する少なくともある程度の経験が必要です。

2020 年にフロントエンド マスターになれるよう、XNUMX つの異なるプロジェクトをまとめました。それぞれのプロジェクトは、構築してポートフォリオに追加できる技術スタックとして、異なる JavaScript フレームワークとライブラリに焦点を当てています。 実際に何かを作ること以上に役立つものはないということを忘れないでください。前に進み、頭を使ってそれを実現してください。

この記事は EDISON Software のサポートを受けて翻訳されました。 マルチブランドストア向けの仮想試着室を作成しますと テストソフトウェア.

Reactを使った動画検索アプリ（フック付き）

まず始められるのは、React を使用して映画検索アプリを作成することです。 以下は、最終的なアプリケーションがどのようになるかを示すイメージです。

何を学びますか
このアプリを構築すると、比較的新しい Hooks API を使用して React スキルを向上させることができます。 サンプル プロジェクトでは、React コンポーネント、多数のフック、外部 API、そしてもちろんいくつかの CSS スタイルを使用します。

技術スタックと機能

• フックに反応する
• 作成-反応-アプリ
• Jsx
• CSS

これらのプロジェクトは、クラスを使用せずに、機能的な React への完璧なエントリ ポイントを提供し、2020 年に間違いなく役立ちます。 発見できる サンプルプロジェクトはこちら。 指示に従うか、独自に作成してください。

Vue を使用したチャット アプリ

あなたができるもう XNUMX つの素晴らしいプロジェクトは、私のお気に入りの JavaScript ライブラリである VueJS を使用してチャット アプリを作成することです。 アプリケーションは次のようになります。

何を学びますか
このチュートリアルでは、コンポーネントの作成、状態の処理、ルートの作成、サードパーティのサービスへの接続、さらには認証の処理など、Vue アプリを最初から作成する方法を学びます。

技術スタックと機能

• ヴュー
• ヴエックス
• Vueルーター
• CLIビュー
• プッシャー
• CSS

これは、Vue を使い始めたり、2020 年に開発に取り組むために既存のスキルを向上させるのに最適なプロジェクトです。 発見できる チュートリアルはこちら.

Angular 8 を使用した美しい天気アプリ

この例は、Angular 8 を使用して美しい天気アプリを作成するのに役立ちます。

何を学びますか
このプロジェクトでは、設計から開発、すぐに展開できるアプリケーションに至るまで、アプリケーションをゼロから構築するための貴重なスキルを学びます。

技術スタックと機能

• 角度のある8
• ファイアベース
• サーバーサイドレンダリング
• グリッドとフレックスボックスを使用した CSS
• モバイルフレンドリーと適応性
• Темныйрежим
• 美しいインターフェース

この包括的なプロジェクトで私が本当に気に入っているのは、物事を孤立して研究しないことです。 代わりに、設計から最終展開までの開発プロセス全体を学びます。

Svelte を使用した ToDo アプリケーション

Svelte はコンポーネントベースのアプローチの新参者のようなもので、少なくとも React、Vue、Angular に似ています。 そして、これは2020年に最も注目されている新製品のXNUMXつです。

To Do アプリは必ずしも最もホットなトピックではありませんが、Svelte スキルを磨くのに非常に役立ちます。 次のようになります。

何を学びますか
このチュートリアルでは、Svelte 3 を使用してアプリケーションを作成する方法を最初から最後まで説明します。 コンポーネント、スタイル設定、イベント ハンドラーを使用します。

技術スタックと機能

• スヴェルト 3
• コンポーネント
• CSS を使用したスタイル設定
• ES6構文

優れた Svelte スターター プロジェクトはあまりないので、 これは始めるのに良い選択肢です.

Next.js を使用した E コマース アプリ

Next.js は、すぐに使用できるサーバー側レンダリングをサポートする React アプリケーションを構築するための最も人気のあるフレームワークです。

このプロジェクトでは、次のような e コマース アプリケーションを作成する方法を示します。

何を学びますか
このプロジェクトでは、Next.js を使用して開発する方法、つまり新しいページとコンポーネントを作成し、データを抽出し、スタイルを設定して Next アプリケーションをデプロイする方法を学びます。

技術スタックと機能

• Next.js
• コンポーネントとページ
• データサンプリング
• スタイリング
• プロジェクトの展開
• SSRとSPA

新しいことを学ぶために、e コマース アプリのような実世界の例があることは常に素晴らしいことです。 あなたはできる ここでチュートリアルを見つけてください.

Nuxt.jsを使用した本格的な多言語ブログ

Nuxt.js は Vue 用であり、Next.js は React 用です。サーバーサイド レンダリングとシングル ページ アプリケーションの機能を組み合わせる優れたフレームワークです。
作成できる最終的なアプリケーションは次のようになります。

何を学びますか

このサンプル プロジェクトでは、初期セットアップから最終展開まで、Nuxt.js を使用して完全な Web サイトを作成する方法を学びます。

ページやコンポーネント、SCSS によるスタイル設定など、Nuxt が提供する優れた機能の多くを利用しています。

技術スタックと機能

• Nuxt.js
• コンポーネントとページ
• ストーリーブロックモジュール
• ヌタウナギ
• 状態管理のための Vuex
• スタイリング用SCSS
• Nuxt ミドルウェア

これは本当に素晴らしいプロジェクトです、これには多くの優れた Nuxt.js 機能が含まれています。 私は個人的に Nuxt での作業が大好きなので、優れた Vue 開発者にもなれるので、ぜひ試してみてください。

ギャツビーのブログ

Gatsby は、React と GraphQL を使用した優れた静的サイト ジェネレーターです。 これがプロジェクトの結果です:

何を学びますか

このチュートリアルでは、Gatsby を使用して、React と GraphQL を使用して独自の記事を書くために使用するブログを作成する方法を学びます。

技術スタックと機能

• ギャツビー
• 反応する
• GraphQL
• プラグインとテーマ
• MDX/マークダウン
• ブートストラップCSS
• テンプレート

ブログを始めたいと思ったことがあるなら、 これは素晴らしい例です ReactとGraphQLを使った作り方について。

WordPress が悪い選択だと言っているわけではありませんが、Gatsby を使用すると、React を使用して高性能の Web サイトを構築できます。これは素晴らしい組み合わせです。

Gridsome のブログ

Gridsome for Vue... さて、これはすでに Next/Nuxt で実現しました。
しかし、それはグリッドサムとギャツビーにも当てはまります。 どちらもデータ層として GraphQL を使用しますが、Gridsome は VueJS を使用します。 これは、素晴らしいブログの作成に役立つ素晴らしい静的サイト ジェネレーターでもあります。

何を学びますか

このプロジェクトでは、Gridsome、GraphQL、Markdown を使い始めるための簡単なブログを作成する方法を説明します。 Netlify を介してアプリケーションをデプロイする方法についても説明します。

技術スタックと機能

• グリッドサム
• ヴュー
• GraphQL
• 値下げ
• Netlify

これは確かに最も包括的なチュートリアルではありませんが、Gridsome の基本概念と Markdown は良い出発点かもしれません.

Quasarを使用したSoundCloud風のオーディオプレーヤー

Quasar は、モバイル アプリケーションの作成に使用できるもう XNUMX つの Vue フレームワークです。 このプロジェクトでは、次のようなオーディオ プレーヤー アプリケーションを作成します。

何を学びますか

他のプロジェクトは主に Web アプリケーションに焦点を当てていますが、このプロジェクトでは、Vue と Quasar フレームワークを使用してモバイル アプリケーションを作成する方法を示します。
Android Studio/Xcode が設定された状態で Cordova がすでに実行されているはずです。 そうでない場合は、マニュアルには Quasar Web サイトへのリンクがあり、すべてのセットアップ方法が説明されています。

技術スタックと機能

• クエーサー
• ヴュー
• コー​​ドバ
• ウェーブサーファー
• UIコンポーネント

小規模プロジェクト、モバイル アプリケーションを作成するための Quasar の機能を示します。

出所： habr.com