TypeScript on SvelteKit学習メモ

2023/02/10 9:04 · Kishimoto

※この記事は私の学習が進むにつれ内容が更新されていく想定の記事です。

引数一覧

1. 数値型 (number): 整数や浮動小数点数など
2. 文字列型 (string): 文字列や文字列リテラル
4. ブール型 (boolean): true または false
5. 配列型 (array): 複数の要素を持つ配列
6. オブジェクト型 (object): プロパティを持つオブジェクト
7. 任意の型 (any): どのような型の値も許可する
8. 複数の型 (union types): 複数の型を OR 演算子 (|) で結合した型
9. Tuple 型 (tuple): 順序と型が固定された要素の配列
10. Enum 型 (enum): 数値から指定された名前によって構成される型
11. Null 型 (null): null の値を表す型
12. Undefined 型 (undefined): undefined の値を表す型
13. Never 型 (never): 値が存在しないことを示す型
14. Type alias 型: 任意の型の名前を付けることができる別名
15. Interfaces 型: オブジェクトのプロパティや型を定義することができる型
16. Generics 型: 型パラメータを持つ型

修飾子一覧

1. public: 公開されていることを示します。これがデフォルトの場合もあります。
2. private: 非公開されていることを示します。クラス内部からのみアクセス可能です。
3. protected: 非公開されていることを示します。サブクラスからアクセス可能です。
4. readonly: 読み取り専用となり、値を変更することができなくなります。
5. static: クラスのインスタンスとは独立して存在するメンバーを表します。
6. abstract: 抽象クラスや抽象メソッドを示します。
7. declare: 定義されていない外部モジュールやグローバルな定数・関数などを表す型宣言を示します。
8. const: let と似ていますが、変更不可能な定数となります。

Q: TypeScriptのdeclareとはなんですか？

TypeScript の “declare” は、外部のモジュールやライブラリに存在する宣言を行うために使用されます。これによって、TypeScript コンパイラに外部のモジュールやライブラリのインターフェイス情報を伝えることができます。これにより、コンパイラは外部のモジュールやライブラリに存在する型を正確に推測することができます。

declare で宣言された変数や関数は、実際に実装されていないものを表します。そのため、declare で宣言された変数や関数は、実行時には実際に存在しません。

declare let jQuery: (selector: string) => any;

この例では、jQuery 変数が文字列を引数として受け取り、何かを返す関数であると宣言しています。これにより、jQuery が実際に存在することが保証されていなくても、TypeScript コンパイラに jQuery の型情報を伝えることができます。

Q: svelteKitでの.svelte-kit/types/src/routes/$types.dtsの意味を教えて下さい

.svelte-kit/types/src/routes/$types.dts は、SvelteKit アプリケーションのルート定義に関連する TypeScript の型定義ファイルです。

SvelteKit では、アプリケーションのルート定義を行うための routes ディレクトリを提供しています。この routes ディレクトリ内にある .svelte ファイルは、アプリケーションのルーティングを定義することができます。

.svelte-kit/types/src/routes/$types.dts ファイルは、この routes ディレクトリ内の .svelte ファイルに対して型定義を行うものです。この型定義ファイルを利用することで、routes ディレクトリ内の .svelte ファイルに対して、より安全なコーディングが可能となります。

以下は、routes/$types.dts ファイルを利用する例です。

// .svelte-kit/types/src/routes/$types.dts
interface RouteParams {
  id: string;
}

declare module '@svelte-kit/routes' {
  export interface Route {
    params: RouteParams;
  }
}

// routes/[id].svelte
<script>
import { Route } from '@svelte-kit/routes';

const { params } = (await import('@svelte-kit/routes')).Route;

console.log(params.id);
</script>

このように、routes/$types.dts ファイルを利用することで、routes ディレクトリ内の .svelte ファイルに対して、型定義を行うことができます。

Q: webページにアタッチするとはどういうことでしょうか？Hydrationもわかりやすく教えて下さい。

Webページにアタッチするとは、JavaScriptなどのスクリプトを使用して、Webページ上の要素（例：ボタン、テキストボックス、画像など）にイベントリスナーを追加し、ユーザーの操作に応じて反応するように設定することを指します。

Hydration（ハイドレーション）とは、サーバーサイドでレンダリングされたHTMLに対して、クライアントサイドでJavaScriptを使用してイベントハンドラーやDOM要素を追加することを指します。これにより、サーバーサイドで生成された静的なHTMLを動的なインタラクティブなWebページに変換できます。

Q: 上記の”サーバーサイドでレンダリングされたHTMLに対して、クライアントサイドでJavaScriptを使用してイベントハンドラーやDOM要素を追加することを指します。”はアタッチすると同義と言えますか？

Hydrationは、サーバーサイドでレンダリングされたHTMLにクライアントサイドでJavaScriptを使用してイベントハンドラーやDOM要素を追加することを指しますが、これはアタッチするという用語とは厳密には異なります。

