fullstack-roadmap-series - このシリーズでは、完全な初心者から 2021 年以降のフルスタック開発者までを紹介します。

(This series will take you from an absolute beginner to a fullstack developer for 2021 and beyond)

Created at: 2020-12-09 22:00:43
Language: JavaScript

コード学習に関する私の無料シリーズへようこそ。この無料シリーズでは、経験ゼロから最初のフルスタック Web アプリケーション (React、ExpressJS、および PostgreSQL の E コマース アプリ) をデプロイすることができます。その過程で、2021 年以降に必要な基本的な Web 開発の概念について説明します。

レッスンのリストとそのリンクについては、この投稿を参照してください。

このコースを更新する場所

このシリーズのすべての更新は、私の Github リポジトリで行われます。

Github にアカウントを持っていない場合は、今すぐ作成してください。このシリーズを進めるにはこれを行う必要がありますが、これは雇用者が就職面接の際に見るアカウントでもあります (そのため、ユーザー名がプロフェッショナルであることを確認してください)。

アカウントを作成したら、このページの右上隅にある星をクリックして、今後リポジトリを簡単に見つけられるようにします。

これは誰のためですか?

このシリーズは、次の場合に最適です...

  • 人生でコードを 1 行も書いたことがないが、コーディングとは何かを学びたい
  • フルスタック JavaScript 開発者になるための旅を始めたばかりですが、ガイドとなるロードマップが必要です
  • フロントエンドまたはバックエンドの Web 開発の経験があるが、スキルを磨く必要がある

このシリーズは、これらのさまざまなスキルセットすべてにどのように役立つのでしょうか?

このシリーズでの私の意図は、最も初心者向けのトピックからいくつかの高度な Web 開発トピックまで順番に進むことです。

最終的にどのようなスキルを身につけることができるでしょうか?

重要!!

非常に明確にしましょう。このシリーズでは、コーディングの方法と、Web 開発の規律について説明します

つまり、シリーズの終わりまでに、JavaScript でコーディングする方法と、 FacebookYouTubeQuickbooksYou Need a Budget、さらには私の独自のWebアプリケーション (モバイルではない) の作成方法を理解できるようになります。アプリ、イーグル アイ ゴルフ パフォーマンス

このシリーズではコーディングの方法を説明するため (これは他の分野にも応用できます)、このシリーズではカバーしない分野を以下に示します。

  • IOS または Android アプリのコーディング方法
  • データ サイエンス、AI、機械学習
  • 高度な DevOps (ただし、基本については説明します)
  • JavaScript 以外の言語でコーディングする方法 (ただし、コース全体を通していくつかの言語を紹介するために、他のいくつかの言語についても説明します)

このシリーズではどのようなトピックを学習しますか?

このシリーズでは、次のことを学びます。

  • コーディング方法 (JavaScript を使用します。理由は次のとおりです)
  • 一般的な Web 開発の概念 (言語やフレームワークに固有のものではありません)
  • 深く掘り下げずに、さまざまな Web フレームワークに触れる

詳細な概要は、この投稿の下部にあります。

私たちは何を構築していますか?

このシリーズから離れて何か役に立つことをしてほしいので、私たちはあなたの個人的な Web サイトを構築して展開します。シリーズの終わりまでに、ブログ投稿を書いたり、ポートフォリオや履歴書を表示したり、このシリーズが終わった後でも拡張できる個人の Web サイトができあがります。

最初は小さくて非効率的ですが、完全に機能する便利なアプリになるまで、コース全体で (学習のために) 何度かリファクタリングします。

一番良いところ?今の姿がどうなるかはわかりません。これは、いくつかの興味深いレッスンにつながり、フルスタックの Web 開発者になることがどのようなものかについての現実的な視点を提供するはずです。

どうすれば質問できますか?

すぐに返信できない場合がありますが、Github リポジトリのこのテンプレートに従って質問を提起してください。これを行うには、Github アカウントが必要です。

ここで特定のテクノロジーを除外しているのはなぜですか?

私が最初にコーディングを学んだとき、このようなロードマップを読みましたが、これは素晴らしいものでしたが、非常に恐ろしいものでした。それだけでなく、後から考えると、これらのロードマップは初心者にとって非現実的であることを私は知っています. 私は 4 年以上にわたってほぼ毎日コーディングを行ってきましたが、これらのロードマップに記載されているすべてのトピックをカバーしていません。前方の風景を見るには最適ですが、自分で始めるにはあまり適していません。

このため、このシリーズを通じて学習する特定のテクノロジを選択しました。これにより、最も用途の広い (そして雇用可能な) 開発者になることができると思います。そこにあるすべてをカバーするわけではありませんが、実際の企業が使用する最新のテクノロジーを学びます.

たとえば、アプリの Web ホスティングについて学習するコースの部分に到達すると、たくさんのオプションがあります。AWS、Azure、Linode、Digital Ocean、Heroku などを使用できます。しかし、このシリーズでは Digital Ocean を使用します。これは安価でシンプルなインターフェイスを備えており、他のホスティング会社に適用できる Web アプリのホスティングの基本原則を教えてくれるからです。つまり、自分で選択する必要なく、ここで多彩なスキルを学ぶことができます。

