ライトニングワークショプSvelteKit導入編課題集
fkuMnk課題一覧【もくじ】
各自で課題を選択し、任意のペースで進めます。複数の課題にチャレンジしてもかまいません。
- 学習する
- 開始する
- 開発する
- 公開する
- 参加する
ワークショップ進行資料
■初出
TechRAMEN 2024 Conference
fkuMnk学習する：オンラインチュートリアルを進める
Svelte日本語Webサイトを開きます
※svelte.devでもかまいません（英語）
【チュートリアル】を選択します
ブラウザ内で操作できるオンラインチュートリアルが開始されます。
fkuMnk開始する：新規プロジェクトを作る
npm create コマンドでSvelteKitの新規プロジェクトを作ります
SvelteKit日本語Webサイトを開きます
新規プロジェクトの作成手順を確認します。必ず（できるだけ）公式サイトで最新の手順を確認するようにします。
手順に沿ってコマンドを実行していきます。
１，２行目のmy-appが、これから作成するプロジェクトの名前です。任意のプロジェクト名に変更してもかまいません。
1行目のコマンドを実行すると、新規プロジェクトの作成が始まります。いくつかの選択項目が表示されるので、メッセージに従って進めていきます。
プロジェクトの作成に必要なパッケージが無い場合はここでインストールします。
プロジェクトのテンプレートを選択します。カーソルキー上下で選択肢を切り替えてEnterキーで決定します。
TypeScriptを使用するかどうかを選択します。
プロジェクトの追加オプションを選択します。カーソルキー上下で選択肢を切り替えてスペースキーで選択し、Enterキーで決定します。
プロジェクトの作成が成功すると、次に実行するコマンドが表示されます。
表示順にコマンドを実行してプロジェクトの動作を確認します。
fkuMnk開始する：クラウドIDEで新規プロジェクトを作る
※Googleアカウントを使用します
【Project IDX】はクラウド上で実行する開発環境です。
ブラウザでidx.devを開きます。
Get Startedからダッシュボードを開きます。
See all templates→ですべてのテンプレートを表示します。
MiscからBlank Workspaceを選択し、名前をつけて新しいワークスペースを作ります。
ワークスペースが開きました。
メニューからターミナルを開きます。
このターミナル内で、新規プロジェクトを作る を試します。
fkuMnk開発する：HTML、CSS、JavaScriptを書く
SvelteKitの新規プロジェクトを作成します（既存のプロジェクトでもかまいません）
src/routes/+page.svelte ファイルを開きます。
svelte.jpのドキュメントからSvelte componentsを開きます。
ドキュメントの内容に沿って、+page.svelteファイルを編集します。
よくわからない所は飛ばしても大丈夫です。自由にページを編集できます。
fkuMnk開発する：Svelteのロジックブロックを試す
SvelteKitの新規プロジェクトを作成します（既存のプロジェクトでもかまいません）
svelte.jpのドキュメントからLogic blocksを開きます
src/routes/+page.svelte ファイルを開きます。
ドキュメントの内容に沿って、+page.svelteファイルを編集します。
よくわからない所は飛ばしても大丈夫です。自由にページを編集できます。
fkuMnk開発する：SvelteKitのルーティングを試す
SvelteKitの新規プロジェクトを作成します（既存のプロジェクトでもかまいません）
kit.svelte.jpのドキュメントからルーティングを開きます。
ドキュメントの内容に沿って、srcフォルダのファイルを追加していきます。
fkuMnk公開する：FirebaseHostingに公開する
※Googleアカウントを使用します
SvelteKitのデプロイ準備
SvelteKitの新規プロジェクトをSkeleton projectテンプレートで作成します。
SvelteKitのドキュメントで、Static site generation を開きます。
【使い方】を実行します。
プロジェクトをビルドします。
npm run build
buildフォルダに静的ファイルが出力されます。
Firebaseでのデプロイ準備
Firebase CLI リファレンスを開きます。
SvelteKitプロジェクトのフォルダに移動します。
【Firebase CLI にログインしてテストする】まで進めます。
【Firebase プロジェクトを初期化する】を実行します。
Hostingを選択します。
Create a new projectを選択してデプロイ先の新しいFirebaseプロジェクトを作ります。
publicディレクトリをbuildに指定します。
【Firebase プロジェクトをローカルで実行してテストする】を実行します。
デプロイする
Firebase のデプロイコマンドでインターネット上にSvelteKitプロジェクトを公開します。
firebase deploy --only hosting
Firebaseコンソールを開いてプロジェクトを選択し、Hosting状況を確認します。
※ワークショップ終了後、使わなくなったFirebaseプロジェクトは削除しておきます。
fkuMnk公開する：実験的な機能・Web Frameworksを使う
※Googleアカウントを使用します
これは現段階では実験的な機能です。Firebase HostingにSvelteKitアプリケーションを静的化出力せずにデプロイすることができます。
好奇心旺盛な方は、下記のGithubリポジトリを参考に試してみてください。
GitHub - FirebaseExtended/firebase-framework-tools: Experimental addon to the Firebase CLI to add web framework support
■ 参考資料
Firebaseの実験的な機能 【Web Frameworks】を使うたで - Google スライド
fkuMnk学習する：オンラインドキュメントを読む
Svelte日本語Webサイトを開きます
【ドキュメントを読む】を選択します。
ドキュメントを読み進めていきます。
やがてコードを書きたくて仕方がなくなってきます。他の課題を進める時がきました。
fkuMnk参加する：Svelte JapanのDiscordに加わる
Svelte JapanはSvelteに関する日本語のコミュニティです。
svelte.jpを開き、Discordのアイコンをクリックします。
招待を受けます。
ルールチャンネルを読んでコミュニティに参加します。
興味のあるチャンネルの会話を読みます。
fkuMnk参加する：Svelte Japanのイベントに参加する
Svelte Japanの主催するコミュニティイベントはconnpassから参加できます。
connpassのグループページを開きます。
Svelte Japanグループに参加します。
予定が合えば次回のオンラインイベントに参加します。
終了したイベントやこれまでに発表された資料を読みます。
fkuMnk参加する：Svelte SocietyのDiscordに加わる
Svelte SocietyはSvelteファンのグローバルなネットワークです。
Svelte SocietyのWebサイトを開きます。
Discordのアイコンをクリックします。これはsvelte.devに掲載されているDiscordと同じものです。
招待を受けます。
server-guideを読んでコミュニティに参加します。
興味のあるチャンネルの会話を読みます。
fkuMnk参加する：Svelte Summitに参加する
Svelte Summitは毎年主に春と秋に開催されるSvelteのコミュニティイベントです。
Svelte SummitのWebサイトを開きます。
これまでの開催情報をチェックします。
そろそろ、次回が...？ などとおもってドキドキします。
fkuMnk開発する：UI ToolkitのSkeletonを試す
※注：新規プロジェクト作成時のSkeletonテンプレートではありません
SkeletonはWebアプリケーションのUI Toolkitで、Tailwindを使えます。
Skeletonのドキュメントから、Get startedを開きます。
Install Skeleton → Manual Installを実行して既存のSvelteKitプロジェクトにUIを追加します。
Install Tailwind → Manual Installを実行してTailwindを追加します。
Tailwind Configurationへ進み、tailwind.config.js(もしくは.ts)ファイルを編集します。
app.htmlのbodyタグのdata-theme属性を編集してテーマを設定します。
これでUI ToolkitとTailwindが使えるようになりました。
SkeletonのドキュメントからQuickstartを開き、Page Setup以降を進めます。
時間に余裕が、あるいはとても興味があれば以下も試してみます。
各種コンポーネントを試す
レイアウトを試す