Svelte の一番簡単な始め方
これならすぐにできる。
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/the-easiest-way-to-get-started日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
Svelte は新しい種類のフレームワークです。<script src='svelte.js'> タグをページに配置するか、import か require を利用してアプリケーションに持ってくるよりもむしろ、Svelte はページで動作する前にコンポーネントファイルを美しく最適化された JavaScript に変換するためのコンパイラといえます。
そのため、最初は少し戸惑うかもしれません。どのように Svelte アプリを作ればよいのか？と疑問を持つかもしれません。
1. REPL の利用
最も簡単に始められる方法は Svelte REPL (Read-Eval-Print Loop) です。コードを編集してその結果をすぐに確認することができるインタラクティブな環境です。
examples のリストから選択し、REPL リンクをクリックし、お望み通りの動作になるまで微調整をすることができます。
ある時点で、あなたのアプリは REPL を超えてしまいます。ダウンロードボタンをクリックして svelte-app.zip ファイルをコンピュータに保存し、解凍してください。
ターミナルウィンドウを開きプロジェクトを設定しましょう…
cd /path/to/svelte-app
npm install…そして開発サーバーを起動します:
npm run devこれによってアプリが localhost:8080 で起動し、svelte-app/src ファイルを変更するたびに Rollup が再ビルドします。
2. degit の利用
REPL からダウンロードした場合、カスタマイズされたバージョンの sveltejs/template リポジトリを取得することになります。プロジェクトの足場となるツール degit を使えば zip ファイルを操作する必要はありません。
ターミナルでは、このように新しいプロジェクトをすぐに作ることができます:
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install
npm run devこれにより新しいプロジェクトが my-svelte-project ディレクトリ内に生成され、依存関係をインストールし、http://localhost:8080 でサーバーが起動されます。
TypeScript のより詳しい使用方法を知りたい場合は こちら をご参照ください。
一度少しいじってみて全体がどのように組み合わさっているかを理解しましたら、sveltejs/template をフォークし、代わりに以下を実行することができます:
npx degit your-name/template my-new-projectこれで完了です！本番環境に対応したバージョンのアプリを作成するために npm run build を使用し、プロジェクトテンプレートの README から Vercel や Surge を用いてアプリを簡単に Web にデプロイする方法についての説明を確認してください。
Rollup を使うことに制限はありません — webpack、Browserify やその他の統合ツールもありますし、Svelte CLI (2019年からのアップデート: Svelte 3 では CLI は非推奨となり、現在ではsirv-cli をテンプレートで使用しています。ご自由にお好きなツールをご利用ください！) や API を使うこともできます。これらのツールの1つを用いてプロジェクトテンプレートを作成する場合は、是非 Svelte Discord chatroom か、Twitter で @sveltejs にご共有ください！