ちょっとした小技

リセットCSS

CSSを書いていて、ブラウザやデバイスによる表示の差をなくすためのリセットCSSを使いたくなることがあると思います。SvelteKitを使って、どう書くか悩むところですが、一例を示しておこうと思います。src/routes/reset.cssというファイルを作成し、内容は以下のようにしてください。(使いたいリセットCSSがあるならそれを使っても大丈夫です。)

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

そしたら、src/routes/+layout.svelteのスクリプトの部分でインポートしてください。

import "./reset.css";

表示がリセットされたのではないかと思います。

Intersection Observer APIとアタッチメント

ページを書いていて、要素が画面に表示されたら何か変化を起こしたくなることがあると思います。

つまりこういうことです。

これを実現する方法を見ていきましょう。

まずは、スクリプトの部分でAttachmentというものをインポートしてください。(TypeScriptのみ、JavaScriptでは不要です。)

import type { Attachment } from "svelte/attachments";

そしたら、状態(表示されているか、されていないか)を表すためのstateを準備してください。(変数名はなんでもいいです。)

let displayed = $state(false);

それができたら、なにがなんだか分からないと思いますが、次のコードを書いてください。JavaScriptの場合は、: Attachmentの部分は不要です。

const attachment: Attachment = (element) =>{
    new IntersectionObserver((entries) => {
        for(let i = 0; i < entries.length; i++){
            displayed = entries[i].isIntersecting;
        }
    }).observe(element);
}

定数名attachmentは、好きな名前で構いません。

つぎに、CSSの部分に以下のクラスを追加してください。(クラス名はなんでもいいです。)

.hidden{
    translate: -100%;
    transition: 1s;
}
.displayed{
    translate: 0%;
    transition: 1s;
}

translateは要素を移動させるプロパティ、transitionはプロパティに変化が起こったときに変化を一瞬で終わらせるのではなく、指定した時間をかけてゆっくりと変化させるプロパティです。何事もとりあえずtransitionをつけておけばいい感じに見えると思います。

では、ここまでできたら、画面に入ったタイミングで変化させる要素を追加します。HTMLの部分に以下を追加してください。

<h1 {@attach attachment} class={displayed? "displayed": "hidden"}>画面に入ったら動きます</h1>

これで、画面に入ったら右から中に入ってくる文字を作ることができたと思います。

ですが、プログラミングを勉強したての人はなにが起こったか正直わけわかめになってしまうのが普通だと思うので、一応少し解説を入れておきます。(理解できなくても、上のやつをコピペして少し書き換えることができれば大丈夫だと思います。)

まず、Attachmentについてですが、これは引数を一つ取る関数です。HTMLの要素に対し、{@attach (変数名)}とすることで、この要素が読み込まれたときにこの関数が実行され、引数にはその要素が入ります。

次に、Intersection Observer APIについてです。ちょっとこれはここで説明していると長くなるのでだいぶん端折ります。先程のように書いて@attachすると、attachした要素が画面に入る、もしくは画面から出るタイミングで、(entries)=>{……}(先程書いてもらった関数)が呼ばれます。entriesは変化があった要素の配列で、普通は長さは1です。配列の中身の型はIntersectionObserverEntry型で、isIntersectingは、画面内にあればtrue、なければfalseになります。ちょっと自分でもなに書いてるかよく分かんなくなってきたんですけど、とりあえず上の例のdisplayedを好きなstateに置き換えてもらえば、コピペで動くと思うので、頑張ってください。もっとカスタマイズしたいとなったときは、頑張ってググって理解するかAIに聞くかしてください。

最後に、三項演算子ですが、{条件式? 値1: 値2}と書くと、条件式がtrueなら値1、falseなら値2として扱われるものです。ここでは、class={displayed? "displayed": "hidden"}としたので、displayedがtrueならclassはdisplayed、falseならhiddenとなります。

基本的に、先程作ったAttachmentは使いまわしはできないと思っていてください。stateを複数個扱いたいなら、その数だけAttachmentを作ってください。