moduhub

作り方

AIがコードを書いてくれる時代には、「どうコーディングするか」よりも「何で作れて、何を知っておくべきか」のほうが大切です。moduhubのツールがどんな材料と知識でできているかをそのままお見せします。

39個のサービスのうち18個は、外部ライブラリを使わずブラウザの標準機能だけで作りました。

すべてのサービスの共通基盤

すべてのツールが共通で使う基盤技術です。

サービス別に見る

図解IT事典

知っておくべきこと

SCAN・C-SCAN・LOOK・C-LOOKは「端のトラックまで行くか」と「一方向だけで処理するか」の2つの選択の組み合わせなので、0側の方向はトラック番号を反転(t → 最終トラック − t)して大きい側の方向のコード1つで計算する。ARPの画面は状態を持たず、(モード, 段階)からARPテーブルを毎回計算し直す。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. SVG (新しいタブで開きます)拡大しても崩れないベクターグラフィック
使ってみる

錦鯉育成ゲーム

知っておくべきこと

魚が食べられるのは、相手より1.15倍以上大きく、相手の中心が自分の体の中に入ったときだけ。食べると獲物の面積の半分だけ体の面積が増える(r' = √(r² + 0.5·r獲物²))ので、大きくなるほど成長はゆっくりになる。

ライブラリ

  1. three.js (新しいタブで開きます)ブラウザで3Dシーンを描くグラフィックライブラリ

ブラウザ機能

  1. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能
使ってみる

ゼリーサイコロ

知っておくべきこと

サイコロごとに64個(4×4×4)の粒子を置き、各マスを元の形に戻す力でぷるぷるさせている。出目は乱数ではなく、止まった格子の回転で上を向いた面から読む。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. WebGPU (新しいタブで開きます)WebGLの次世代となるGPU活用機能
  2. Web Audio API (新しいタブで開きます)ブラウザで音を合成・再生
使ってみる

2048コンボ

知っておくべきこと

1回の移動で同じ数字は1度だけ合体し、新しいタイルは空きマスに90%の確率で2、10%の確率で4が出る。

ライブラリ

  1. three.js (新しいタブで開きます)ブラウザで3Dシーンを描くグラフィックライブラリ

ブラウザ機能

  1. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能
  2. Web Audio API (新しいタブで開きます)ブラウザで音を合成・再生
  3. Vibration API (新しいタブで開きます)スマホの振動で手応えを加える
  4. Web Share API (新しいタブで開きます)端末の共有シートで結果を送る
使ってみる

チャート売買練習

知っておくべきこと

Binanceの1時間足5,000本から途切れずに続く最長区間だけを残し、1時間足をまとめて4時間足と日足を作り直す。

ライブラリ

  1. Lightweight Charts (新しいタブで開きます)TradingView製の金融チャートライブラリ
  2. TanStack Query (新しいタブで開きます)サーバーから取得したデータのキャッシュと再取得
  3. tRPC (新しいタブで開きます)サーバー関数を型のまま呼び出すAPIツール
  4. Drizzle ORM (新しいタブで開きます)TypeScriptでデータベースを扱うORM
  5. Supabase (新しいタブで開きます)ログインとPostgreSQLデータベース

データの出典

  1. Binance Market Data API (新しいタブで開きます)ビットコイン・イーサリアムの過去ローソク足
使ってみる

破れる布シミュレーター

知っておくべきこと

布を点と棒に分けてVerlet積分で動かし、棒が元の長さの2.8〜4倍を超えて伸びると切れる。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能
  2. Canvas 2D (新しいタブで開きます)ピクセル単位で描画し画像として保存
  3. File API (新しいタブで開きます)ドロップした画像ファイルの読み込み
使ってみる

合格するかも

知っておくべきこと

0.35倍より縮小すると文字を隠す。ハングルはSDFのグリフアトラスに焼き込み、ノード・線・文字を種類ごとに1回で描く。

ライブラリ

  1. three.js (新しいタブで開きます)ブラウザで3Dシーンを描くグラフィックライブラリ
  2. TinySDF (新しいタブで開きます)拡大しても鮮明なSDF画像に文字を変換するツール

ブラウザ機能

  1. WebGPU (新しいタブで開きます)WebGLの次世代となるGPU活用機能
  2. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能
  3. IndexedDB (新しいタブで開きます)大きなデータをブラウザ内に自動保存
  4. Broadcast Channel API (新しいタブで開きます)同じサイトの複数タブ間で変更を伝える
  5. File System Access API (新しいタブで開きます)端末上のファイルに直接保存

データの出典

  1. Google Drive API (新しいタブで開きます)自分のGoogleドライブにマップファイルを保存
使ってみる

韓英タイプミス変換器

知っておくべきこと

英字キーを2ボル式のハングル字母に変換し、続く字母を音節に組み立てる。Shiftを押したキーは濃音やㅒ·ㅖになる。

ライブラリ

  1. Hangul.js (新しいタブで開きます)ハングルの字母を分解し音節に組み立てる
使ってみる

絵文字検索ツール

知っておくべきこと

ハングル音節のコードから0xAC00を引いて21×28で割ると初声が得られる。この計算で「ㅅㄹ」のような初声だけでも検索できる。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Clipboard API (新しいタブで開きます)ボタン1つでコピー

データの出典

  1. Emojibase (新しいタブで開きます)絵文字名と検索語の3言語データ(ビルド時に変換)
使ってみる

文字数カウンター + メタスニペット検査器

知っておくべきこと

検索結果のタイトルは15〜32文字、説明は50〜120文字を推奨範囲とし、バイト数はUTF-8エンコード基準で数える。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Encoding API (新しいタブで開きます)文字をUTF-8バイトに変換してサイズを数える
使ってみる

GitHubプロフィール比較ツール

知っておくべきこと

公開指標6つを2人のうち大きい値で割って0〜1にそろえ、フォロワー30%・リポジトリ25%などの重みを掛けて合計する。

ライブラリ

  1. TanStack Query (新しいタブで開きます)サーバーから取得したデータのキャッシュと再取得

ブラウザ機能

  1. SVG (新しいタブで開きます)拡大しても崩れないベクターグラフィック

データの出典

  1. GitHub REST API (新しいタブで開きます)公開プロフィールとリポジトリ統計
使ってみる

為替タイムマシン

知っておくべきこと

週末と祝日は為替レートが公表されないため、指定日以前で最も近い営業日のレートを使い、照会できるのは1999年1月4日以降だ。

ライブラリ

  1. Lightweight Charts (新しいタブで開きます)TradingView製の金融チャートライブラリ
  2. TanStack Query (新しいタブで開きます)サーバーから取得したデータのキャッシュと再取得

データの出典

  1. Frankfurter API (新しいタブで開きます)無料の日次為替レートAPI
使ってみる

QRコード生成機

知っておくべきこと

WiFiのQRはWIFI:T:暗号化方式;S:名前;P:パスワード;;の形式で、値の中の \ ; , : は前にバックスラッシュを付けてエスケープする。

ライブラリ

  1. node-qrcode (新しいタブで開きます)テキストからQRコード画像を作るライブラリ
使ってみる

時間↔フレーム計算機

知っておくべきこと

29.97fpsのドロップフレームは10分ごとの分を除き、毎分最初の2フレーム番号を飛ばし(59.94fpsは4つ)、秒とフレームの間を;で示す。

ライブラリ

外部ライブラリを使わずに作りました

使ってみる

惑星年齢計算機

知っておくべきこと

地球での年齢を各惑星の公転周期で割って惑星年齢を求め、惑星の現在位置はケプラー方程式を解いて計算する。

ライブラリ

  1. three.js (新しいタブで開きます)ブラウザで3Dシーンを描くグラフィックライブラリ

ブラウザ機能

  1. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能

データの出典

  1. NASA JPL Approximate Positions of the Planets (新しいタブで開きます)惑星の軌道要素の表(コードに内蔵)
使ってみる

パーセント計算機

知っておくべきこと

増減率は(現在値−以前値)÷|以前値|×100で、マージン率は原価ではなく売上を分母にした(売上−原価)÷売上×100だ。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Intl API (新しいタブで開きます)言語別の数値表記・国名・文字分割
使ってみる

漢江水温チェック

知っておくべきこと

ソウル市の水質データは測定所ごとに複数時刻の行が混ざって届くため、測定所ごとに日付と時刻が最も新しい値だけを使う。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Geolocation API (新しいタブで開きます)許可を得て現在地を取得

データの出典

  1. 서울 열린데이터광장 수질 측정 자료 (新しいタブで開きます)漢江の測定所別・毎時の水温と水質
使ってみる

ランダムルーレット

知っておくべきこと

狙った角度から的の回転角を引いて当たったマスを決める。3Dが使えない端末では偏りのない乱数で抽選する。

ライブラリ

  1. three.js (新しいタブで開きます)ブラウザで3Dシーンを描くグラフィックライブラリ
  2. lz-string (新しいタブで開きます)長いデータを短い共有URLに圧縮

ブラウザ機能

  1. WebGL (新しいタブで開きます)GPUで2D・3Dを描くブラウザ機能
  2. Web Crypto API (新しいタブで開きます)予測しにくい暗号論的乱数の生成
  3. Web Audio API (新しいタブで開きます)ブラウザで音を合成・再生
  4. Vibration API (新しいタブで開きます)スマホの振動で手応えを加える
  5. Web Share API (新しいタブで開きます)端末の共有シートで結果を送る
使ってみる

カラーコード変換器

知っておくべきこと

HEXはRGB3チャンネルの8ビット値を16進数で並べたもので、HSLはRGBの最大値と最小値の差から彩度と色相角を求める。

ライブラリ

  1. react-colorful (新しいタブで開きます)軽量なカラーピッカーコンポーネント
使ってみる

ランダム数字生成器

知っておくべきこと

crypto.getRandomValuesの32ビット整数を2の32乗で割って0以上1未満の乱数を作り、重複なしで引くときは出た数を飛ばす。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Web Crypto API (新しいタブで開きます)予測しにくい暗号論的乱数の生成
使ってみる

1分自己紹介リズムコーチ

知っておくべきこと

空白を除いた文字数を毎秒4・5・6文字で割り、句点ごとに0.35秒、読点ごとに0.18秒の間を足して話す時間を推定する。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Web Audio API (新しいタブで開きます)ブラウザで音を合成・再生
  2. Canvas 2D (新しいタブで開きます)ピクセル単位で描画し画像として保存
使ってみる

抽選器

知っておくべきこと

Web Cryptoで作った32ビットの乱数を2の32乗で割って0〜1の値を得て、すでに選ばれた項目は除外して引き直す。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Web Crypto API (新しいタブで開きます)予測しにくい暗号論的乱数の生成
使ってみる

Dデイカウンター

知っておくべきこと

目標日と今日をどちらも午前0時にそろえてから日数を数え、2月30日のような存在しない日付は入力の段階で除外する。

ライブラリ

  1. date-fns (新しいタブで開きます)日付の加減算とカレンダー計算の関数集
使ってみる

生まれてから何日計算機

知っておくべきこと

2つの日付をUTCの午前0時に変換して経過日数を求め、記念日は韓国の百日祝いのように生まれた日を1日目として数える。

ライブラリ

  1. date-fns (新しいタブで開きます)日付の加減算とカレンダー計算の関数集
使ってみる

日付計算機

知っておくべきこと

終了日を含めると1日足し、月数はカレンダー基準で数える。月末から始めると、短い月の月末までを1か月とみなす。

ライブラリ

  1. date-fns (新しいタブで開きます)日付の加減算とカレンダー計算の関数集
使ってみる

営業日計算機

知っておくべきこと

土日を先に除き、平日と重なった祝日だけを別に数える。祝日は年ごとの日付リストで判定する。

ライブラリ

  1. date-fns (新しいタブで開きます)日付の加減算とカレンダー計算の関数集
使ってみる

世界国旗クイズ

知っておくべきこと

国ごとの2文字の国コード(ISO 3166-1)で国旗画像を探し、日本語の国名がなければブラウザのIntl.DisplayNamesで補う。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Intl API (新しいタブで開きます)言語別の数値表記・国名・文字分割

データの出典

  1. REST Countries (新しいタブで開きます)国名・国コード・国旗URL
  2. Flagpedia flagcdn (新しいタブで開きます)国コードで探す国旗画像
使ってみる

イーサリアム口座生成器

知っておくべきこと

128ビットの乱数からBIP-39の12単語を作り、BIP-44パスm/44'/60'/0'/0/0(60はイーサリアム)で最初のアカウント鍵を導出する。

ライブラリ

  1. viem (新しいタブで開きます)イーサリアムの単位換算とアカウント生成を助けるライブラリ
  2. node-qrcode (新しいタブで開きます)テキストからQRコード画像を作るライブラリ

ブラウザ機能

  1. Web Crypto API (新しいタブで開きます)予測しにくい暗号論的乱数の生成
使ってみる

グラデーション生成器

知っておくべきこと

カラーストップを位置順に並べてつなぎ、線形は角度(deg)で、円錐形はfrom角度で開始方向を決める。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. CSS Gradients (新しいタブで開きます)CSSだけで描く線形・円形・円錐形グラデーション
使ってみる

動くテキスト効果生成器

知っておくべきこと

文字をコード単位ではなく見た目の文字(書記素)単位で分けないと、合成された絵文字がばらばらになり1文字として動かない。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Intl API (新しいタブで開きます)言語別の数値表記・国名・文字分割
  2. CSS Animations (新しいタブで開きます)キーフレームで動きを作るCSS機能
使ってみる

スタディカード

知っておくべきこと

カードごとに0〜100の習熟度を持ち、「わかった」は+20点、「わからなかった」は−15点。50点未満で最も低い5枚を苦手カードとして表示する。

ライブラリ

  1. tRPC (新しいタブで開きます)サーバー関数を型のまま呼び出すAPIツール
  2. Drizzle ORM (新しいタブで開きます)TypeScriptでデータベースを扱うORM
  3. Supabase (新しいタブで開きます)ログインとPostgreSQLデータベース
  4. TanStack Query (新しいタブで開きます)サーバーから取得したデータのキャッシュと再取得
使ってみる

JSONツールキット

知っておくべきこと

JWTのexpは秒単位なので、現在時刻を1000で割って比較する。署名は検証せず、base64urlのエンコードだけを解いて表示する。

ライブラリ

  1. Ajv (新しいタブで開きます)JSONスキーマのバリデーター
  2. js-yaml (新しいタブで開きます)YAMLとJSONを相互変換
  3. JSONPath Plus (新しいタブで開きます)JSONPath式で目的の値を取り出すツール
  4. jsdiff (新しいタブで開きます)2つのテキストの差分を行単位で比較
使ってみる

ポモドーロタイマー

知っておくべきこと

集中25分と短い休憩5分を繰り返し、4回ごとに15分の長い休憩を入れる。残り時間は開始時刻と現在時刻の差で計算する。

ライブラリ

外部ライブラリを使わずに作りました

ブラウザ機能

  1. Web Audio API (新しいタブで開きます)ブラウザで音を合成・再生
  2. Web Locks API (新しいタブで開きます)複数タブのうち1つだけが処理するよう調整
  3. Page Visibility API (新しいタブで開きます)タブが隠れたり再表示されたりするのを検知
  4. Fullscreen API (新しいタブで開きます)画面全体に大きく表示

データの出典

  1. Kenney Interface Sounds (新しいタブで開きます)自由に使える(CC0)通知効果音
  2. Unsplash (新しいタブで開きます)背景の自然写真(出典表記)
使ってみる
作り方 | moduhub