Chapter 01無料公開

はじめに

fkuMnk
fkuMnk
2023.01.10に更新
このチャプターの目次
  1. 本書の対象者
  2. SvelteKitとSvelte
  3. Svelte
    1. サンプルコード
    2. サンプルコードの実行
  4. Firebase
  5. 本書の概要
  6. 絶対たのしい!! Svelteトレーニング 第一回
    1. スベルトスベルトスベルト

本書はサンプルコードを参考にお手元のコンピュータで学習を進めていくチュートリアルブックです。
HTML・CSS及びJavaScriptで書かれたWebサイトを作成し、インターネット上に公開することを目的としています。

本書の対象者

本書は、日常的にHTML・CSSを書かれている方、これからHTML・CSS・JavaScriptを学んでいきたい方の、技術と関心の幅を広げていくことを想定して作られています。

一方で、上記の方々をガイドする立場にある有識者の方にも参考書として活用できるものになっています。
また、学ぶべき範囲を絞り、できるだけ内容を簡素化する為に、HTML・CSS・JavaScript個々に関する詳しい解説は省きました。

主なサンプルコードはSvelteという仕組みで記述されており、1つのSvelteファイルの中に必要なHTML・CSS・JavaScriptが書かれています。 Svelteで記述したコードはSvelteKitを使って静的ファイルとして出力し、Firebase Hostingを使ってインターネットに公開します。

図a_1. 本書で行うこと

SvelteKitとSvelte

本書で作成するWebサイトは、SvelteKitという仕組みでプロジェクトを作成し、プロジェクト内にある各ファイルを編集したり追加したりすることで作成していきます。

図a_2. プロジェクトフォルダ図解

※今回はサーバーサイドレンダリングを使う方法については言及していませんが、SvelteKitはAdapterという機能を介して、用途に合わせたプラットフォーム向けの構築が可能です。詳しくは公式サイトのドキュメントをご覧ください。

Svelte

SvelteKitでは、主にSvelteの記法を使ってコードを記述していきます。
SvelteはHTML・CSS・JavaScriptを包括し、それらを一つのファイルの中に収めることができます。
早速Svelteのサンプルコードを見て、実際に動かしてみましょう。

サンプルコード

<script>
  let title = "たのしいSvelteKit";
</script>

<div>
  <h1>{title}</h1>
  <p>HTMLとCSSとJavaScriptで作るWebアプリケーションの世界</p>
</div>

<style>
  h1 {
    font-size: 2em;
  }
</style>

図a_3. HTML、CSS、JavaScriptを包括するSvelteファイル

サンプルコードの実行

Svelteの公式サイトにはREPLという機能が備えられていて、ブラウザ上でSvelteのコードを実行する事ができます。実際にこのコードを入力してみましょう。

ブラウザでREPLを開くと画面左側に編集可能なソースコード、右側に実行結果が表示されています。

REPL • Svelte
https://svelte.jp/repl

REPL とは
"ユーザーとインタプリタが対話的にコード片を実行できるもの。"
https://ja.wikipedia.org/wiki/REPL

画面左側のコードをサンプルコードに書き換え、実行結果を確認しましょう。

ブラウザ上で実行結果が確認できる

このようにSvelteは、一つのファイル内に必要なHTML、CSS、JavaScriptを包括して記述することができます。
Svelteの基本的な使い方については、公式サイトのドキュメントを参照しながら本書のチュートリアルを進めてみて下さい。

Docs • Svelte
https://svelte.dev/docs

邦訳版ドキュメント Docs • Svelte
https://svelte.jp/docs

Firebase

FirebaseはGoogleの提供するWebアプリケーション開発プラットフォームです。 本書では、このFirebase Hostingを使用して、インターネット上にWebサイトを公開する方法を学習します。 Googleアカウントを使用して、事前にFirebaseが利用できる準備をしておいてください。

Firebase Hosting
https://firebase.google.com/products/hosting

本書の概要

  • §1 プロジェクトを始める
    SvelteKitプロジェクトの作成方法を学習します。
  • §2 Web サイトを公開する
    Firebaseと接続して静的サイトを公開する方法を学習します。
  • §3 プロジェクトを更新する
    プロジェクトの編集と機能を拡張する方法を学習します。
  • §4 プロジェクト構成
    プロジェクトに新規ページを追加し全体の構成を学習します。
  • §5 条件分岐と繰り返し
    Svelteの持つ便利な機能を活用する方法を学習します。
  • §6 できるかな!?
    これまでの学習内容を復習します。
  • §7 外部データの取得
    インターネット経由でJSONデータを取得する方法を学習します。
  • §8 仕上げ
    スタイルシートで全体をいい感じに仕上げて知見を共有します。自由課題
  • 付録A もっと便利に
    さらに便利になるSvelteの機能を学習します。

絶対たのしい!! Svelteトレーニング 第一回

この段落を30秒間見つめよう！

スベルトスベルトスベルト

スベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルト

スベルトスベルトスベルト

スベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルトスベルト