Skip to content

Commit

Permalink
Svelteの講義を2024年度向けに修正 (#181)
Browse files Browse the repository at this point in the history
* VS Codeを実際にベースにしているか要出典なので削除

* CodeSandboxの代わりにSvelte REPLを使うことを宣言

* Svelteの講義を2024年度向けに修正

CodeSandboxが仕様変更によって、ログインしないと編集できなくなってしまったため、代わりにSvelteのREPLを使用することにしました
  • Loading branch information
YAMAMOTO Yuji authored Aug 22, 2024
1 parent be6b22a commit 348c610
Show file tree
Hide file tree
Showing 12 changed files with 23 additions and 28 deletions.
51 changes: 23 additions & 28 deletions src/frontend/svelte/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ footer: CC BY-SA Licensed | Copyright (c) 2023, Internet Initiative Japan Inc.

## 事前準備

- [CodeSandbox](https://codesandbox.io/)というサービスを利用することで、適当なブラウザーさえ動けば学習できるようにします
- CodeSandboxならローカルにエクスポートしたプロジェクトをそのまま動作させることができる。「後で自分の環境にNode.jsをちゃんと入れて試したい!」という時も安心
- 万が一利用できない状況だった場合は[StackBlitz](https://stackblitz.com/)[Svelte公式のREPL](https://svelte.jp/repl/)を利用します
- [Svelte公式のREPL](https://svelte.jp/repl/)を利用するので、適当なブラウザーさえ動けば学習できます
- ローカルにエクスポートしたプロジェクトをそのまま動作させることができる。「後で自分の環境にNode.jsをちゃんと入れて試したい!」という時も安心
- ⚠️手元で確認したところ、残念ながらエクスポートしたファイルに日本語を入力していると、日本語の部分が文字化けしてしまうようです。
- 同じようなことは[CodeSandbox](https://codesandbox.io/)[StackBlitz](https://stackblitz.com/)でも出来ますが、現状アカウントの作成が必要なようなのでより簡単なSvelte公式のREPLを採用しました
- 万が一利用できない状況だった場合は[PLAYCODE](https://playcode.io/)を利用します

## Svelte とは

Expand All @@ -34,41 +36,34 @@ footer: CC BY-SA Licensed | Copyright (c) 2023, Internet Initiative Japan Inc.
- 他のフレームワークよりも短く簡潔に書けることを重視
- <https://svelte.jp/blog/write-less-code>

## 早速書こう

<!-- TODO: 特に他の開発環境を使った場合の説明は本文では行いませんが、万が一CodeSandboxが使えない場合でも頑張ってカバーできるよう、手順くらいは確認すること! -->

[CodeSandboxのプロジェクト作成ページ](https://codesandbox.io/s)に移動します:
## おことわり: Svelte 4の知識を紹介しています

![CodeSandboxのプロジェクト作成画面](./create-project.png)
実は近々Svelte 5が出ることが発表されています([参考](https://svelte.dev/blog/svelte-5-release-candidate))。Svelte 5は今回紹介するSvelte 4より大幅に**構文が変わってしまいます**が、まだリリース候補までしかリリースされていないことや、Svelte 4と基本的な考え方は変わらないと言う点を考慮し、ここではSvelte 4を取り上げます。

右上にある「🔍Search Templates」という検索ボックスに「svelte」と入力すると、次のようにSvelte製のアプリケーションを作るテンプレートがたくさんヒットします:

![CodeSandboxのプロジェクト作成画面における「svelte」の検索結果](./create-project-search-svelte.png)

検索結果の2番目次のように「Official」と書かれたものをクリックすると、テンプレートから動作するアプリがすぐに作成されます!
## 早速書こう

![Official Svelte CodeSandbox](./item-svelte.png)
[Svelte公式のREPL](https://svelte.jp/repl/)に移動すると、直ちに動作するアプリができます!

CodeSandboxのSvelteテンプレートで作成したプロジェクト(初期状態):
![Hello world](./initial-project.png)

![](./initial-project.png)
ℹ️ブラウザーをダークテーマに設定していると、SvelteのREPLもダークテーマになるので、上記とは色合いが大幅に異なります。

利用した開発環境によって変わりますが、CodeSandboxを使って上記👆のスクリーンショットにした状態について、画面上にあるものを解説します:
利用した開発環境によって変わりますが、Svelte REPLを使って上記👆のスクリーンショットにした状態について、画面上にあるものを解説します:

- 画面中央左にあるのが、プロジェクトにあるファイルの一覧です。CodeSandboxもStackBlitzも、おなじみVisual Studio Codeをブラウザー上で動かすことで実現しています
- 画面真ん中上に表示されているのが、今開いているファイルを編集する画面です。今開いているファイル(`index.js``src/main.js`)では、`App.svelte`というファイルに書かれたコンポーネント(後述)を指定した要素に適用しています
- ※Svelte REPLの場合初期状態で開かれているのはApp.svelte
- 画面真ん中下に表示されているのが、作成したアプリケーションを実行している画面です。編集画面でファイルを変更・保存する度に更新され、都度動作確認できます
- 画面左側がエディターです。上部の「App.svelte」と書かれている箇所が現在開いているファイルの名前で、右隣の「+」ボタンを押すと新しいファイルが作れます
- お手元のブラウザーのタブ機能などと似たようなものなので、特に使うのは難しくないでしょう
- 画面右側に、エディターで入力した結果のアプリケーションが表示されます
- 編集画面でファイルを変更・保存する度に更新され、都度動作確認できます
- `console.log`で出力した情報を右下の「Console」ですぐに閲覧できるようにもなっています

### 🚩チェックポイント

- CodeSandboxなどのブラウザー上で動く開発環境を利用して、Svelte製のアプリケーションをテンプレートから作成できた
- CodeSandboxなどのブラウザー上で動く開発環境について、画面にあるものを大まかに理解できた
- SvelteのREPLなどのブラウザー上で動く開発環境を利用して、Svelte製のアプリケーションをテンプレートから作成できた
- SvelteのREPLなどのブラウザー上で動く開発環境について、画面にあるものを大まかに理解できた

## その1 ほぼただのHTML

ここからは、`App.svelte`(StackBlitzの場合`src/App.svelte`というファイルを編集することで、Svelteにおけるコンポーネントの作成方法を紹介します。
ここからは、`App.svelte`というファイルを編集することで、Svelteにおけるコンポーネントの作成方法を紹介します。

App.svelte:

Expand Down Expand Up @@ -98,7 +93,7 @@ App.svelte:

例:

![Hello 鈴木 幸一さん!](./step2.png)
![Hello 鈴木幸一さん!](./step2.png)

## その3 イベントハンドラーを設定

Expand Down Expand Up @@ -229,11 +224,11 @@ Svelteにおける`let [変数名] = ...`の`...`に書く式は、あくまで

ここからは、ボタンを押した回数が「3の倍数のときだけアホになるボタン」というコンポーネントを、いくつかのステップに分けて作ってみましょう。まずは一つの`.svelte`ファイルに書いていたコンポーネントを、別の`.svelte`ファイルに分割する方法を紹介します。

コンポーネントを分割する方法を説明するため、ここまで編集した`App.svelte`と同じディレクトリーに新しいファイルを作成してください。CodeSandboxの画面中央左の方にある、紙に折り目をつけたようなアイコン📄を押すと、新しいファイルができます:
コンポーネントを分割する方法を説明するため、ここまで編集した`App.svelte`とは別に新しいファイルを作成してください。「App.svelte」と書かれているすぐ隣の「+」ボタンを押すと、新しいファイルができます:

![](./step6-button.png)

ファイル名は`NabeatsuButton.svelte`にしましょう(最終的に「3の倍数のときだけアホになるボタン」にするので)。
続けてファイル名の入力を求められるので、今回は`NabeatsuButton.svelte`にして(最終的に「3の倍数のときだけアホになるボタン」にするので)、<kbd>Enter</kbd>を押してください

ファイルができたら、内容は次のようにしてください:

Expand Down
Binary file removed src/frontend/svelte/create-project-search-svelte.png
Binary file not shown.
Binary file removed src/frontend/svelte/create-project.png
Binary file not shown.
Binary file modified src/frontend/svelte/initial-project.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/frontend/svelte/item-svelte.png
Binary file not shown.
Binary file modified src/frontend/svelte/step2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step4.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step5-error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step5.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step6-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/svelte/step6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 348c610

Please sign in to comment.