Svelte_環境構築検証 - Paku-Soba/Svelte-example-app GitHub Wiki

SvelteKitプロジェクト作成及び起動確認

  • SvelteKitでのプロジェクトの作成を検証する。
    • SvelteによるWebアプリケーション構築にはUI以外の部分を提供するフレームワークのSvelteKitが必要である。
    • npm create svelte@latestコマンドラインでSvelteKitでのプロジェクト作成実行。
    • npm run dev -- --openコマンドラインでプロジェクト起動確認済み。
    • 作成した環境にてsampleソースコード作成し、ブラウザ上にてサンプルページの動作確認済み。
      • ローカル上では起動及び動作確認済みだが、GitHubリポジトリ上ではsampleソースコードが見れない状況。
        • 原因予想として、mkdirコマンドでcreate-svelteディレクトリを作成し、その配下にてプロジェクト作成コマンドを実行した。
        • あとは、Gitコマンドの打ち間違いも考えられる。
          • 優先度低い為、原因調査及び対応などは後回しにする。
    • SvelteKitプロジェクト作成及び起動、動作確認ができた為、環境構築検証の目的は達成したと見なす。
      • Svelteによる規模が大きいプロジェクト開発では、TypeScript使用が推奨されている。
      • 今回は機能2つ規模の画面実装の為、JavaScriptを使用する。
      • その他プロジェクト作成時の設定項目は、本実装の環境構築時、再度検討する。
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm create svelte@latest

create-svelte version 5.3.2

┌  Welcome to SvelteKit!
│
◇  Where should we create your project?
│    (hit Enter to use current directory)
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

✔ Type-checked JavaScript
  https://www.typescriptlang.org/tsconfig#checkJs

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: npm install
  2: git init && git add -A && git commit -m "Initial commit" (optional)
  3: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm install

added 113 packages, and audited 114 packages in 40s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$  git init && git add -A && git commit -m "Initial commit" (optional)
bash: syntax error near unexpected token `('
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ git init && git add -A && git commit -m "Initial commit"
힌트: Using 'master' as the name for the initial branch. This default branch name
힌트: is subject to change. To configure the initial branch name to use in all
힌트: of your new repositories, which will suppress this warning, call:
힌트: 
힌트:   git config --global init.defaultBranch <name>
힌트: 
힌트: Names commonly chosen instead of 'master' are 'main', 'trunk' and
힌트: 'development'. The just-created branch can be renamed via this command:
힌트: 
힌트:   git branch -m <name>
/Users/mac-mr9v2j001/Documents/GitHub/Svelte-example-app/create-svelte/.git/ 안의 빈 깃 저장소를 다시 초기화했습니다
[master (최상위-커밋) 9ea122f] Initial commit
 31 files changed, 16067 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 README.md
 create mode 100644 jsconfig.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 src/app.d.ts
 create mode 100644 src/app.html
 create mode 100644 src/lib/images/github.svg
 create mode 100644 src/lib/images/svelte-logo.svg
 create mode 100644 src/lib/images/svelte-welcome.png
 create mode 100644 src/lib/images/svelte-welcome.webp
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/+page.js
 create mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/Counter.svelte
 create mode 100644 src/routes/Header.svelte
 create mode 100644 src/routes/about/+page.js
 create mode 100644 src/routes/about/+page.svelte
 create mode 100644 src/routes/styles.css
 create mode 100644 src/routes/sverdle/+page.server.js
 create mode 100644 src/routes/sverdle/+page.svelte
 create mode 100644 src/routes/sverdle/game.js
 create mode 100644 src/routes/sverdle/how-to-play/+page.js
 create mode 100644 src/routes/sverdle/how-to-play/+page.svelte
 create mode 100644 src/routes/sverdle/reduced-motion.js
 create mode 100644 src/routes/sverdle/words.server.js
 create mode 100644 static/favicon.png
 create mode 100644 static/robots.txt
 create mode 100644 svelte.config.js
 create mode 100644 vite.config.js
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$  npm run dev -- --open


> [email protected] dev
> vite dev --open

▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    ../jsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Forced re-optimization of dependencies

  VITE v4.5.1  ready in 1383 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
3:21:29 PM [vite] ✨ new dependencies optimized: @neoconfetti/svelte
3:21:29 PM [vite] ✨ optimized dependencies changed. reloading

.svelteのsampleソースコード作成及び動作確認

  • 作成したSvelteKitプロジェクト配下にて、sampleソースコードを作成。
  • ブラウザ上にてサンプルページの動作確認済み。
sample.mov
+page.svelte サンプルコード
  • create-svelte/src/routes/sample/+page.svelte
<script>
    function load(){
        alert('送信は未実装です。');
    }
</script>

<div>
    <!-- 各要素を配置していく -->
        <div class="centered">
            <h1>Today todos</h1>
            <ul>
                <li>
                    <label for="namelabel01">TODO_01.</label>
                    <input type="text" name="name" id="namelabel01" />
                </li>
                <li>
                    <label for="namelabel02">TODO_02.</label>
                    <input type="text" name="name" id="namelabel02" />
                </li>
                <li>
                    <label for="namelabel03">TODO_03.</label>
                    <input type="text" name="name" id="namelabel03" />
                </li>
                <li>
                    <label for="namelabel04">TODO_04.</label>
                    <input type="text" name="name" id="namelabel04" />
                </li>
            </ul>
            <input on:click={load} type="submit" value="送信する">
        </div>
</div>

<style>
    .centered {
        max-width: 20em;
        margin: 0 auto;
    }
</style>
⚠️ **GitHub.com Fallback** ⚠️