Name: 100秒でスリムに (Svelte in 100 Seconds)
Uploaded: 2024-09-09T06:50:06.000Z
Duration: 2 min 12 s

It's a JavaScript tool for building UI components, just like React, Angular, or Vue.

React、Angular、Vueのように、UIコンポーネントを構築するためのJavaScriptツールだ。

関係詞節（制限と非制限）

But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.

しかし、JavaScriptランタイムをブラウザーに出荷してコードを動作させる同業他社とは異なり、Svelteはコンパイラーである。

It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs.

これは、あなたが開発者として書くのが好きな宣言的コードを、ネイティブ・ブラウザAPIで動作する命令的コードに変換する。

As a result, you get highly performant code in a very small package.

その結果、非常に小さなパッケージで高いパフォーマンスのコードを得ることができる。

But most importantly, it's the only JavaScript framework that's actually enjoyable to use.

しかし最も重要なのは、実際に使って楽しい唯一のJavaScriptフレームワークだということだ。

.svelteファイルでコンポーネントを作成します。

A script for your JavaScript code, which can also be TypeScript.

JavaScriptコードのスクリプトで、TypeScriptでもよい。

A style tag for your CSS, which can also use a preprocessor like Sass.

Sassのようなプリプロセッサを使用することもできます。

And the main template represented as regular HTML.

そしてメインのテンプレートは通常のHTMLとして表現される。

It's been empowered with all kinds of extra syntax for writing declarative code.

宣言的なコードを書くためのあらゆる種類の追加構文が強化されている。

リアクティブ・ステートが必要か？

Simply define a variable with the let keyword.

letキーワードで変数を定義するだけです。

Then reference it dynamically in the HTML using braces.

その後、中括弧を使ってHTML内で動的に参照する。

If we want to change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.

状態を変更したい場合は、関数を定義し、DOMのイベントをonでリッスンし、その関数をハンドラーとしてバインドすればよい。

Now when the value of that variable changes, the component will automatically re-render to show the updated state.

これで、変数の値が変わると、コンポーネントは自動的に再レンダリングされ、更新された状態が表示される。

In many cases, you'll need to run conditional logic or loops in your template.

多くの場合、テンプレート内で条件付きロジックやループを実行する必要があります。

Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if-else statement or a for-each loop when working with a list.

JavaScriptの関数と戦う代わりに、リストを扱うときにif-else文やfor-eachループを明確に作成できる構文で力を与えてくれる。

Now when it comes to cross-component communication, Svelte provides multiple different strategies for sharing data between components.

コンポーネント間の通信に関しては、Svelteはコンポーネント間でデータを共有するための複数の異なる戦略を提供している。

To pass data from a parent to child, you can use props by adding the export keyword to a variable.

親から子へデータを渡すには、変数にexportキーワードを追加してpropsを使用します。

And now you can pass data into this component.

そして、このコンポーネントにデータを渡すことができる。

And if you have a ton of props, you can use the spread syntax to keep your code looking fit and healthy.

また、小道具をたくさん持っている場合は、スプレッド構文を使うことで、コードをフィットして健康的に見せることができる。

Now for more complex component trees, you have a context API just like React.

より複雑なコンポーネント・ツリーには、ReactのようなコンテキストAPIがある。

And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the a dollar sign in front of them.

また、これだけでは十分でない場合、Svelteにはストアと呼ばれる非常に優れたメカニズムがある。ストアはobservablesのようなもので、ドル記号の前であればどこでも共有することができる。

After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript.

素晴らしいUIを構築したら、コンパイラーを使ってそれをバニラJavaScriptに変換することができる。

And if you're building a full-blown web application, you can use SvelteKit to quickly implement server-side rendering, routing, and code splitting.

また、本格的なウェブ・アプリケーションを構築している場合は、SvelteKitを使ってサーバーサイド・レンダリング、ルーティング、コード分割を素早く実装できます。

以上、100秒でスベルテでした。

Hit the like button if you want to see more.

もっと見たければ「いいね！」ボタンを押してください。

 Thanks for watching, and I will see you in the next one.