こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。

今回はjQueryでよく作る機能をここ最近現れた新しいJavaScriptフレームワーク「Svelte」を使用して再現してみたいと思います。

このつぶやきは、Webデザイナーで普段jQueryを使用している方、Vue.jsやReactなどに興味はあるけども難しくて挫折した方向けのつぶやきになります。

こんな機能はSvelteだとどう作るの？などご質問があればTwitterなどにお寄せください。
可能な限り再現し、このつぶやきに追記していきます。

なぜこのつぶやきを書いたのか？

jQueryといえば、JavaScriptのデファクトスタンダードといってもおかしくないくらい普及しています。
JavaScriptは書けないけど、jQueryであればコードをかけるという方がいるくらい普及しているわけです。

よく、ネット上だと「jQueryはオワコン」なんて言われていますが、自分はそんなことは無いと思っています。
なぜか、ランディングページを作成する際はVue.jsやReactのように環境構築を必要とせず、すぐにページを作れる点、Web制作する際に必要な機能がまとまっているからです。

なので、Web制作を始める際の入門として今後も生き残っていくのではないかと思います。
個人的にjQueryのコンセプトである「wite less, do more.」が好きなので、jQueryにはまた息を吹き返してほしいなと思っていますが…

ですが、ここ最近ではVue.jsやReactなどのフレームワークが非常に賑わっています。

しかし、それらのフレームワークはエンジニア界隈では盛り上がっていますが、ノンエンジニアであるデザイナーさん、ディレクターさんなどでは知らない人もいるわけです。

jQueryがなぜここまで広まったのか？を自分なりに考えてみた時に、デザイナーさんでも使用できる人が多いからではないかと思いました。

そこでjQueryとコンセプトが似ているけども、フレームワークとして最近人気が上がってきている「Svelte」を紹介し、少しでもノンエンジニアの方に知っていただき使ってもらえるようにと、このつぶやきを書いています。

jQueryで得ている知見を「Svelte」でも生かしていただき、一人でも多くの「Svelte」ユーザーを増やしていければと思っています。

そのためには皆様のお力が必要です。

少しでも参考になったなど感じて頂ければ、このつぶやきを拡散していただけると非常にありがたいです。

機能を作る前に環境構築

Svelteのテンプレートを下記コマンドを入力してダウンロード（Node.jsをインストールしていない方はインストールしてから下記のコマンドを入力）

npx degit sveltejs/template my-svelte-project

ダウンロードしたら下記コマンドを入力

npm install

下記コマンドを実行

npm run dev

これで環境構築は終了です。

環境構築が終了したら、http://localhost:5000 にブラウザーでアクセスしてみてください。

HELLO WORD!と出れば成功です！

jQueryでよく作る機能をSvelteで再現

ここからは実際にコードを入力していきます。

srcフォルダの中のApp.svelteというファイルを編集していきます。

文字の色を変える。

jQuery

<p id="content">文字の色が変わります</p>
<button id="changeColorButton">ボタンの文字を<span id="colorType"></span>にする</button>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
 integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
	let color = "red";
	let colorType = "緑色";
	$(function(){
		$('#content').css('color', color);
		$('#colorType').text(colorType);
		$('#changeColorButton').on('click', ()=>{
			color = color === 'red' ? 'green' : 'red';
			colorType = color === 'red' ? '緑色' : '赤色';
			$('#content').css('color', color);
			$('#colorType').text(colorType);
		})
	});
</script>

Svelte

<script>
	let color = "red";
	const changeColor = (() => {
		color = color === 'red' ? 'green' : 'red';
	});
</script>
<main>

	<p style="color: {color}">文字の色が変わります</p>
	<button on:click="{changeColor}">文字を{color === 'red' ? '緑色' : '赤色'}にする。</button>
</main>

ご覧のようにSvelteの方が圧倒的にコードが短くなります。
また、styleや文字を変えるのも、jQueryの場合はidやclassを指定しないといけませんが、Svelteの場合はHTML上に直接、値を入力でき直感的です。

要素の表示、非表示

jQuery

<p id="showHideContent">文字が消えたり、見えたり...</p>
<button id="changeShowButton">文字が<span id="showHideMes">消えます</span>。</button>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
 integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<script>
	let isShowContent = true;
	let showHideMes = '消えます';
	$(function(){
		$('#changeShowButton').on('click', () => {
			isShowContent = !isShowContent;
			$('#showHideContent').css('display', isShowContent ? 'block' : 'none');
			$('#showHideMes').text(isShowContent ? '消えます' : '表示されます')
		})
	});
</script>

Svelte

<script>
	let isShowContent = true;
	const changeShowContent = (() => {
		isShowContent = !isShowContent;
	})
</script>
<main>
	{#if isShowContent}
	<p>文字が消えたり、見えたり...</p>
	{/if}
	<button on:click="{changeShowContent}">文字が{isShowContent ? '消えます' : '表示されます'}。</button>
</main>

こちらも、Svelteの方が短く書くことが出来ます。
jQueryは前回同様、変更箇所にはidやclassをつけてあげなければならずひと手間必要になります。
Svelteであればどの要素が変わるのかをidやclassを使用せずに記述できるため直感的なコードになります。

今回はjQueryとSvelteの比較を行ってみましたが、結果はSvelteの方が簡単かつ短く書くことができました。

Svelte自体はまだVue.jsやReactに比べると歴史の浅いフレームワークではありますが、TypeScriptへ正式対応しているなど、後発フレームワークとしての強みを持っています。

Vue.jsやReactを普段使用している自分個人の意見ですが、Vue.jsとReactの良いところを組み合わせたようなフレームワークだと感じました。

普段、jQueryを使用してWebサイトを作成しているWebデザイナーさん、Vue.jsやReactなどのフレームワークが難しすぎて挫折した方、Svelteはこれから伸びるであろうフレームワークです。

尚且つ使用しているユーザー数もまだ少ないため、今の内からSvelteをできるようにしておくとドヤ顔ができるかもしれません（多分）

このつぶやきはこれで終わらせず、皆様からの要望があれば追記していこうと思いますので、こんな機能はSvelteではどのように作るのかなどご要望があれば追記していきます。

Svelteのコミュニティーを大きくするには、エンジニアのお力はもちろん、デザイナーさん、ディレクターさんなどWebに関わっている方のご協力が不可欠です！

一緒にSvelteのコミュニティーを大きくしていきましょう！