このシリーズを読み終えた後は、さらに多くのテクノロジーを探求することになるので、ここですべてをカバーする必要はありません。今の目標はWeb開発を学ぶことと、「どんなツールを使えばいいのか?」という分析麻痺。その邪魔をしてはいけません。

追加の Q&A

このコースはどこで受講できますか?

ブログ、Dev、Medium、YouTube に投稿します。以下は、シリーズを見つけるための関連リンクです。

JavaScriptを選んだ理由

もうすぐ 2021 年になります。StackOverflow 開発者調査によると、JavaScript は最も広く使用されているプログラミング言語であり、たまたま私が最も習熟している言語でもあります。JavaScript が私たちにとって良い選択である理由は他にもあります。

  • JavaScript は Web に力を与えており、今後何年も続くでしょう
  • JavaScript は、フロントエンドとバックエンドの両方で使用できます (詳細はこちら)。フルスタック Web アプリケーションを構築するには、2 つの言語ではなく 1 つの言語を学ぶだけでよいため、これは重要です。
  • JavaScript はブラウザーで使用できる唯一の真のプログラミング言語であるため、何があっても習得する必要があります (ただし、ここにはニュアンスがあります。WASMの導入により、JavaScript 以外の言語を記述できるようになります)。ブラウザーで言語を使用できますが、これはまだ始まったばかりであり、旅の最初に学習するものではありません)

なぜこれが無料なのですか?

正直なところ、これは無料です。なぜなら、(私はフルタイムの仕事をしていて、副業としてこれを行っています) 座って一緒に最初から最後まで完全なトレーニング コースを作成し、記録する時間がないからです。それを編集し、販売し、さらに販売します。そうは言っても、私の意図は、ほとんどの有料トレーニングコースよりも優れた品質のシリーズを無料で提供することです. 将来的にコースを販売する予定はありますが、このテーマを教えることに非常に情熱を傾けており、誰もが無料でコーディングを学ぶ機会を持つべきだと考えています.

この連載を読めば、フルスタックの JavaScript Web 開発者としての仕事に必要なスキルを身につけることができると心から思います。

詳細なシリーズ概要

これは発展途上の概要であることに注意してください。私が見逃した重要な Web 開発トピックがある場合は、Github で問題を提起してください。追加を検討します。

パート 1: コーディングの基本

  • 初めての JavaScript プログラムを作成する
  • ブラウザー DevTools の概要
  • 変数とデータ型
  • 「コンソール」とは何ですか?
  • 演算子と条件
  • ランタイムとは
  • ローカル開発環境のセットアップ
  • 端末の基本
  • ループ
  • 機能
  • オブジェクト
  • 輸入と輸出
  • NodeJS の概要
  • Git と Github の紹介

パート 2: フロントエンド開発の基本

  • HTML の概要と最初の Web ページの作成
  • CSS を使用して Web ページのスタイルを設定する
  • ドキュメント オブジェクト モデル (DOM)
  • ボックスモデル
  • フレックスボックスの紹介

パート 3: Web ページのデプロイ

  • デジタルオーシャンの紹介
  • Vim エディタの基本
  • VPS (Virtual Private Server) への接続方法
  • NGINX (当社の静的 Web サーバー) の紹介
  • DNS とファイアウォールの基本
  • あなたのサイトをインターネットに掲載しましょう!
  • サーバーの管理とサイトの更新
  • 安価で簡単な方法: Github ページ (オプション)

パート 4: バックエンド開発の基本

  • パッケージ管理
  • ExpressJS の紹介
  • モジュール
  • 基本サーバー
  • エクスプレス ミドルウェア
  • RESTful API
  • フロントエンドへの接続
  • データベースと MySQL の概要
  • MySQL Workbench でのデータベースの設計
  • データベースをサーバーに接続する
  • ブログの API ルートをテストする

パート 5: フロントエンド フレームワークが必要な理由

  • Vanilla Javascript を使用したバックエンド コンテンツのレンダリング
  • EJSの紹介
  • Angular と React

パート 6: 認証

  • HTTP ヘッダーと Cookie
  • エクスプレス セッション
  • パスポートローカル戦略
  • 公開鍵暗号
  • JSON Web トークン
  • パスポート JWT
  • 最初からの JWT 認証

パート 7: Angular を使用したコンテンツ管理システムの構築

  • 角度の紹介
  • 基本的な Angular アプリ
  • Angular をバックエンドに接続する
  • ブログ投稿管理 UI の設計

パート 8: フルスタック アプリのデプロイとテスト

  • Nginx の構成
  • 展開と更新のワークフロー
  • Jest でアプリをテストする
  • CI/CDの紹介

このシリーズにレッスンを投稿するときは、必ずメール リストに登録して最新情報を受け取ってください。