少なくとも数年間これを行っているWeb開発者は、おそらく毎日同じような質問を聞くでしょう：
本当にウェブ開発者になりたいのですが、どこから始めればいいのかわかりません。 提案はありますか？
約10年前、答えは非常に簡単でした。 index.htmlを作成し、そこにいくつかのタグを追加し、CSSでタイトルを赤にし、jQueryでクリックを処理できるようにします。
ああ、どのようにすべてが変わったか。 現在、ビルドツール、クライアントサイドルーティング、豪華なランタイムを備えた特別なフレームワーク、どこにでも「this」をバインド、テンプレートリテラル、CSS-in-JSを使用しています。
これにより、「今すぐ入力してください。後で説明します。 初心者の中には、ReactまたはVueをすぐに学習して、最新のプラクティスを開始することを奨励する人もいます。 他の人は山の頂上から叫ぶ一方で、初心者は常に基本から始めるべきだと叫ぶ。 実際には、どちらのアプローチにもメリットがあります。 最初のものは、ホットリロードやコンポーネントのようなものに新参者を惹きつけることができます。 2番目の方法では、初心者がDOMが内部でどのように機能するかを理解すると同時に、バニラJSの複雑さから人々を気が散らせます。
そのため、妥協点が必要です。 コンポーネントベースの開発、分離vsカスケードCSS、テンプレート、宣言関数などの現代の概念を吸収しながら、基本を開始する方法 など
Svelte、あなたのサービスで
SvelteJSは、フレームワークのjsクリップに含まれるかなり新しいカートリッジであり、注目を集め始めています。 JavaScriptの状態2018を投稿した後、誰かがそれを知っているかもしれません。 つまり、Svelteは、実際にはフレームワークではないフレームワークになるように設計されています。 アセンブリ段階でコンポーネントをコンパイルするためのツールに基づいており、アプリケーションの表示に必要なものだけをページにロードできます。 これは、仮想DOMがなく、フレームワークの上にフレームワークがなく、ランタイムにフレームワークがないことを意味します 。
これらはすべて、経験豊富な開発者にとってかなり深刻な議論ですが、ほとんどの初心者はおそらく頭を壊さずに最後の段落を読むことができませんでした。 幸いなことに、Svelteを初心者にとって使いやすいのはコンパイルの魔法ではなく、その構文です。
Svelteコンポーネントを見たことがない場合、簡単な例を次に示します。
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /* CSS */ .pretty { color: red; } </style> <script> /* ... */ let name = "Ben"; </script>
それを理解しましょう。 だから、まず、あなたの魂が望むなら、これらすべてが通常の.htmlファイルでさえ.svelteファイルでさえも書けることは注目に値する。 また、フレームワークなしの開発を連想させるおなじみのタグもいくつかあります 。 スタイルとスクリプトです。 コンポーネントを適切に構築するために、スタイルとJSコードがこれらのタグで記述されています。 さらに、CSS-in-JSソリューションなどの追加のエディタープラグインがなくても、構文の強調表示が機能します。 さらに、Svelteコンパイラは、デフォルトでコンポーネント固有のスタイルを分離できるほどスマートです。 したがって、コンポーネント間でスタイルが流れることはありません。
また、JavaScript変数nameで魔法のようなことが起こる様子も確認できます。 これは、コンポーネントのスクリプト内の変数にマークアップからアクセスできるSvelte 3の素晴らしい新しい概念です。 状態を管理するために学習する必要のある特別な構文はありません。 Angular $ scopeもReact this.stateも、Vueからのデータもありません。 代わりに、通常の変数を使用して状態を記述するだけで、値が変更されるたびに再レンダリングすることができます。
この構文の「専門用語」からの自由は、宣言的なJS関数をある種のDOMセレクターに接続する方法を考える必要なく、コンポーネントの作成がCodePenの作成のように見えることを意味します。
もう1つの良い点は、Svelteコンポーネントが従来のコンポーネントと同じくらい簡単にインポートできることです。 Svelteは展開方法を知っているため、単に.htmlをインポートできます。
<div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script>
クールですが、ちょっと待ってください...
一部の読者は、この概念を私と同じように息をのむように感じるかもしれません。 同時に、他の人はおそらく、このアプローチを使用して初心者に教えることに反対する独自の議論を持っています。 彼らはDOM操作が実際にどのように機能するのか興味がありませんか？
答えは...可能です。 しかし、誰かが（少なくとも個人的な経験から）始めたばかりのときは、クールなものをより速く作成するために、少し抽象化を受け入れることができます。
さらに、JavaやJSなどの一部の言語がガベージコレクションによってポインター管理を抽象化したように、最新のWeb開発ツールのほとんどはDOM操作を無視しています。 初心者がおそらく必要としない、より困難で極端な場合を除きます。 ちなみに、ポインタ管理とは何か困惑している場合、これは私のポイントを証明しているだけだと思います。 したがって、初心者にDOMを操作したり、状態を制御するフレームワーク固有の方法を学習させたりするのではなく、マークアップから変数に直接アクセスできるようにしないのはなぜですか。 今、彼らは喪に服することなく、コンポーネントの状態管理の基本原則を学ぶことができます。
わかりました、基本的な例を見ることができますが、Svelteが機能するには特定の機能が必要です。
確かにそれは本当ですが、それはあなたが思うよりずっと少ないです。 Svelteの構文の一部は、DOM要素を反復的かつ条件付きでマッピングするためのものです。 これは、JSXからのマップと非常によく似ていますが、新規参入者（および私）が簡単に迷子になり得るこれらのネストされたブラケットのすべてがありません。 配列から要素のリストを生成する基本的な方法は次のとおりです。
<ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script>
繰り返しますが、構文に関する批判は理解していますが、理解するのがどれほど簡単かは気に入っています。 JavaScriptをHTMLコードに埋め込む代わりに、単純に次のように言います。ねえ、この配列をループして、それぞれの要素を作成しましょう。
Svelteの別の機能について言及する価値はありますが、そこから私はそれほど熱心ではありません：コンポーネントに小道具を送信するための構文です。 はい、それは完全に機能的で学びやすいですが、同時に、一部の人々の好みにはあまりにも魔法のように見えるかもしれません。 小道具を処理するには、インポートする場所に関係なくコンポーネントに渡します...
<!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" />
...そして、この変数をエクスポートされた「レット」として取得します。
<!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script>
一部の人にとっては、これが「輸出」の濫用のように見えることを完全に理解しています。 しかし、少なくともこれは初心者がモジュールを概念化する方法に対応しています。コンポーネントの外部にアクセスするために必要なものをエクスポートし、コンポーネントで使用するものをインポートします。
私はこの奇妙な問題を克服できました...しかし、必要なビルドステップはどうですか？
したがって、フレームワークで作業を開始することに関する別の批判は、パッケージマネージャーを使用する必要があるということです。 これは...地獄、ターミナルを使用することを意味します！
聞いて、私はこのモノを開くことは非常に恐ろしいことを理解しています、そのモノフォントとディレクトリをナビゲートするための不気味な「CD」。 しかし、正直なところ、これは実行するのに1つのチームだけが必要な場合、実際には大きな障害ではありません。 さらに、VS Codeの統合ターミナルにより、簡単に開始できます。 プロジェクトディレクトリ内のウィンドウの下部でも開きます。
Svelteは実際にダウンロード可能なスターターを提供していますが、直接ダウンロードにRollupを使用するだけの独自のスターターテンプレートを作成しました。 実際、構成ファイルの長さは30行未満です！ 基本的なSvelteプロジェクトの場合、これらはすべて必要なディレクトリとファイルです。
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
package.jsonでビルドステップを開始するコマンドを追加するだけで完了です。 もちろん、他のフレームワークが必要とするすべての追加モジュールとファイルは、初心者がそれらに触れない限り問題ではないと言うことができますが、私の意見では、追加するものが少ないほど初心者にとっては良いことです。
わかりました、まあ、これは初心者にとってクールで便利です。 しかし、このフレームワークはどれほど安定していますか？
これは、Svelteのような若いフレームワークにとって非常に話題の問題です。 私が示したすべての例では、Svelteバージョン3の構文を使用していますが、このドキュメントの執筆時点ではまだベータ版です。 エキサイティングなことに、私は彼と一緒にプログラミングセミナーに急いで行く前に、さらに数か月待つことになりました。 それにもかかわらず、Svelteはバージョン3の本当に簡潔なドキュメントページを提供しており、初心者にとってより簡単になります。
それでは、Svelteを使用してWeb開発について学ぶことの主な利点を見てみましょう。
- これは、追加のプラグインが0のコンポーネントフレームワークです。
- 彼は普通のゴミなしで状態を制御します
- CSS-in-JSを使用せずにスタイル分離を使用します（エディタープラグインや愚かな構文は不要です）
- 開始するには、非常に単純なビルドスクリプトのみが必要です。
- 基本プロジェクトには実質的に追加のファイルはありません
もちろん、この記事であなたを納得させることができなければ、これは完全に正常です。 すべての良い記事は少し論争を巻き起こしました！ しかし、少なくともこの記事が、すごいクールでシンプルなSvelteの学習方法を示していることを願っています。
これを読んでくれてありがとう！
私は学習プロセスのフロントエンドWeb開発者であり、常に新しいものをいじっています。 ここで定期的に公開しようとするので、気に入ったら書いてください！
***
翻訳者から：
この翻訳を読んでくれてありがとう！ この記事が、トレーニングや新しいプロジェクトのツールとしてSvelteに注目することを奨励することを願っています。
5月24〜25日のHolyJS Piterの 2時間のワークショップSvelte 3に来てください 。 Svelteの開発をフォローしたい人-ロシア語の電報チャンネルSvelteJSへようこそ 。 よろしくお願いします！
そして、フレームワークとテクノロジーに関係のない小さな調査。 あなたの意見は興味深いだけです。