Welcome to my website!https://cryptoboxme.com/https://cryptoboxme.com/blog/broadcast-channel-api/https://cryptoboxme.com/blog/broadcast-channel-api/本記事では、BroadcastChannel APIを活用して同一オリジン内の複数タブ間で即時に情報共有できる仕組みを解説しています。外部認証後、認証画面から親タブへ通知しUI更新を実現する例を、JavaScriptやReactのコードサンプルと共に紹介。さらに、ブラウザ互換性やセキュリティ対策、認証状態共有やカート同期などの応用例にも触れ、シンプルかつ保守性の高い実装がユーザー体験向上に寄与する点を強調しています。Tue, 04 Feb 2025 00:00:00 GMThttps://cryptoboxme.com/blog/async-react/https://cryptoboxme.com/blog/async-react/React Conf 2025の講演「Async React」をもとに、アプリを“デフォルトで非同期”とみなしてUIを組み立てる考え方を紹介しました。Sync Reactで起きがちなちらつきや過剰なローディングは、性能不足ではなく状態の“調整”の問題として捉え直し、Transitions/Suspense/useOptimistic/ViewTransitionsでbusy・loading・doneを埋めて滑らかな体験を実現します。一方でAPIの手動組み合わせは複雑になりがちなため、今後はルーターやデータ取得、コンポーネントライブラリ側で宣言的に抽象化していく流れにも注目です。Sun, 08 Feb 2026 00:00:00 GMThttps://cryptoboxme.com/blog/css-benchmark/https://cryptoboxme.com/blog/css-benchmark/この記事では、Reactにおけるinline styleのパフォーマンスについて、MUIのベンチマークツールを使用して検証を行った。結果から少なくともパフォーマンスの観点からinline styleを避けるべきという指摘は適切ではない可能性が示唆された。ただし、この結果はスタイリングの条件によって変わる可能性があることには留意が必要である。Thu, 23 Jan 2025 00:00:00 GMThttps://cryptoboxme.com/blog/how-to-create-blog/https://cryptoboxme.com/blog/how-to-create-blog/「CAREER SKILLS ソフトウェア開発者の完全キャリアガイド」という本をきっかけに、ブログを作ってみたら驚くほど簡単に5分ほどでデプロイできた。この記事では、その技術スタックと手順について解説する。今回使った技術は、AstroとCloudflare Pagesの2つ。Astroは静的サイトジェネレーターで、Markdownをそのまま記事にできる「Content Collections」が特に便利。これのおかげで素早くブログが構築できた。また、Cloudflare Pagesはデプロイが非常に簡単で、コストもかからない。深く調べずに選んだが、結果的に「当たり」だった。ブログ作成の流れはシンプルで、まずAstroをインストール。pnpm create astro@latest で新規プロジェクトを作成し、テンプレート選択時に「ブログテンプレート」を選ぶのがポイント。次にGitHubにプッシュ。GitHubにリポジトリを作り、プロジェクトをプッシュする。最後にCloudflare Pagesと連携し、アカウントを作成してGitHubリポジトリを接続し、自動デプロイするだけ。これで簡単にブログが公開できる。今後はデザインのカスタマイズやSEO強化、画像配信の最適化などを進めつつ、継続的にブログを更新していきたい。Thu, 12 Dec 2024 00:00:00 GMThttps://cryptoboxme.com/blog/improve-lcp/https://cryptoboxme.com/blog/improve-lcp/ブログのパフォーマンス改善、特にLCP（Largest Contentful Paint）の最適化について解説した記事。Lighthouseでの測定により、2.9MBの背景画像がボトルネックとなっていることを特定。Astroのastro:assets機能を活用し、WebP形式への変換や自動サイズ計算を実施。さらに、レスポンシブ対応と画質最適化により、画像サイズを230kBまで削減。結果として、モバイル・デスクトップ両環境でLighthouseスコア100点を達成。画像最適化における具体的な実装方法と、その効果を示している。Thu, 16 Jan 2025 00:00:00 GMThttps://cryptoboxme.com/blog/npm-link/https://cryptoboxme.com/blog/npm-link/pnpm add linkやyarn add linkを使うとローカルにクローンしたライブラリを直接アプリ側で使うことができ、簡単にデバッグすることができる。Thu, 09 Jan 2025 00:00:00 GMThttps://cryptoboxme.com/blog/career-skills/https://cryptoboxme.com/blog/career-skills/「CAREER SKILLS」はジョン・ソンメズ著の650ページを超える技術者向けキャリアガイドです。エンジニアとして4年目を迎え、成長の停滞を感じていた筆者がこの本から学んだ内容をメモ形式で共有します。Wed, 12 Mar 2025 00:00:00 GMThttps://cryptoboxme.com/blog/repomix/https://cryptoboxme.com/blog/repomix/repomixはLLMに渡すためのコードコンテキストを１つのファイルにまとめてくれるツールです。Sun, 25 May 2025 00:00:00 GMT