1. トップ
  2. アプリ開発
  3. Svelte.jsとは?手軽に開発ができるJavaScriptフレームワークを解説!

Svelte.jsとは?手軽に開発ができるJavaScriptフレームワークを解説!

『Svelte.js(スヴェルト)』とは、Web上で動作するユーザーインターフェースを構築することができるフレームワークのことです。非常にシンプルな枠組みを採用しており、これからフロントエンド開発を学習する人には、適したフレームワークといえます。そこで、今回はSvelte.jsの基本概要やメリット・デメリット、使い方について解説します。

Svelte.jsとは?どんな人が向いている?

『Svelte.js』とは、ブラウザ上で動かすユーザーインターフェースを構築できるJavaScriptフレームワークです。UI部品を作るためのライブラリとしてReact.jsやVue.jsは非常に有名ですが、Svelte.jsはそれの対抗馬として注目されています。主に、Webアプリのフロントエンド開発に活用されるフレームワークです。

Vue.jsやReact.jsはライブラリですが、Svelte.jsはコンパイラーに分類されます。「.svelte」という拡張子のファイルの中にHTMLとCSS、JavaScriptを書き、それをコンパイルすることで動作させることが可能です。

Svelte.jsは、React.jsなどのライブラリと比べて複雑ではないため、フロントエンド開発初心者でも学習ハードルは高くありません。また、手軽に開発することができるため、小規模アプリを個人開発したい人におすすめです。

JavaScriptフレームワークを使用するメリット

フロントエンド開発になぜJavaScriptフレームワークが使われるのでしょうか?その理由は、開発者にとってメリットがあるからです。具体的なメリットを簡単に3つご紹介しますので、ぜひ参考にしてください。

JavaScriptフレームについてはじめから詳しく知りたいという方は、「JavaScriptフレームワークとは何か?最新おすすめ5選を比較」をご確認ください。

◎作業効率のアップを期待できる

1つ目のメリットは、作業効率の向上です。フレームワークはWebアプリケーションの雛形を意味します。アプリ開発に必要なコードやライブラリ、クラスなどがまとめられており、それを使いながら開発を進めることが可能です。それにより結果的に開発工数を削減することができるため、作業効率のアップを期待できます。

◎コードが統一される

2つ目のメリットは、コードの統一性が上がることです。個人開発の場合、自分1人でコーディングをするため、コードの統一性を意識しなくても問題ないかもしれません。しかし、チームでプロジェクトを進めるケースにおいては、さまざまなエンジニアが開発に携わります。エンジニアによってスキルレベルが異なるため、コードを統一することが難しいです。コードにばらつきがあると作業効率が下がったり、メンテナンスがしづらかったりします。

一方、フレームワークを使用すれば、共通ルールに従ってエンジニアは開発を進めなければなりません。これにより、コードが統一されるため、チーム開発をする場合で、もコードのばらつきを抑えることができます。

◎バグを減らせる

3つ目は、バグを減らすことができる点です。フレームワークでは、起こりやすいバグが事前に想定されているため、あらゆる箇所でバグが発生するというトラブルを抑えられます。また、コードが統一されることで、可読性が向上するため、それもバグを減らせる理由のひとつです。

フレームワークの活用

 

Svelte.jsの特徴とは?Vue.jsやReact.jsと比較

Svelte.jsは、人気があるVue.jsやReact.js、Angular.jsと比較されることが多いです。それぞれのフレームワークの詳しい説明に関しては、下記の記事をご覧ください。

Svelte.jsとVue.jsやReact.jsは、UIパーツを構築する点で同じフレームワークです。しかし、後者はライブラリであるのに対して、Svelte.jsはデバックになります。また、Svelte.jsは機能がシンプルで、学習がしやすく個人など小規模アプリ開発に適しているという点が大きな特徴です。

次に、Svelte.jsのメリットとデメリットについて詳しく解説します。

Svelte.jsのメリット

具体的なメリットは下記の通りです。

◎少ない記述でUIを構築できる

もっとも大きなメリットは、記述量が少ないことです。記述量が少なくなることで、コーディングの負担が下がります。また、開発工数も減るため大きな魅力です。

Vue.jsやReactと同じ処理の機能を実装した場合でもSvelte.jsのほうが圧倒的に記述量を抑えられます。そのため、少ないコードでさまざまな機能を実現したい方におすすめです。

◎無駄を取り除いてくれる

2つ目のメリットは、無駄が少ないことです。DOM操作やオーバーヘッドが少なく、コンパイル時は値が変化したところだけを検知して反映しファイルを作成します。これにより、ファイルサイズも小さくなるため、Webアプリの動作がスムーズになりやすいです。また、使用していないCSSを削除することも可能なため、スマートなWebアプリを構築することができます。

◎小規模開発に必要な機能が搭載されている

3つ目のメリットは、小規模開発に必要な機能が揃っている点です。例えば、UIの構築やアニメーション、ライフサイクルなどWebアプリに欲しい機能が十分に搭載されています。そのため、個人開発に採用される事が多いです。

Svelte.jsのデメリット

次は、Svelte.jsのデメリットを2つご紹介します。

