Chapter 02無料公開

§1 プロジェクトを始める

fkuMnk
fkuMnk
2023.01.10に更新
このチャプターの目次
  1. 1-1 新規フォルダを作成する
  2. 1-2 サンプルプロジェクトの作成
    1. インストール
    2. プロジェクト作成手順
    3. Next steps
    4. フォルダ構成の確認
  3. 1-3 新規プロジェクトの作成
    1. Next steps
    2. 初期設定の解説
  4. 1-4 スタティックアダプタのインストール
    1. Adapters
    2. adapter-staticのインストール
  5. 1-5 プロジェクトをビルドする
  6. 絶対たのしい!! Svelteトレーニング 第二回

1-1 新規フォルダを作成する

お使いのコンピュータに新しいフォルダを作成して、本書のチュートリアルを始める準備をしましょう。
ここでは trySveltekit/ というフォルダを作成します。

本章ではこのフォルダ内に2つのSveltekitプロジェクトを作成し、Sveltekitプロジェクトのはじめ方と、プロジェクトを静的ファイルとして出力する方法を学習します。

  • static-webフォルダ
    　この章で作成するWebサイトプロジェクト

  • my-appフォルダ
    　この章で作成するサンプルプロジェクト

1-2 サンプルプロジェクトの作成

Sveltekitには学習のためのサンプルプロジェクトが用意されています。 まずはこのサンプルプログラムをインストールするところから始めましょう。 ここでは、ターミナル画面でSvelteKitのインストールを行い、WebブラウザでWelcomeページが表示されるまでの学習を行います。

インストール

SvelteKitはnpmコマンドを使用してプロジェクトを作成します。 コマンドの使用方法は、SvelteKitのWebサイトに記載されている内容をご確認ください。SvelteKitは本書の執筆時点でもダイナミックに開発が進められています。常に公式サイトで紹介されている手順に従ってプロジェクトを作成しましょう。

SvelteKit (邦訳サイト)
https://kit.svelte.jp/

プロジェクト作成手順

  • trySvelteKit/ フォルダでターミナルを開きます
  • ターミナルでプロジェクト作成コマンドを実行します。下記のnpmコマンドを実行すると、my-appというフォルダに新しいSvelteKitプロジェクトが作成されます。
npm create svelte@latest my-app

次のメッセージが表示された場合は、yを入力してエンターキーで決定して下さい。プロジェクト作成に必要なパッケージがインストールされます。

※すでにcreate-svelte@latestパッケージがインストールされている場合には表示されません。

コマンドを実行すると初期設定が始まります。ここでは質問の順に下記のように答えましょう。

  • Which Svelte app template? と尋ねられるので、カーソルキーでSvelteKit demo appを選択してエンターキーで決定します。
  • Add type checking with TypeScript? と尋ねられるので、
    Yes, using JavaScript with JSDoc commentsを選択して決定します。
  • Add ESLint for code linting? と尋ねられるので、
    Noを選択して決定します。
  • Add Prettier for code formatting? と尋ねられるので、
    Noを選択して決定します。
  • Add Playwright for browser testing? と尋ねられるので、
    Noを選択して決定します。
  • Add Vitest for unit testing? と尋ねられるので、
    Noを選択して決定します。

Your project is ready! のメッセージの後に説明文が表示され、プロジェクトが作成されます。

Next steps

Next steps:の指示にしたがってプロジェクトの初期化を進めましょう。

  1. trySvelteKit/my-app/ フォルダでターミナルを開きます。
  2. installコマンドを実行してプロジェクトを初期化します
    • npm install
  3. gitの使用が推奨されますが、今回のチュートリアルでは使わなくても構いません。
  4. サンプルプロジェクトを実行し、Webブラウザで表示します
    • npm run dev -- --open
  5. WebブラウザにWelcomeページが表示されていることを確認します。
  6. ターミナル画面に戻り、サンプルプロジェクトを停止します。実行中のプロジェクトを終了するにはCtrlキーを押しながらCキーを入力します。

フォルダ構成の確認

これでSvelteKitのサンプルプロジェクトが作成されました。このサンプルプロジェクトは、これから作成する新しいプロジェクトとの比較のためにこのまま残しておきます。

サンプルプロジェクトのフォルダ構成

1-3 新規プロジェクトの作成

ここでは、これからチュートリアルで作成するWebサイトのための新しいSvelteKitプロジェクトを作成する方法を学習します。 サンプルプロジェクト作成のときと同じく、npmコマンドを使ってプロジェクトを作成します。 プロジェクト名はstatic-webとし、下記のようにコマンドを実行しましょう。

  • trySvelteKit/フォルダでターミナルを開きます
  • ターミナルでプロジェクト作成コマンドを実行します。下記のnpmコマンドを実行して、static-webというSvelteKitプロジェクトを作成します。
    • npm create svelte@latest static-web

初期設定では、質問の順に下記のように答えましょう。

  • Which Svelte app template? と尋ねられるので、カーソルキーでSkeleton projectを選択してエンターキーで決定します。
  • Add type checking with TypeScript? と尋ねられるので、
    Yes, using JavaScript with JSDoc commentsを選択して決定します。
  • Add ESLint for code linting? と尋ねられるので、
    Yesを選択して決定します。
  • Add Prettier for code formatting? と尋ねられるので、
    Yesを選択して決定します。
  • Add Playwright for browser testing? と尋ねられるので、
    Yesを選択して決定します。
  • Add Vitest for unit testing? と尋ねられるので、
    Yesを選択して決定します。

Your project is ready! のメッセージの後に説明文が表示され、プロジェクトが作成されます。

Next steps

Next steps:の指示にしたがってプロジェクトの初期化を進めましょう。

  1. trySvelteKit/static-web/ フォルダでターミナルを開きます
  2. プロジェクトを初期化します
    • npm install
  3. gitの使用が推奨されますが、今回のチュートリアルでは使わなくても構いません。
  4. サンプルプロジェクトを実行し、Webブラウザで表示します
    • npm run dev -- --open
  5. WebブラウザにWelcomeページが表示されていることを確認します。
  6. ターミナル画面に戻り、プロジェクトを停止します。実行中のプロジェクトを終了するにはCtrlキーを押しながらCキーを入力します。

これで空のSvelteKitプロジェクトが作成されました。

初期設定の解説

初期設定時の選択項目について補足します。

選択項目の一覧

  • Add type checking with TypeScript?
    • Svelteファイル内でTypeScriptを使用するかどうか。
  • Add ESLint for code linting?
    • npm run lint コマンドで構文チェックを行うかどうか。
  • Add Prettier for code formatting?
    • npm run format コマンドでプロジェクト内のファイルのフォーマットを行うかどうか。
  • Add Playwright for browser testing?
    • npm run test コマンドでE2Eテストを実行するかどうか。
  • Add Vitest for unit testing?
    • npm run test:unit コマンドで単体テストを実行するかどうか。

1-4 スタティックアダプタのインストール

次に、SvelteKitがプロジェクトを静的ファイルとして出力(ビルド)できるように、追加の設定を行います。

Adapters

SvelteKitは様々な公開先の環境に合わせてプロジェクトをビルドできるように、adapterという機能を持っています。
このチュートリアルでは、プロジェクトを静的サイトとしてビルドするために、adapter-staticを使用します。

参考：SvelteKit Docs | Adapters 静的サイト
https://kit.svelte.jp/docs/adapters#supported-environments-static-sites

adapter-staticのインストール

adapter-static は、GitHubにリポジトリが公開されています。
https://github.com/sveltejs/kit/tree/master/packages/adapter-static

READMEにあるUsageの項目を参考にインストールを行い、プロジェクトに設定ファイルを追加しましょう。

  • trySvelteKit/static-web/ でターミナルを開きます。
  • 下記のコマンドでadapter-staticをインストールします。
    • npm i -D @sveltejs/adapter-static

static-web/src/routes/+layout.js ファイルを作成し、下記2行を追加します。

+layout.js
export const prerender = true;
export const trailingSlash = 'always';

static-web/svelte.config.jsを開き、設定項目を追加します。編集後のファイルは下記のようになります。

svelte.config.js
//import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
          pages: 'build',
          assets: 'build',
          fallback: null,
          precompress: false
        })
    }
};

export default config;

ここで編集したファイルは、次の2ファイルです。SvelteKitに慣れるまでは各ファイルの場所を見失わないよう、フォルダ構成に気をつけましょう。

ファイルの追加場所に注意

1-5 プロジェクトをビルドする

プロジェクトをビルドして静的Webサイトを出力しましょう。 SvelteKitはbuildコマンドでプロジェクトを出力します。

  • trySvelteKit/static-web/フォルダでターミナルを開く
  • 下記のビルドコマンドを実行する
    • npm run build

成功するとdone というメッセージが表示されるとともに、
static-web/build/フォルダ内に静的ファイルが出力されます。

ビルドが成功した様子

SvelteKitではpreviewコマンドで出力されたファイルを実行して表示を確認することができます。

  • trySvelteKit/static-web/フォルダでターミナルを開く
  • 下記のビルドコマンドを実行する
    • npm run preview -- --open
  • WebブラウザにWelcomeページが表示されていることを確認します。
  • ターミナル画面に戻り、Ctrlキーを押しながらCキーを入力してプロジェクトを停止します。

これでWebサイトを公開するために必要なファイルが出力されました。

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

オンラインチュートリアルを活用しよう！
svelte.jp(およびsvelte.dev)には、REPLを使ってSvelteの機能を網羅的に学習できるオンラインチュートリアルが用意されています。ここで3日から1週間ほど集中して学習すれば、Svelteの持つ基本的な機能を、ほぼ使いこなす事ができるようになるでしょう。