Svelte アプリケーションのスタイル設定方法

Web フレームワークは次々と登場しますが、最も有望なものの 1 つは Svelte です。Svelte は React に代わる優れた選択肢であり、すでに大きなコミュニティを擁していますが、間違いなく注目すべきフレームワークです。Svelte は、さまざまなアプローチが用意されているため、アプリのスタイル設定を簡単に行うことができます。

Svelte アプリケーションのスタイル設定

すべての UI ライブラリまたはフレームワークには、そのコンポーネントのスタイルを設定するためのメソッドが必要です。コンポーネントベースのフレームワークのほとんどは、コンポーネントのスタイルを設定する従来の方法をサポートしています。つまり、CSS ファイルをインポートするだけで完了です。Svelte も例外ではありません。Svelte では、それぞれに長所と短所がある 3 つの主要な方法でアプリケーションのスタイルを設定できます。

Svelte プロジェクトの設定

Svelte をインストールするには、フロントエンドビルドツールの ViteJS を使用できます。設定するには、コンピュータに Node.js ランタイムと Node パッケージマネージャー (NPM) が正しくインストールされていることを確認してください。次のターミナルコマンドを実行して、Node.js と NPM の可用性を確認できます。

node -v

Node が実行されていることを確認したら、ターミナルを開いて次のコマンドを実行します。

npm create vite

または:

yarn create vite

これにより、新しい Vite プロジェクトが作成されます。プロジェクト名を好きな名前に設定し、フレームワークを「Svelte」、バリアントを JavaScript にする必要があります (ただし、TypeScript に慣れている場合は TypeScript を使用できます)。次に、cdコマンドを使用してプロジェクトディレクトリに切り替え、次のコマンドを実行して必要な依存関係をインストールします。

npm install

または:

yarn

依存関係をインストールしたら、次のコマンドを実行して開発サーバーを起動できます。

npm run dev

または:

yarn dev

プロジェクトのマークアップを定義する

任意のコードエディタでプロジェクトを開き、assetsフォルダーとlibフォルダーを削除します。また、app.cssファイルとApp.svelteファイルの内容を必ず消去してください。main.jsファイルを開き、その内容を次のように置き換えます。

import App from './App.svelte'
const app = new App({
target: document.getElementById('app'),
})
export default app

次に、App.svelteファイルを開き、scriptタグで次のようなさまざまなリンクを保持する配列を作成します。

<script>
let imageLinks = [
"https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
"https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
"https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
"https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
"https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
"https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
];
</script>

scriptタグの下に、すべての子「container」div を保持するmain要素を作成します。これにより、すべての画像が保持されます。次に、imageLinksの各要素を反復処理し、各反復処理に対してimage要素をレンダリングします。

<main>
<h1>Cute Cat Gallery</h1>
<h3>See the cutest images of cats from the internet</h3>
<div>
{#each imageLinks as url}
<div>
<img src={url} />
</div>
{/each}
</div>
</main>

マークアップを定義したら、最初のメソッドである直接 CSS インポートを使用してアプリケーションのスタイルを設定します。

直接 CSS インポートを使用した Svelte コンポーネントのスタイル設定

Svelte コンポーネントのスタイルを設定する一般的な方法の 1 つは、外部 CSS ファイルを記述してコンポーネントに直接インポートすることです。scriptタグの最上位レベルで、app.cssファイルを次のようにインポートします。

import "./app.css";

次に、app.cssファイルを開き、「container」クラスの display プロパティを「grid」に設定し、「image-container」クラスのpaddingを 10px に設定します。

.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
}
.image-container {
padding:10px;
}

画像を選択してレスポンシブにし、ホバーされた画像に適切なスタイルを追加します。

img {
max-width: 100%;
height: auto;
border-radius: 10px;
transition: 250ms;
}
img:hover {
scale: 1.03;
transition: 250ms;
}

ブラウザでコードを実行すると、次のようになります。

直接 CSS インポートの利点

