著者:mod728
ページ数:270

¥99¥0

最新のWebテクノロジーを勉強してみたい!

HTMLとCSS、Reactはだいたいわかったけど、次に何を勉強すればいいかわからない・・・

という人、次はGatsbyにトライしてみましょう。

ハイパフォーマンスのウェブサイトを簡単につくれるGatsbyは世界的に人気で、日本でも目にする機会が増えています。

制作するウェブサイト: https://gatsbybook-portfolio-site.netlify.app

本書は2021年10月にリリースされたGatsby v4を使って、ポートフォリオサイトを作りながらGatsbyの使い方を身につけます。

Gatsby学習の最初の一冊として使ってください。

拙著「はじめてつくるReactアプリ」を読んでReactをある程度わかっていると理解が早く進みますが、HTML/CSSの学習を終えてすぐの人でもチャレンジできる程度の難易度となっています。

(本書ではMac(Big Sur)を使って開発を行います。Windowsの方は一部コマンドラインの表示が異なることに注意してください。)

———

第1章 基礎編
Reactフレームワークとは?
プラグイン
ターミナルの使い方
Node
npm
Git
Gatsby-CLI
VS Code

第2章 開発編 その1
スターターキットのダウンロード
スターターキットのクリーンアップ その1
Gatsbyを動かしてみる
スターターキットのクリーンアップ その2
Reactの書き方
CSSスタイルのあて方
pageフォルダ
Linkの使い方
記事一覧ページの作成
記事ページの作成 その1(概要)
記事ページの作成 その2(テンプレートファイル作り)
記事ページの作成 その3(slugの生成)
記事ページの作成 その4(テンプレートファイルにslugを割りあてる)
記事ページの作成 その5(マークダウンデータの読み込み)
記事一覧ページと記事ページをつなげる

第3章 開発編 その2
この章ですること
Gatsby Image
index.jsの作成
blog.jsの作成
single-blog.jsの作成
contact.jsの作成
layout.jsの作成

第4章 デプロイ
Netlify
ファイルを最適化する
終わりに

第5章 ブラッシュアップ
この章ですること
404ページの追加
Forms機能の使い方
ファビコンの変更とPWA化
URLを変更する
SEOコンポーネント
分割代入とgetImageでコードを短くする
前後のブログ記事へと移動する
記事一覧ページを分割する(ページネーション)
マークダウンの写真を表示する
SCSSの書き方

シリーズ一覧

  • 同シリーズの電子書籍はありませんでした。

 

  Kindle Unlimitedは、現在30日間無料体験キャンペーンを行っています!

この期間中は料金が980円→0円となるため、この記事で紹介している電子書籍は、すべてこのKindle Unlimited無料体験で読むことが可能です。

Kindle Unlimited 無料体験に登録する