Anysome

ジャンルを問わないAwesomeリスト。

Why Anysome?

Awesomeリストを知っていますか？ カテゴリー別でAwesomeなアプリやツールをリスト化しているリポジトリで、 Awesomeは「素晴らしい」「最高」という意味を持っています。

しかし、Awesomeは単純であるが故にいくつかの問題があります。

• リポジトリやカテゴリーが多すぎて網羅できない
• 探しにくい
• 簡潔すぎる概要
• 終わったプロジェクトが記載されていて、その旨が書かれていない Anysomeはこれらの問題を解決するために作られました。

• 解説ページの作成
• 多言語化に対応
• 検索機能 (解説ページやその他テキスト)
• タグ機能
• 並び替え
• 表示の変更
• 項目のメタデータ追加

技術選定・ツール

Anysomeには大量のライブラリやツールを使用しています。 全てを導入する必要はありませんし、ほとんどはパッケージのインストールと共に導入できます。 VSCodeを使っていれば、拡張機能を自動でインストールできます。

言語・フレームワーク

• Node.js
  JavaScriptの実行環境。npmやyarn、pnpmを使用するなら必須。
• TypeScript
  JavaScriptの上位互換であり、型を持つ。
• pnpm
  ストレージにやさしく、高速で、npmやyarnよりも厳格なパッケージマネージャー。 bunの方が高速だが、一部の開発支援ツールはbunに対応していない。
• Astro
• Astro (VSCode)
• Astro (Open VSX)
  SSGで右に出る者無し。特定のUIフレームワークに縛られる必要もない。 裏でViteを使用していて、Viteの機能を利用できる。
• Svelte
• Svelte (VSCode)
• Svelte (Open VSX)
  バンドルサイズが3KB以下。構文はReactよりシンプルでAstroの構文と近い。
• MDX
• MDX (VSCode)
• MDX (Open VSX)
  Markdown内でJSXのようなコンポーネントを使える言語。タグ内でもMarkdownの構文は使える。
• UnoCSS
• UnoCSS (VSCode)
• UnoCSS (Open VSX)
  TailwindCSSとある程度互換性があって、リセットCSSが強制的につかない。
• SASS
• SASS (VSCode)
• SASS (Open VSX)
  セミコロンや波括弧を省略する構文が特徴的で楽。
• Stylus
• Stylus (VSCode)
  SASSの基本的な構文と互換性があり、様々な書き方ができる自由な構文を持つ。

ツール

• Fontsource
  フォントを外部から読み込まない。フォントの最適化が楽。
• Iconify
• Astro Icon
  コンポーネントとして呼び出すだけで使えるし、キャッシュや最適化が自動。
• Autoprefixer
  生成されるCSSにベンダープレフィックスを自動で追加する。
• PostCSS Preset Env
  CSSの新機能を難なく使えるようにする（実装されていなくても）。
• Pagefind
  JSのみで検索機能を実装する。WASMがRustで書かれているので速いし、バンドルサイズも大きくない。
• Giscus
  GitHub Discussionsをコメント画面として追加する。すべてをGitHubに依存できる。

開発環境・開発支援ツール

• VSCode
• VSCodium
  オープンソースでクロスプラットフォーム対応のIDE。Astroが推奨している。 StackBlitzやProject IDXと互換性がある。
• EditorConfig
• EditorConfig (VSCode)
• EditorConfig (Open VSX)
  書式の設定などの共通化を行う。対応しているエディターが多い。
• Prettier
• Prettier (VSCode)
• Prettier (Open VSX)
  フロントエンドの言語に多く対応しているフォーマッタ。 AstroやSvelte、Stylusにも対応している。
• Biome
• Biome (VSCode)
• Biome (Open VSX)
  TypeScriptやTSXに対応しているフォーマッタ。Rustで書かれていて高速。 Linterとしても機能する。
• ESLint
• typescript-eslint
• ESLint (VSCode)
• ESLint (Open VSX)
  TypeScript用のLinter。AstroやSvelteに対応させることができる。
• Stylelint
• Stylelint (VSCode)
• Stylelint (Open VSX)
  CSS用のLinter。SASSやStylusに対応させることができる。
• markdownlint (VSCode)
• markdownlint (Open VSX)
  markdownlintそのものの拡張機能。markdownlintはNode.jsにインストールされることなく、VSCode上でのみ動く。
• Vitest
  TypeScriptに対応した単体テストツール。Viteと相性が良さそう。
• Playwright
  ブラウザ対応チェックに使えるE2Eテスト用のツール。Cypressより速い。
• Lefthook
  Gitコマンドの実行時にCIを挟んで事前にチェックを行えるツール。 Huskyとlint-stagedを網羅していて、なおかつ速い。

推奨ツール

• Starship
  クソみたいなプロンプトを劇的に改善する。Rustで書かれているので高速。
• fnm
  Node.jsのバージョンマネージャー。一部のOSで導入が難しいが、使い勝手は良い。 Rustで書かれているので高速。
• Pretty TypeScript Errors (VSCode)
• Pretty TypeScript Errors (Open VSX)
  TypeScriptのエラー表示を改善する拡張機能。
• Path Intellisense (VSCode)
• Path Intellisense (Open VSX)
  パスの入力に候補を表示する拡張機能。
• indent-rainbow (VSCode)
• indent-rainbow (Open VSX)
  インデントごとに強調したハイライトを追加する拡張機能。
• Error Lens (VSCode)
• Error Lens (Open VSX)
  エラーの行をハイライトする拡張機能。