アタッチする場合、すでにWebページに存在する要素に対して、JavaScriptなどのスクリプトを使用してイベントリスナーを追加することを指します。一方、Hydrationは、サーバーサイドで生成された静的なHTMLに対してクライアントサイドで動的なDOM要素を追加することで、既存のDOM要素に対するイベントハンドラーの追加だけでなく、新しいDOM要素の追加も含まれます。

Q: svelteにおけるfetchとはなんですか？

Svelteにおけるfetchは、ブラウザーでHTTPリクエストを送信し、サーバーからレスポンスを取得するために使用されるJavaScriptのAPIです。

fetchはPromiseを返し、非同期で実行されます。このため、fetchを使用することで、サーバーからのレスポンスが返ってくるまで、JavaScriptの処理を待つことなく、Webページの表示を続けることができます。また、fetchを使用することで、Ajaxを実現し、Webページをより動的にすることができます。

Svelteでは、fetchを使用して外部APIからデータを取得することができ、取得したデータをテンプレートに反映することができます。また、Svelteはfetchを使用して自身のコンポーネントの動的な再レンダリングを行うこともできます。

Q: “fetchを使用することで、Ajaxを実現し"とはどういうことですか？ fetchを行う際にAjaxを使用するのではないのですか？

申し訳ありません、私の前回の回答は正確ではありませんでした。fetchはXMLHttpRequestと同様に、Ajaxを実現するためのAPIの一つです。AjaxはAsynchronous JavaScript and XMLの略で、Webページを非同期で更新するための技術のことで、fetchを使用することで、サーバーとの通信を非同期で実行し、Webページの再読み込みなしにデータを更新することができます。

したがって、fetchは、XMLHttpRequestを置き換えるモダンなAPIであり、Ajaxを使用するために広く採用されています。XMLHttpRequestは古いAPIであり、fetchに比べて複雑で扱いにくいため、fetchがAjaxを実現するためのAPIとして広く使用されています。

Q: つまりAjaxとは構成のことまたは概念であり、関数名やプロトコル名の様な限定的なものではないということですか？Ajax構成を実現するためにこれまでではXMLHttpRequestを使用していたが複雑であるためfetchが登場しfetchを利用することでAjaxが実現できるという認識であってますか？

はい、正確におっしゃっていただいた通りです。

Ajaxは、Asynchronous JavaScript and XMLの略であり、Webページを非同期で更新するための概念や手法を表します。つまり、Ajaxは、Webページを動的にするための構成やアーキテクチャーのことを指していると言えます。

一方、XMLHttpRequestは、Ajaxを実現するためのAPIの一つでした。fetchは、XMLHttpRequestを置き換えるモダンなAPIであり、Ajaxを実現するためのAPIとして広く採用されています。つまり、fetchを使用することで、Ajaxの構成を実現することができます。

そのため、fetchはXMLHttpRequestに比べてシンプルで使いやすく、現代的なWeb開発では広く採用されています。しかし、fetchは古いブラウザーではサポートされていない場合があるため、必要に応じてポリフィルやライブラリを使用する必要があります。

Q: なるほどよくわかりました。　ところでポリフィルとはなんですか？

ポリフィル（polyfill）は、古いブラウザーで新しいWeb技術をサポートするためのJavaScriptコードのことを指します。

新しいWeb技術は、古いブラウザーで完全にサポートされていない場合があります。そのため、開発者は、新しいWeb技術を使用するWebページを開発する際に、古いブラウザーでも動作するようにする必要があります。この場合、ポリフィルを使用することで、新しいWeb技術をサポートしていない古いブラウザーでも、新しいWeb技術をエミュレートすることができます。

ポリフィルは、JavaScriptで書かれたコードであり、Webページに組み込んで使用することができます。例えば、ES6の機能であるArray.from()メソッドを使用する場合、古いブラウザーではサポートされていないため、ポリフィルを使用してArray.from()メソッドを古いブラウザーでも使用できるようにすることができます。

ポリフィルは、開発者が自分で書くこともできますが、多くのポリフィルはオープンソースで公開されており、npmパッケージとしてインストールすることができます。また、ポリフィルを使用する場合は、Webページのパフォーマンスが低下する可能性があるため、必要最低限のポリフィルを使用するように注意する必要があります。

Q: 少し話は変わりますが、”エミュレート”とはどういうことですか？私はエミュレーターというものを使ったことがあるのでなんとなくどういうものなのかのイメージはありますが言語化したことがありません。

エミュレート（emulate）は、あるシステムや機能を、別のシステムや機能で再現することを指します。つまり、本物のシステムや機能を模倣して、同様の機能を提供することです。

