Skip to content
View cat394's full-sized avatar

Block or report cat394

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
cat394/README.md

あいさつ

こんにちは、私は Ryo といいます。私は HTML, CSS, JavaScript(TypeScript)の大ファンであり、ウェブがとても好きです。

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

好きなフレームワーク

私が好きなフレームワークはなんといっても Svelte
私は Svelte をもう(たしか)3 年ほど寄付を通して支援しています。Svelte は最小限のコードと表現力豊かな記述で、直感的でシンプルな API をどのフロントエンドフレームワークよりも追求していると思います。

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

React はコンポーネント内に CSS を記述できない面倒さがあります(Tailwindを使えば解決する場合がありますが)。Next.js はメジャーアップデートばかりする・・・

Vue.js は Svelte とあまり構文自体は変わりませんが・・・Web フレームである Nuxt は無料の公式チュートリアルを公開していない・・・

そのため、ほとんどの Web サイトは SvelteKit で作られています。 SvelteKit はシンプルで分かりやすいドキュメント、美しい API とシンプルな構文、Remix のような複雑怪奇なディレクトリベースのルーティングがないことが非常に好印象です。また、Svelte グループが管理しているため、Svelte と緊密な統合を行えていることが愛用する所以です。

SvelteKit で開発したサイト

  • ポートフォリオ

    見た目はいいのですが、開発当時の私は未熟であり、不要な抽象化が多くみられ、コードは美しくありません・・・。 『SvelteKit を学んだのだから、さぁそれを活かして何かを作ろう!』と思い立ち、それの練習台として開発しました。

  • Kokomi's travel diary

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

  • 取手の美容室 Vell mo

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

    各コンポーネントの API は高品質で、無駄なファイルもなく、保守しやすいものに仕上がっています。無駄な CSS 変数の定義もなければ、各ページに丁寧にSEO対策がされ、アクセシビリティも優れています・・・

ウェブコンポーネント!

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

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

お気に入りのライブラリ

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

開発したウェブコンポーネント

  • Simplest

    『スタイルを目的とした HTML 要素があるのだとしたら、どういった将来になっていたのだろう・・・』を実現したものになります。しかし、私は結局のところ、HTML と CSS は分離されているべきだという認識に至り、現在はパブリックアーカイブの状態となっています。

  • weather-widget

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

代表作: Link-generator

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

  • 生成速度: 超高速
  • 互換性: フロントエンド・バックエンド問わず動作

これにより、ウェブアプリやウェブサイトでリンク切れすることを簡単に防ぐことができます!

しかも、バックエンドとフロントエンドの両方で機能するため、任意の Web フレームワーク(Next.js、SvelteKit、Nuxt...などなど)で役立ちます。

好きなバックエンドフレームワーク

Koa.js

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

開発したバックエンドサービス

  • Kokomi shopping server

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

お気に入りのバックエンドのサービス

私は Firebase の大ファンです。

  • 認証: Firebase Authentication が一番使いやすい。
  • データベース: Firestore が一番使いやすい。

SQL データベースを利用する際に Prisma を使用するケースが多いとは思いますが、抽象化があまりにも高レベル過ぎる気が・・・

Firestore のように、プロジェクトごとに抽象化しやすいレベルの API が丁度良いと感じます。

Pinned Loading

  1. link-generator link-generator Public

    A simple type-safe generator for creating links.

    TypeScript 3 1

  2. checker checker Public

    Typescript utility validation

    TypeScript