【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる

※ 当ページには【広告/PR】を含む場合があります。

2022/03/05

※この記事はScratchを修得後にHTMLアプリを作成してみたい中高生向けのアドバンスな内容です。

以前の記事で軽量なJavascriptフレームワーク・

「Svelte」

を使った円形ビジュアルタイマーのアプリの作成方法を説明していきました。

【HTMLアプリ作成】SvelteでSVG要素を直接操作して制限時間表示できるタイマーを作ってみる

HTML＆CSSゲームなどに応用のできるタイマーっぽいものをSvelteで一から作成する過程を解説します。

この回の内容は、バリバリのJavascript/Typescriptを使ったアプリの実装を中心に解説してみました。

最近のモダンなHTMLアプリの作成において、他のプログラミング言語とは異なる特徴として、アプリの実装は

Typescript(Javascript)

と

Alt-CSS(Sassなど)

のハイブリッドで開発されます。

良く初学者のかたなどは、「どちらを覚えるべきか」「どちらでHTMLアプリを作成するのか」等の疑問が生じると思いますが、フロントエンドエンジニアを目指すのなら答えは

「TypescriptもAlt-CSSもどちらもバランス良く覚える！」

が正解かと思います。

十分に使いこなせると感じるまでの学習の道のりは険しいかと思いますが、焦らずに一つ一つの基礎を手を動かしながら勉強していきましょう。

HTML＆CSSの基礎の全てをサイトで解説していくのは厳しいですが、巷ではより優秀な学習教材に溢れています。

基礎や基本を学びたいのなら、

こちらの記事

に勉強方法をまとめいますので一読頂いて、このウェブサイトでは教材ではカバーしきれないようなちょっと進んだ内容を解説するのを目的としています。

今回の記事の目的として、

「SvelteアプリでSassのミックスインをどう使えば良いか」

を、

Typed.css

を例にとって解説していきます。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

Types.cssとは

ライセンスフリーのSassスタイルはウェブで探すと結構公開されている有志の方が存在しています。

今回一例として取り上げるのは

『Typed.css』

という、タイピングしているかのような面白い効果をHTML要素に付け加えることのできるSass製のミックスインです。

百聞は一見に如かずで、typed.scssを仕込んだSvelteアプリを先にお見せすると以下のようになります。

※なお、iphone OSブラウザにはTyped.cssが対応していないとのことですので正常に表示されないブラウザがあることにご注意ください。

このようにSassのミックスインを使うだけで、Javascript部分を一切手を掛けずに複雑な効果をアプリに与えることが可能です。

以降では、このようなScssファイルをSvelteでどのように使うのかポイントを掻い摘んで説明していきましょう。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

SvelteアプリでSassミックスインを実装する

前提としてSvelteでSassが使えるようにしないといけません。

こちらの記事

でSvelteアプリのビルド環境の構築を詳しく解説していますので、まだSvelteを一度もビルドしたことの無い方はそちらの記事を先にお読みください。

参考｜【Svelte入門】Svelteの開発環境をDocker Alpine内で簡単に構築する

Sassミックスインの外部読み込みは@useを使う

別サイト記事で

参考｜便利なSassの使い方ガイド ~ 複数のscssファイルを分割してみる

でも解説していたように、外部ファイルからSassのミックスインを読み込む際には、

@import

の利用は非推奨で、全面的に

@use

によって使うことが良い作法とされています。

さて、Svelteプロジェクトの基本となるHello World的なところは

こちらの記事

で説明したので、ここでは割愛しますが、スタイルファイルを

src

フォルダに

styles

フォルダを作成し、

global.scss

と

_typed.scss

のScssファイルを用意しておきます。

簡単なプロジェクト構造は以下の通りです。

開く/閉じる

            
            $tree
.
├── src
│   ├── App.svelte
│   ├── main.js
│   └── styles
│       ├── _typed.scss
│       └── global.scss
├── package.json
└── rollup.config.js

Typed.cssのプロジェクトはnpmインストールする形では提供されていないため、まずはTyped.cssから

typed.scss

のリソースファイルの中身を

_typed.scss

にそのまま貼り付けます。

次にメインのスタイルファイルである

global.scss

側から

_typed.scss

をインポートするのですが、前置きで説明した通り、

@use

から利用します。

開く/閉じる

            
            //👇ここで_typed.scssの中身をインポート➡以降で@includeで呼び出せる
@use 'typed' as *;

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
    color: rgb(204, 46, 151);
    text-decoration: none;
    &:hover { text-decoration: underline; }
    &:visited { color: rgb(0,80,160); }
}

div.type-trial-1 {
    //👇typedミックスインを利用する
    @include typed("String 1");
}

なお

@use

で外部の子スタイルファイルの読み込みは必ず読み出し側の冒頭で行う必要があります。

これで既にSvelte側でtyped.cssのSassミックスインが使えるような状態になっています。

以下のように簡単な

App.svelte

で試してみましょう。

開く/閉じる

            
            <main>
    <h1>Hello Typed.css!</h1>
    <p>Visit the <a href="https://github.com/brandonmcconnell/typed.css">Typed.scss project</a> to learn how to build an apps.</p>
    <div class="type-trial-1"></div>
</main>

<style lang="scss">
@import "./styles/global.scss"
</style>

これでSvelteアプリをビルドすると、以下のようなアプリになると思います。

Typed.cssの他にも楽しいScssテーマが公開されているので、今回のテクニックを覚えておくと色々と面白いアプリが簡単に作れるようになると思います。

余談〜VSCodeで出現するエディタからのエラーの対処法

VSCodeを使ってSvelteアプリ開発している人で、Sass用のプラグインをインストールしていた場合、デバッグコンソールやソースコード中に、

開く/閉じる

            
            Error passing a list to a SASS mixin: "] expected"

とか、セレクター定義の位置に置きたい

%

記号がエディターが特殊文字として認識されてしまったりと、エラーが一見発生しているように見えますが、これはVSCode用のSassバリデーションに引っかかっているようです。

このエラーが出たからといってSassがビルド出来ない訳ではなく、非推奨の文法を使っていることを怒ってきているため、

.vscode/settings.json

で、VCcodeの設定を無視するように仕向けます。

開く/閉じる

            
            {
    //...中略
    //👇を設定に加える
    "scss.validate": false
}

これでエディタ中のエラーが無視できるようになります。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

まとめ

今回はSvelteアプリに個別に用意したようなSassファイルからミックスインを読み込む方法を紹介してみました。

Sassの魅力はJavascriptで実装するとかなり時間が掛かりそうなページのスタイル効果を簡単に実現できるところにあります。

是非ともjavascriptとCssの学習を進める際には、どちらかに偏らずバランスの良い勉強を行いながらHTMLの技術の理解を深められてください。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる

Types.cssとは

SvelteアプリでSassミックスインを実装する

Sassミックスインの外部読み込みは@useを使う

余談〜VSCodeで出現するエディタからのエラーの対処法

まとめ

その他のリンク記事

【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる

【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる