サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
プライムデーセール
izanami.dev
Meta社が「useEffectの46%は不要だった」という調査結果を発表。それを知った私が、自分のコードを見直してuseEffectを減らしていった体験談。連鎖するuseEffectでデバッグに苦労した経験から、どうやって改善していったかを共有。 useEffectを使いすぎてた私がMeta社の調査結果を見て反省した話 こんにちは。とちです。 Reactで開発していて、「useEffect書きすぎかも…」と感じたことはありませんか?私はしょっちゅうありました。 そんな中、Meta社(旧Facebook)が自社のコードベースを調査したら、useEffectの約46%が実は不要だったという調査結果を知って、かなり衝撃を受けました。 この記事では、私がuseEffectを使いすぎていた理由を反省しつつ、どうやって減らしていったかを共有します。 React公式ガイドライン:useEffectは「
Figma Desktop と Claude Code を連携するには、Figmaのデスクトップアプリの左上のアイコンから、基本設定を押し、「Dev Mode MCP サーバーを有効にする」にして、Claude CodeにMCPサーバーを追加する Figma Dev Mode MCP Serverとは何か この連携の核となるのが、Figmaが提供する「Dev Mode MCP Server」という機能だ。MCPは "Multi-purpose Code-generation Platform" の略で、その名の通り、多様なコード生成のためのプラットフォームとして機能する 具体的には、Figmaのデスクトップアプリ内でローカルサーバーを起動し、デザインデータをAIエージェント(この場合はClaude Code)にストリーミングで提供する仕組み。 これにより、AIはFigmaのデザイン構造、例
個人開発は Claude Code、記事作成は Gemini CLI といった感じで使い分けをしてる そうそう、Gemini CLI ってさ、無料枠が多いのよ。だから記事作るときくらいは、使ってみようかなと。でも、無料枠を超過しないように、できるだけ構成とかアイデア出しはワイのほうでやるようにしてる ObsidianにGemini CLIを導入して、数分で6335文字書いてくれた内容はこちら↓皆も、Gemini CLI で記事作って、izanami に投稿して欲しい。izanami は、最初から SEO/LLMO に強いのでおそらく最強の効果がある izanami は SEO保守10年の知見が組み込まれSEO/LLMO強化設計されてる。後は、izanami LLMO Analyzer で点数上げていけば本当に凄いことになりそう… 「ターミナル」とか「CLI」って聞くと、なんか黒い画面に英語
結論:Claude Codeのdenyは、ガッツリ書いておけ ワイは、Claude Code と Supabase MCP で、Supabase のDB全部削除させてしまったことがある。目の前でテーブルが「ッポン」といった感じで消えてトラウマになった 思い返せば permissions.deny に書いておけばよかったのかもしれない permissions.deny とはなんぞや? Claude Codeのpermissions.denyは、AIが危険な操作や機密情報へのアクセスを行わないよう制限する設定やね。これがあるおかげで、AIに任せても「壊さない・漏らさない・暴走しない」が実現される AIに対してのガードレール設計ですね この記事では、Claude Code の deny リストを読み解きながら、「なぜその操作が禁止されているのか」「自分の環境でも取り入れるべきか?」を考えてみる
Cloudflare Images, Pages, D1, Next.js, Clerkで揃えれば、初期コストゼロで実用的な MVP が組めます。おまけにカード不要 コスパ最強な技術スタック 凄いところ すべてに無料枠がある(カード不要) 画像・デプロイ・DB・認証の面倒な部分が自動化/省略可能 フロントエンドに集中できる MVP の検証スピードを最大化できる Cloudflare Images(画像最適化) Cloudflare が提供する画像最適化サービス。アップロード(保存・配信は有料)するだけで、自動的にリサイズや圧縮が行われ、CDN を通じて高速に配信できます。URL パラメータでの制御も簡単で、容量課金ではなく画像数による課金体系も魅力。 2025年4月19日現在 料金表 あまり話題になることもなく、まだ認知されてないイメージですが、構築簡単でコスパ最強です。 自動リサイズ、最
そして、この一連の流れを限られた時間で実践することで、個人開発するための力が身につく! この方法は、Git の使い方も自然と学べるという利点もあるよ。完璧やろこれ。 この記事ガンガン、アップデートしていくから、 You ブクマ OK? それでは、今週の休日 1 日で以下をやってみましょうー!! Next.js インストール GO!! おはようございます!今日は休日ですね 「Next.js を活用した個人開発は、ウェブ開発を学ぶ上で最適な方法の一つ」っていうのは聞いたことあるよね? そんなこと、ワイは聞いたことないんやが、Next.js は個人開発に最適だと思うのよ。Yo, Yo create-next-app でプロジェクト作って、TypeScript、ESLint、Tailwind CSS など導入つっても意味分からんよな Next.js 15 のインストール方法はこれに詳しく書いてある
個人でもプロダクトを公開・運用できる群雄割拠の時代です。ノーコードやクラウドインフラの進化により、個人で SaaS(Software as a Service)を開発し、収益化することも珍しくなくなってきました。 知らずに運営していると、炎上や停止リスクを抱えることに。法律を抑えておくということはユーザーのためでもあります。 精読、理解しやすいように法律の要点のみを紹介します。 1. 個人情報保護法 ユーザーの名前・メールアドレス・IP アドレス・Cookie など、個人を特定できる情報を取り扱う場合は、個人情報保護法が適用されます。利用目的の明示、第三者提供の有無、問い合わせ窓口の設置、安全管理措置などが求められます。プライバシーポリシーの設置は必須です。 2. 景品表示法 「今だけ 50%OFF!」「国内 No.1!」といった広告表現が誇大・虚偽である場合、景品表示法に違反します。Sa
エンジニアや個人開発者が 技術情報を投稿するための プラットフォームです。個人開発アプリのPRにもどうぞ。
Cursor の Docs 設定方法 Cursor の Docs 設定は、Settings > Features > Docs から設定できます。 ここで、よく使用するフレームワークやサービスの公式ドキュメントを追加することで、開発中にドキュメントを参照してコードを生成したり、必要な情報を素早く参照できるようになります。 Docs Cursor Docs で Index させたドキュメントは、Symbols(アットマーク)を押せば参照可能です。 Symbolsを押すと Docs から参照できる Index failed Index failed 1000以上のページもすぐにIndexされる ドキュメントによっては、すぐに Index されるので、他のユーザーと共有化されている可能性もありそうです。 フロントエンド開発 Next.js 用途:React ベースのフレームワーク 特徴:App
izanamiは、さまざまな分野のエンジニアとデザイナーが交流し、情報を共有するプラットフォームです。継続的に新しい技術を学べる場所を提供することを目指しています。プログラミング、デザイン、学術など、関心のある分野に関する作品やノウハウを発信してください。
Next.js や BaaSを使うときのセキュリティ対策の覚書。RLS、DOMPurify、クリックジャッキングやXSS対策、クロスオリジン、CSPの設定など。 個人開発向け。認証系のアプリケーション開発時における現時点での BaaS やウェブアプリケーション(Next.js など)のセキュリティ対策の覚書。チェックリストなので深くは掘り下げない。更新、追加、修正予定あり。 データセキュリティ RLS の有効化とポリシー設定 例えば、Supabase を使う場合、RLS を有効にしてポリシーを適切に作成。各ユーザーがアクセスできるデータを厳密に制御する。 RLS(Row-Level Security)はデータベースのテーブルでユーザーごとに異なるアクセス制限を設定する仕組み。例えば、自分の投稿だけが見えるようにするなど、柔軟な制御が可能。 ポリシーとは、各ユーザーがどのデータにアクセスでき
このページを最初にブックマークしてみませんか?
『izanami - エンジニアやデザイナーのための技術共有プラットフォーム』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く