例えば、コンピューターゲームのエミュレーターは、古いゲーム機のハードウェアを再現し、その上でゲームを実行することで、本物のゲーム機と同様のプレイ体験を提供します。また、オペレーティングシステムのエミュレーターは、異なるアーキテクチャーやプラットフォームで実行されるオペレーティングシステムを再現し、その上でアプリケーションを実行することで、異なるシステム間でアプリケーションを実行できるようにします。

Web開発においては、古いブラウザーで新しいWeb技術をサポートするために、ポリフィルを使用してエミュレーションすることがあります。ポリフィルは、新しいWeb技術の機能を再現し、古いブラウザーでも同様の機能を提供することで、本来のブラウザーの機能と同様のプレイ体験を提供します。

Q: 革新的なアップデートだとポリフィルが作れないこともある様に思いますが今までにJavaScriptでそう言った例はありますか？

はい、JavaScriptのポリフィルは、常に新しいWeb技術に対応しているわけではありません。特に、新しいWeb技術が大幅なシンタックス変更や新しいAPIを導入する場合、ポリフィルの開発が難しいことがあります。また、ポリフィルの実装によっては、性能の問題が発生する場合があるため、完全に置き換えることができない場合もあります。

JavaScriptにおいても、ポリフィルが作れない新しいWeb技術が登場することがあります。たとえば、WebAssemblyという技術は、JavaScriptとは異なる形式のバイナリコードを実行することができます。WebAssemblyはポリフィルによって再現することができないため、JavaScriptの代替手段として注目を集めています。

また、WebRTCやWebUSBなどの新しいWeb技術は、Webブラウザーがハードウェアに直接アクセスできるようになるため、ポリフィルで再現することができません。

しかし、一般的には、JavaScriptの開発者は、ポリフィルやライブラリを使用して、新しいWeb技術を広くサポートすることができます。また、JavaScriptの開発者コミュニティは非常に活発であり、新しいWeb技術が登場した場合、それに対応したポリフィルやライブラリが開発されることが期待されます。

Q: WebRTCというのはP2Pで通信する様な形式でビデオ通話のシステムで使われている認識ですがあっていますか？またWebUSBとはなんですか？

はい、WebRTCはWebブラウザーを通じてP2P（ピア・ツー・ピア）でリアルタイム通信を行うためのAPIであり、ビデオ通話や音声通話、チャットなどのWebアプリケーションで使用されています。

WebRTCは、ブラウザー内でP2P通信を行うために、JavaScriptでAPIを提供しています。このため、ブラウザー間での通信に必要なプログラムをブラウザーが自動的に処理するため、開発者は比較的簡単にWebRTCを使用することができます。また、WebRTCは、ネットワーク帯域幅を効率的に使用し、安全でセキュアな通信を実現することができます。

WebUSBは、USBデバイスにWebブラウザーから直接アクセスするためのAPIです。WebUSBを使用することで、WebアプリケーションからUSBデバイスを直接制御することができます。例えば、WebUSBを使用することで、Webブラウザーから3DプリンターやロボットなどのUSBデバイスを直接制御することができます。

WebUSBは、USBデバイスとの直接的な接続を可能にするため、Webアプリケーションの機能性が向上すると期待されています。しかし、USBデバイスを直接制御することはセキュリティ上の問題があるため、WebUSBは現在実験的なAPIとして位置付けられており、一部のWebブラウザーでのみサポートされています。

Q: WebUSBはかなり悪用できる部分が多い気がしますがサポートされているブラウザとはなんですか？実際悪用しようとするとどの様なパターンが考えられますか？

WebUSBは、USBデバイスをWebブラウザーから直接操作できるため、悪意のあるWebアプリケーションからUSBデバイスを操作されると、データの盗聴や改ざん、ウイルスの感染など、多様なセキュリティ上の問題が発生する可能性があります。したがって、WebUSBは、慎重に使用する必要があります。

WebUSBは、Google ChromeとOperaなどの一部のWebブラウザーでサポートされています。また、Microsoft EdgeやMozilla Firefoxも、将来的にWebUSBをサポートする予定です。

悪用される可能性のあるパターンには、以下のようなものがあります。

ユーザーに気付かれずに、WebアプリケーションからユーザーのUSBデバイスにコマンドを送信し、デバイスを操作することができます。悪意のあるWebアプリケーションから、ユーザーのコンピューターに接続されているUSBデバイスからデータを盗み出すことができます。 Webアプリケーションから、ユーザーが接続したUSBデバイスにマルウェアを送信することができます。したがって、WebUSBを使用するWebアプリケーションは、慎重に検討される必要があり、ユーザーがUSBデバイスを操作するために明示的な許可を得る必要があります。また、WebUSBを使用するWebアプリケーションは、信頼できるソースからのみ提供されるべきであり、ユーザーがWebアプリケーションの使用をやめることができるように、常に明示的なオプトアウト機能が提供されるべきです。