Gatsby.jsを利用した爆速Webサイト制作 Lesson 0： コース概要

こんにちは、Teshi(@atsuhio)です。フィリピンに住みつつ、欧米の子供向けプログラミングスクールCodeGrit Jrを開発中です。オンライン英会話サービスも運営しています。

現在ですが、本業と並行して国内向けに動画付きのコースを作成しようと考えています。Level 1からLevel 3までの三段構成のコースとなる予定です。

僕のやりたいことがサービスを作れる人を増やすことであり、Level 3をクリアすればモダンなウェブ開発をTypeScriptを利用してゼロからできるようになるようなところまでできればと思ってます。名前はまだ仮です。

以前運営していたCodeGritでは、基本からしっかりと教える方式を取りましたが、今回のコースではプロジェクトベースで、作りながら学ぶような内容を取ります。

Level 1からLevel 3までの構成

Level 1. Gatsby.jsを利用した爆速Webサイト制作
Level 2. Next.js、Wordpress APIを利用した爆速ブログ構築
Level 3. Nest.js、Next.jsを利用したモダンなWebアプリ開発

Level 1からLevel 3までですが、まずはLevel 1の作成に集中します。またLevel 1については無料で公開予定です。

なぜこのコースを学習すべきなのか

多くのコースでは、Webサイトの制作やブログの構築ではWordpressやBootstrap、jQueryなどを教えることが普通です。

しかし、これらの組み合わせはモダンな開発現場では徐々に衰退していっています。今すぐ困るわけではないかもしれませんが、これから学習をするのであれば、学習コストもあまり変わらないことから学習初期からReactなどモダンな開発ツールを利用して学習するとより効率が良いです。

また、仮にクライアントワークをする場合においてもGatsbyやNext.jsを利用した提案ができることで他の開発者に対して差別化することができます。

もし、より先を見据えてモダンな開発を学びたい場合このコースを受講することをオススメします。

Gatsby.jsを利用した爆速Webサイト制作のコース内容

学習に必要なもの

このコースの学習には以下が必要です。またWindowsでも同じことが学べますが僕がMacを使っており、最初の段階ではMacを前提として解説を進めます。

- Mac(将来的にWindows版の解説も入れます。)
- HTML/CSSの基礎知識

このコースで学ぶ内容

このコースでは以下のことを学ぶことができます。

1. JavaScriptの基礎
2. React基礎
3. Gatsby.js
4. React Bootstrap
5. Netlifyへのデプロイ(無料運用)
6. コマンドライン
7. NPM、Yarn
8.リスボンシブデザイン
9. Googleフォームの設置
10. Git/GitHubの基礎

このコースで出来るようになること

このコースをクリアすることで、自力でモバイルに対応したリスポンシブなサイトを制作し、インターネット上に公開できるようになります。

コースカリキュラム

このコースは以下のようなレッスン構成を予定しています。レッスンの順番や構成、内容は作成しながらアップデートをしていくため、カリキュラムは暫定のものとなります。なお各レッスンはさらに3つから4つほどのチャプターに分かれる予定でその中でGitやNPMなど必要な知識を必要に応じて学びます。

Lesson 1. Gatsbyとは何か簡単に理解しよう リンク
Lesson 2. JavaScript超入門その１- 変数と計算 リンク
Lesson 3. JavaScript超入門その２ - ファンクション リンク
Lesson 4. Gatsby.jsを利用した開発準備をしよう
Lesson 5. React.js超入門その１- ページを作ってみよう
Lesson 6. React.js超入門その２- Props
Lesson 7. Netlifyに簡単なサイトを公開しよう
Lesson 8. React Bootstrap１
Lesson 9. React Bootstrap２
Lesson 10. サイトを作ろう１
Lesson 11. サイトを作ろう２
Lesson 12. サイト公開前の設定をしよう
Lesson 13. 自力でサイトを作成して公開しよう

コースの公開について

このコースは無料でnote上で公開しています。(将来的に変更されるかもしれません。)

レッスン１を受講されたい方はこちらのリンクからご覧ください。