再利用性: CSS を外部ファイルで定義すると、複数のコンポーネントで同じスタイルを簡単に再利用できます。これは、さまざまなコンポーネントで同じスタイルを共有する場合に便利です。
柔軟性: Web サイトのデザインを再設計することにした場合、HTML 構造を変更することなく、外部 CSS ファイルのスタイルを更新できます。この懸念の分離により、サイトのデザインを適応させる際に柔軟性が高まります。

直接 CSS インポートの欠点

複雑性のカスケード: 外部ファイルで CSS を定義することは強力ですが、外部スタイルが相互に作用すると予期しない競合やオーバーライドが発生する可能性があります。これにより、時間のかかるデバッグとトラブルシューティングが発生する可能性があります。Svelte ファイルにstyleタグを直接使用することで、予期しないスタイルの競合を防ぐことができます。
読み込み時間の増加: ユーザーが Web サイトにアクセスすると、HTML ファイルとオプションの JavaScript ファイルに加えて、外部 CSS ファイルをダウンロードする必要があります。これは、読み込み時間に数ミリ秒を追加する可能性がありますが、それほど多くないと思われるかもしれませんが、外部 CSS ファイルが多い場合は累積する可能性があります。

Svelte スタイルタグを使用したスタイル設定

Svelte コンポーネントのスタイルを設定する 2 番目の方法は、Svelte によって提供されるstyleタグを使用することです。構文は次のようになります。

<script>
<!-- Your logic goes here -->
</script>
<!-- Markup goes here -->
<style>
<!-- styling goes here -->
</style>

この方法の 1 つの利点は、スタイルをコンポーネントに適用することです。つまり、1 つのコンポーネントのスタイルは別のコンポーネントのスタイルに影響を与えることがありません。Svelte のstyleタグは最も優先度が高く、特定の要素に対する外部 CSS スタイル設定をオーバーライドすることに注意することが重要です。それを説明するために、App.svelteファイルの最後に次のコードを追加します。

<style>
h1 {
background-color: red;
}
</style>

次に、App.cssファイルの最後に次のコードを追加します。

h1 {
background-color: yellow;
}

ブラウザでコードを実行すると、h1要素が赤の背景色になることがわかります。これは、App.cssファイルで設定された黄色の背景色をオーバーライドしています。

CSS プリプロセッサによるスタイル設定

Svelte コンポーネントのスタイルを設定する 3 番目に人気のある方法は、styleタグで CSS プリプロセッサを使用することです。CSS プリプロセッサには多くの利点があり、高度な関数、ミックスイン、さらにはネイティブ CSS の新機能であるネストされたスタイル設定もサポートできます。

選択できるプリプロセッサは多く、LessCSS、Sass、Stylus などがあります。お気に入りのプリプロセッサを使用するには、次を実行して開発依存関係としてインストールする必要があります。

npm install -D <css-preprocessor>

または:

yarn add -D <css-preprocessor>

実際のプリプロセッサの名前をで置き換えてください。たとえば、Less をインストールしてプロジェクトで使用したい場合は、次のコマンドを実行します。

npm install -D less

または:

yarn add -D less

これを行ったら、styleタグにlang属性を追加して「less」に設定できます。

<style lang="less">
</style>

これで、Less CSS のすべての優れた機能を Svelte コンポーネントのスタイル設定に使用できるようになりました。

Svelte を驚くほどにしているものとは?

すべての Svelte ファイルは「.svelte」拡張子で終わります。Svelte コンパイラは、.svelteファイルに記述されたコードを解析し、ブラウザに送信するための適切な JavaScript と CSS を生成します。このプロセスにより、Web ページが高速化され、ユーザーエクスペリエンスが向上します。

プロジェクトで外部 JavaScript ライブラリを使用したい場合は、.svelteファイルに直接インポートして、ラッパーを必要とせずに使用できます (React とは異なり)。

パソコンの友達

Svelte アプリケーションのスタイル設定方法