Svelte学習帖

SvelteKit と FirebaseHosting を用いた静的 Web サイト構築手法編

これからSvelteを始めようと志す初学者に向けた、コードを書きながら経験を積み重ねていくタイプの学習テキストです。

第3版よりSvelteKit1.0対応になりました。

■発行日
2022年9月12日 技術書典13 第1版発行
2022年10月21日 Kindle版 第2版発行
2023年1月10日 第3版発行

■著者
fkuMnk

PDF版

技術書典オンラインマーケット

￥500

特徴

  • PDFとしてダウンロード可能

A5版 95ページ

Kindle版

Kindleストア|Amazon

￥900

特徴

A5版 95ページ

Zenn Book

Zenn

￥1,000

特徴

  • Webブラウザで表示が可能
  • サンプルコードが見やすい

約38,045字

PDF版 ページ33、34
Zenn §3 プロジェクトを更新する

第3版での主な変更点

  • trailingSlashの記述場所を+layout.jsに変更 | §1 プロジェクトを始める
  • preprocessをvitePreprocessに変更 | §3 プロジェクトを更新する
  • その他誤字の修正
  • 図版の調整
PDF版 ページ23、24

進行内容に変更はありません。

はじめに

本書はサンプルコードを参考にお手元のコンピュータで学習を進めていくチュートリアルブックです。

HTML・CSS及びJavaScriptで書かれたWebサイトを作成し、インターネット上に公開することを目的としています。

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

本書の対象者

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

一方で、上記の方々をガイドする立場にある有識者の方にも参考書として活用できるものになっています。

また、学ぶべき範囲を絞り、できるだけ内容を簡素化する為に、HTML・CSS・JavaScript個々に関する詳しい解説は省いています。

ページ5、6 (PDF版)
PDF版 ページ5、6

概要

§1 プロジェクトを始める
SvelteKitプロジェクトの作成方法を学習します。

§2 Web サイトを公開する
Firebaseと接続して静的サイトを公開する方法を学習します。

§3 プロジェクトを更新する
プロジェクトの編集と機能を拡張する方法を学習します。

§4 プロジェクト構成
プロジェクトに新規ページを追加し全体の構成を学習します。

§5 条件分岐と繰り返し
Svelteの持つ便利な機能を活用する方法を学習します。

§6 できるかな!?
これまでの学習内容を復習します。

§7 外部データの取得
インターネット経由でJSONデータを取得する方法を学習します。

§8 仕上げ
スタイルシートで全体をいい感じに仕上げて知見を共有します。自由課題

付録A もっと便利に
さらに便利になるSvelteの機能を学習します。

ページ11、12 (PDF版)
PDF版
セクション2 Zenn版
Zenn Book

謝辞

本書の執筆に至り多くのオープンソース・ソフトウェアにお世話になりました。執筆・出版に関わるすべての作業はopenSUSE Tumbleweedで行われました。ファイルツリー、ターミナルなどの図示はKDEアプリケーションで行われました。サンプルコードの実行はVirtualBoxを使い、Firefox Developer Editionで表示しました。原稿下書きにはghostwriterとGoogleDocsを、電子版組版にはScribusとPDF Arrangerを使用しました。個々の図表および表紙作成にはInkscapeとGimpを使用しました。これらのソフトウェアを恒常的に活用できる社会、そしてそれを実現させてきた先人達の活動の積み重ねに、心からの敬意と感謝の意を表します。

さらなる情報については…

What’s new in Svelte

Svelteの公式ブログ及び邦訳版ブログでは、毎月Svelteに関する最新情報がWhat’s new in Svelteとして紹介されています。

Blog • Svelte

https://svelte.jp/blog

Svelteコミュニティ

DiscordでSvelteコミュニティに参加しましょう！
グローバルなSvelte Discordチャンネルは、公式サイトのFAQページに掲載されているリンクから参加できます。

FAQ • Svelte
https://svelte.jp/faq#im-new-to-svelte

日本語向けSvelte日本 Discordチャンネルは、下記GitHubリポジトリのReadmeに掲載されているリンクから参加できます。

svelte-jp/svelte-site-jp: Svelteドキュメントの日本語化プロジェクト
https://github.com/svelte-jp/svelte-site-jp

Svelte Summit

Svelteのグローバルコミュニティ、Svelteソサエティーが主催するSvelteカンファレンスです。
過去に開催された情報は下記のYouTubeチャンネルで。

Svelte Society – YouTube
https://www.youtube.com/c/SvelteSociety

Home – Svelte Society
https://sveltesociety.dev/