メニュー

バックエンドエンジニアによる初めてのJamstack

発売日: 2022/12/9 想定ページ数: 146ページ ISBN: 9784295601395 全文検索: 対応
★★★★★ ★★★★★ 0件
本書は筆者がJamstackについて実際に役立つ、シンプルなチュートリアル以上のものを目指して筆者が開発したVueアプリケーションを通じて、実装過程中心にまとめた解説書です。
サーバーの管理に関して脆弱性対応など、開発者に求められる業務の範囲は大幅に拡大しています。
しかし有能なプログラマーであると同時に有能なサーバー管理者としてのスキルを維持し続けることは困難です。
本書ではSupabaseで構築したデータベースからデータを取得し、リアルタイムで表示する仕組みを実装します。そのためにVue.jsで開発したフロントエンドアプリケーションを、Netlifyにデプロイする手順についてステップ・バイ・ステップで解説します。
Jamstackって言葉はよく聞くけれどどんなもの?と思ったときに、実際に試すための手順書としても活用できる一冊です。
【目次】
第1章 やりたいこと
第2章 Jamstackとは
第3章 Netlify
第4章 Supabase
第5章 Vue.js
第6章 Vue Router
第7章 パラメーターの受け取り
第8章 Supabaseとの接続とVueスクリプトの構造
第9章 リアルタイムに反映しよう
第10章 GitHubへのデプロイ
第11章 サーバーレス・ファンクション
第12章 見栄えの改善
第13章 APIキーを隠そう
第14章 アニメーションをつけよう
第15章 さらなる学習に向けて
目次プレビュー
  • はじめに
  • 第1章 やりたいこと
  • 第2章 Jamstackとは
  • ご挨拶
  • 前提条件
  • 表記関係について
  • 免責事項
  • 1.1 何をしたいか
  • 1.2 完成物
  • 1.3 フレームワークの選定
  • 1.4 フロントエンド開発についての誤解
  • 1.5 どこから始めるか
  • 2.1 スタックとは
  • 2.2 「Jam」スタック
  • 2.3 何がおいしいの?
  • 2.4 Jamstackが向いているサイト
  • 2.5 Jamstackの構成
  • 3.1 Netlifyとは
  • 3.2 アカウントの作成
  • 3.3 サンプルのデプロイ
  • 4.1 Supabaseとは
  • 4.2 アカウントの作成
  • 4.3 データベースの作成
  • 4.4 テーブルの作成
  • 4.5 フィールドの定義
  • 4.6 データの入力
  • 4.7 サンプルデータの準備
  • 4.8 RLSの無効化
  • 5.1 Vueとは
  • 5.2 Vueのバージョン
  • 5.3 Vue及びコマンドラインツールのインストール
  • 5.4 プロジェクトの作成
  • 5.5 Vueのファイル構造
  • 5.6 少しいじってみよう
  • 6.1 なぜ必要か
  • 6.2 インストール
  • 6.3 コンポーネントを増やす
  • 6.4 ルーターの設定
  • 6.5 App.vueの修正
  • 6.6 未使用コンポーネントの削除
  • 6.7 パスの確認
  • 7.1 ScoreBoard.vue
  • 7.2 ルートの変更
  • 7.3 受け取り側の変更
  • 7.4 実験
  • 8.1 インストール
  • 8.2 インポート
  • 8.3 Vueのファイル構造
  • 8.4 Supabaseからデータを取り出す関数の詳細
  • 8.5 template部分の変更
  • 8.6 試してみよう
  • 8.7 データ変更の反映
  • 9.1 SupabaseのReplication設定
  • 9.2 Subscriptionで通知を受け取る
  • 9.3 subscribeUpdateMessage()のマウント
  • 9.4 確認しよう
  • 9.5 このコード変更でスコアが表示されなくなった場合
  • 9.6 Unsubcribe
  • 9.7 完成したScoreBoard.vue
  • 10.1 GitHubリポジトリーの作成
  • 10.2 Gitからデプロイ
  • 10.3 Netlifyとの接続
  • 10.4 Netlifyのビルド設定
  • 10.5 Netlifyでパスを使えるようにする
  • 10.6 Supabaseとの連携を確認する
  • 11.1 サーバーレス・ファンクションとは
  • 11.2 Netlify Functions
  • 11.3 今回の目的
  • 11.4 なぜ今作ったVueでやらないのか
  • 11.5 Netlify Functionsの概要
  • 11.6 HelloWorld
  • 11.7 hello.jsの中身
  • 11.8 デプロイ
  • 11.9 Supabaseとの連携
  • 11.10 デプロイと確認
  • 12.1 App.vueからの削除
  • 12.2 <style>にCSS
  • 12.3 <template>のタグの構造を改善
  • 12.4 確認
  • 13.1 放置すると
  • 13.2 何をどう変更するか
  • 13.3 環境変数を共用する
  • 13.4 Netlifyで環境変数を設定する
  • 13.5 Netlify Cliのインストール
  • 13.6 Netlify Cliからのログイン
  • 13.7 Netlify Cliとリポジトリーの連携
  • 13.8 ローカル上で環境変数を使用する
  • 13.9 サーバーレス・ファンクションへの変更
  • 13.10 デプロイ
  • 14.1 GSAPのインストール
  • 14.2 初期画面表示の際のアニメーション
  • 14.3 transition-groupの属性
  • 14.4 script部分の変更
  • 14.5 setup()
  • 14.6 beforeEnter
  • 14.7 enter
  • 14.8 アニメーションをつける
  • 15.1 フレームワークの選定
  • 15.2 上位フレームワークとしてのNextとNuxt
  • 15.3 陳腐化という悩み
  • 15.4 Jamstackの将来
あとがき

まだレビューが投稿されていません