こんにちは、私は Ryo といいます。私は HTML, CSS, JavaScript（TypeScript）の大ファンです。

趣味は、ゆったりとしたジャズを聴きながら、古代ギリシアの哲学書を読むことです。

• HTML
• CSS
• JavaScript
• TypeScript

• SvelteKit
• React（一度Webサイトで使ったことがあるのみ。APIはかなり学習していた）
• Vue（プレゼンテーションを作成する際に、ちょっとばかり触ったことがある。APIドキュメントは一通り知っている）
• Koa.js（バックエンドのAPIサーバーを開発するために使用した）

好きなフレームワークはなんといっても Svelte！

Svelte は最小限のコードと表現力豊かな記述で、直感的でシンプルな API をどのフロントエンドフレームワークよりも追求していると思います。

React や Vue も API は知っていますが、Svelte が最も私と相性がよいと感じました。

JSXを使うフレームワークはコンポーネント内に CSS を記述できないという大きな欠点が、私の特に気になるところでした・・・（Tailwindを使えば解決する場合がありますが）。その点、Vue や Svelte はビルドステップによって、HTML・CSS・JavaScript を生成するため独自の文法を使うことができ、このおかげで遥かに開発者経験は優れたものだと感じています。

Vue.js は Svelte とあまり構文自体は変わりませんが・・・Web フレームである Nuxt は無料の公式チュートリアルを公開していないので、API は知っていてもなかなか開発まではいかず・・・。Vue Router はたしかにとても素晴らしいプロジェクトであり、私の link-generator を作るための前身となった HTML-Router というウェブコンポーネントを利用したSPAを作るためのルーターの API にも少なからず影響を受けましたが、ルーターはディレクトリベースのルーティングである方が移行性を考慮するうえで強力であると判断したため、ファイルベースによる独自 API のルーターはナンセンスではないかと考えるに至りました。ただ、slidev というウェブ技術を利用し、マークダウンからプレゼンテーションを作成するというツールが面白いなと思って、プレゼンテーション資料を作ったことがあり、そのときに Vue は軽く触りました。

SvelteKit はシンプルで分かりやすいドキュメント、美しい API とシンプルな構文が非常に好印象です。また、Svelte グループが管理しているため、Svelte と緊密な統合を行えていることが愛用する所以でもあります。

• Kokomi's travel diary

開発当時、AI の文章生成や画像生成が流行していたので、『それらを活かしてブログを作ってみたら面白いのではないだろうか』と思い立ち、そのときに SvelteKit でブログを作成するやり方を学んでいたので、その実践として開発してみました。画像生成で同じ雰囲気で、絵を描くことが思った以上に困難であると判明し、現在はあまり更新を行っていません・・・。

• 取手の美容室 Vell mo

行きつけの美容室のウェブサイトを開発しました。初めの頃は、React Router を使用した React アプリとして開発していて、ルーターとしては、当時の自分は未熟で、コードの保守性のなさ、SEO対策のなさに不満を抱いていました。そこで、『様々な開発を経て得た、すべての反省を活かしたい！』として、デザインはほとんどそのままに、ゼロから1週間ほどで開発し直しました。

私はWebコンポーネントの大ファンでもあります。

使い勝手が悪い面もありますが、Web標準であり、あらゆる場所で使えることがとっても魅力的です。

Lit は私の最もお気に入りのライブラリであり、シンプルで強力な API が素晴らしいです。

• Simplest

  開発のきっかけとしては、マークダウンについて学習していた時に知った、 AST (Abstract Syntax Tree) という概念に興味を持ったことにありました。 そこで私は独自の構文を AST に変換し CSS を生成できたら便利かもしれないなーと思い立って開発しました。 基本的には、Web コンポーネントの属性に構文を記述することで、それを内部で AST から CSS に変換し、Shadow DOM に <style> タグを作成しその中に CSS を出力することで外部に漏れない限定的なスタイルを適用できるというものです。 『スタイルを目的とした HTML 要素があるのだとしたら、どういった将来になっていたのだろう』を実現したものになります。Tailwind は class 属性で実現したものですが、これは HTML要素 で実現した、SVG のような発想になります。 ただ私は結局のところ、CSS のセレクタの柔軟性に気づき、HTML と CSS は分離されているべきだという認識に至ったため、現在はパブリックアーカイブの状態にしました。

• weather-widget

  一日の天気を表示するためのコンポーネントです。友人から「学校から郵便番号を使った API を作成する課題がある」という話を聞き、「そのバックエンドの実装に、フロントエンドとして、お天気ウィジェットがあれば面白そうだ」と言ったことがきっかけで作りました。

Link-generator は、TypeScript の文字列リテラル型の型推論を利用して、完全に型安全にパスを生成するモジュールを提供します。

内部的に Map というデータ型を使用してリンクを効率的に生成し、フロントエンド/バックエンド問わず動作するため、SSR が主流な Web フレームワークでの開発に役立ちます。

簡単なAPIと、便利なオプションを提供しています。たった一つの関数で準備 OK！画像のパスでもサイトのリンクでもなんでも型安全にできます！

Koa.js は Express のようなコールバック地獄に陥らない点がとても使いやすく、最小限でありながら十分な API を提供しています。さらに、ドキュメントが1ページであったため、理解に時間がかかりませんでした。

• Kokomi shopping server

  基本的なショッピングアプリの API サーバーです。Firebase Authentication によるユーザー認証、Firestore によるデータ保存、Stripe による決済処理、Cloudinary を使用した画像保存など、実際のサービスを利用したものになります。各エンドポイントのテストもしっかり行われており、RBAC による権限管理もテストされています。