SvelteとTailwindを用いたWebサイトテンプレート

出版日: 2024年4月25日

背景

ビジネスアイデアを考えるとき、ほとんどの場合、ウェブサイトを作成する必要があります。取引またはアプリのアイデアであれ、常にバックエンドとのインターフェースを作成してアイデアを実行する必要があります。

これはすべてのビジネスアイデアがウェブサイトを必要とすることを意味するわけではありません。しかし、私が考えるアイデアのほとんどはいつもそうです。おそらく、それが最初に私に興味深く見える理由かもしれません。

ですので、私は高頻度で、比較的似たようなスタック（Svelte、Tailwind）でウェブサイトを作成しているので、必要な時にテンプレートを使用できるようにしました。これにより、ウェブサイトの開発において、フォルダの作成、gitリポジトリの初期化、ナビゲーションバーの追加、ルートの作成などのボイラープレートの手順を回避できます。

方法

ここでは、ウェブサイトの作成に基本的な要素を提供するシンプルなSvelte＆Tailwindウェブサイトテンプレートを作成しています。これにより、ウェブサイトを作成する際に何度も同じことを書かなくても済みます。コーヒーブレイク

フォルダ構造

以下は、上記の画像に含まれる主なフォルダ/ファイルです：

.git: バージョン管理のために git init で作成されるフォルダ
.svelte-kit: create app で作成されるフォルダ
node modules: すべてのライブラリをインストールするには npm install --legace-peer-deps を使用します。これらはこのフォルダに表示されます
src: ウェブサイトのすべての要素（ルート、画像、コンポーネント）がここにあります。このフォルダについては、後のセクションで詳しく説明します。
static: HTMLファイルから参照される静的ファイルを保持します。例：ウェブサイトのロゴ
.env: 環境変数（APIキーなど）を保持します。注意：コードを本番環境に移動すると、これらの環境変数を本番環境に追加する必要があります。
.gitignore: gitに追跡しないファイルを指定します。例：.env、node_modules。環境。
.prettier__: リンティング＆フォーマット
netlify.toml: 私はウェブサイトを公開するためにNetlifyを使用しており、非常にお勧めです。これは、Netlifyが本番環境でサイトの実行バージョンを構築するのに役立ちます。
package__: プロジェクトを実行するために必要なNPMモジュール
README.md: サイトの概要。これはGitHubのリポジトリのランディングページで見られます。
svelte.config.js - vite.config.js: プロジェクトでSvelte＆Viteを実行するためのファイル。
tailwind.config.js - postcss.config.js: ウェブサイトのフォーマット用のファイル。

ソース（src）フォルダの詳細

前述のように、srcフォルダはSvelteプロジェクトの骨格を構成しています。このフォルダは以下の形式に構造化されています：

components: ページを埋めるために使用されるSvelteファイルがここに保存されます。コンポーネントはページ全体またはページの一部になることがあります。 (例：連絡先フォーム、コメント、タイトルなどの要素は何度も使用されるため、ゼロから作成するのではなく、コンポーネントに変換します)
icons: サイトのナビゲーションを支援する小さな画像（通常SVG）。通常、これらのアイコンもSvelteファイルとして保持し、アイコンの色やサイズをプロップとして要素に渡します。
images: ウェブサイトで使用される画像を保持するフォルダです。
routes: ウェブサイトのページ。各言語（en、jp）に対してフォルダを作成します。
stores: サイトの状態を制御するフォルダ（ダークモード、ユーザーID、ログインなど）。
utils: 一般的に使用される関数を含む.jsファイルを保持するフォルダ（データベースにレコードを追加する、タイムスタンプを日付に変換するなど）。
app.css: サイト全体に適用されるCSSルールを保持します。
app.html: ウェブサイトのエントリーポイント。