◎情報量が少ない

1つ目のデメリットは、Svelte.jsについての情報量が少ないことです。認知度が低いわけではありませんが、コーディング情報が少なく開発者も多くありません。また、利用者のコミュニティが少ないため、情報を検索しても欲しい内容が得られないこともあります。

◎拡張性が低い

拡張性に優れていないこともデメリットです。小規模開発向けのフレームワークになるため、Vue.jsやReactに比べて拡張性が高くありません。また、機能も少なくなっており、大規模開発には不向きとなります。

フレームワークを作る

 

Svelte.jsを使ってみよう!

次は、実際にSvelte.jsを使ってみましょう。操作画面のキャプチャ画像を使用しながらわかりやすく解説しますので、ぜひ参考にしてください。

Svelte.jsの環境構築

Svelte.jsの環境構築手順は下記の通りです。今回のチュートリアルの環境は、MacOS 10.15.7になります。Ubuntuの環境で構築する方法についても触れていますので、Linuxをお使いの方もぜひ参考にしてください。

1.Svelte.jsを使うためには、Node.jsを別途用意する必要があります。Homebrewを使いインストールしてください。

2.Ubuntuをお使いの方は、リポジトリを追加してyumでインストールします。

3.インストール後、下記のコマンドを使用してください。

4.無事インストールされている場合、下記のようにバージョンが出力されます。

無事インストール

5.次にnpxコマンドを使用してSvelteプロジェクトのフォルダを作成します。

6.udemy-projectフォルダーに移動します。

7.下記のコマンドを実行してください。

8.インストールが成功すると下記のように表示されます。

インストール成功

9.初学者で環境構築が難しいと感じる方は、公式サイトを利用すれば手軽にSvelte.jsを使用することが可能です。ブラウザを利用して学習したい方は、下記のURLにアクセスしてください。

サーバーを立ち上げる

次に、サーバーを立ち上げてページが表示されるか確認しましょう。具体的な手順は下記の通りです。

1.プロジェクトの中で下記のコマンドを実行してください。

2.ブラウザからlocalhost:5000にアクセスすると、ページが表示されます。

localhost:5000にアクセス

実際にコードを書いてみる

実際に、コードを書いてアプリケーションを作成していきます。コードを書く部分は、プロジェクト配下の「src」→「App.svelte」です。

1.まずApp.svelteを編集し、“Hello Udemy”と表示させてみましょう。中身を編集し、下記のコードに変更してください。

2.ブラウザで確認すると結果が表示されます。

3.次に、クリックイベントを設定します。ボタンをクリックすると“Hello Udemy!”という文字を出力させるように実装しましょう。具体的なコードは下記の通りです。

4.ボタンをクリックすると、“Hello Udemy!”という文字が表示されます。

HelloUdemy!表示

5.次にコンポーネント化の機能を使用してみましょう。コンポーネント化することで、それぞれのUI部品を分割することができます。まず、src配下にsvelteファイルを作成してください。今回のチュートリアルでは、Component1.svelteとしました。

6.次に、Component1.svelteを編集します。

7.次に、App.svelteファイルを下記のように変更してください。

8.ブラウザを更新するとコンポーネント機能を使用していることがわかります。

コンポーネント機能を使用

9.また、装飾用コンポーネントを別途用意して文字を装飾してみましょう。今回のチュートリアルでは、Decoration.svelteを準備し、下記のようにファイルを編集しました。

10.次に、App.svelteを下記のように編集してください。

11.ブラウザを更新すると文字の周りに囲いが表示されます。

ブラウザを更新画面

Svelte.jsのおすすめ学習方法とは?

Svelte.jsの学習方法は、Webサイトを使用するのがおすすめです。情報量が少なく、コミュニティも小さいため、プログラミングスクールなどでは扱っていないところが多くなっています。そのたえ、Web上で学習するといいでしょう。

チュートリアルから学びたいならSvelte.js公式サイトのintroduction/Basicsがおすすめです。

また、プログラミング学習サービスで学ぶなら、SvelteStudyやUdemyのページで学ぶことができます。

 

今回は、Svelte.jsの基本概要やメリット・デメリット、実際に使用方法について解説しました。情報量は少ないですが、公式サイトではすぐにSvelte.jsを使用できる環境が提供されており、はじめから環境構築しなくても早速試すことができます。また、チュートリアルやプログラミング学習サービスから学ぶこともできるので、この機会にSvelte.jsのスキルを習得してみてはいかがでしょうか。

 

エンジニアに役立つ目的別講座

Pythonの基本~応用をマスター

現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。

Webサイトのコーディングができるように

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。

AWSを基礎から学ぶ

これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)

AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!

ITプロジェクトの資料作成はお任せ!

手を動かして学ぶITプロジェクトの資料作成!システム開発のドキュメンテーション技術と成果物テンプレート
手を動かして学ぶITプロジェクトの資料作成!システム開発のドキュメンテーション技術と成果物テンプレート

ITプロジェクトの資料作成を学べる人気講座。フェーズ毎に、どんな資料を作ればいいのか悩んでいる人におすすめ。