結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
macOS のファイルを断捨離して 60 GB 空ける
日々生活するにつれゴミが溜まるのは日常も PC も大差ないのですが，特に macOS は不要なキャッシュファイルが溜まりやすいと感じます．ディスク容量が逼迫し続け 10 GB を切り，いよいよ Photoshop も開けなくなってきたので，不要なファイルを 60 GB 分削除しました．以下メモです． 便利コマンド # ルートから 5 個下の階層までに存在する，100 MB 以上のファイルを検索 sudo du -x -m -d 5 / | awk '$1 >= 100{print}' # 現在のディレクトリ以下に存在する，50 MB 以上のファイルを検索 du -x -m | awk '$1 >= 50{print}' # ディレクトリを削除する rm -rf
知らないとあぶない、Next.js セキュリティばなし
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全な Next.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
【Go】HTTPサーバーは安全に終了させましょう
はじめに こんにちは。都内でソフトウェアエンジニアをしているtomoriです。 突然ですが、Go言語でHTTPサーバーを実装する際、サーバーの終了処理を適切に実装できている自信はありますか？ 自分が開発に携わっているプロダクトでは、ほんの最近まで下記のような不適切な終了処理を行なっていました（話を簡単にするためにここでは panic を使っています）。 err := http.ListenAndServe(":8080", handler) if err != nil { panic(err) } HTTPサーバー実装のサンプルとかでよく見るやつですね。 これだとアプリケーション側で、いわゆる Graceful Shutdown ができておらず、実行環境にて不具合を引き起こす恐れがあります。 というわけで、最近それを修正したのでアウトプットとして記事にします。 Go言語でHTTPサーバーを
Vite ってよく聞くけど何なんですか？ あれは
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
【2024年】React, TypeScript, Tailwind CSSでTodoアプリを作ろう
Todoアプリを作りながら、React, TypeScript, Tailwind CSSが学べる本です。
ChatGPTにgitのリポジトリ渡すと全ソースコード.txtをダウンロードさせてくれるやつ〜〜〜〜（AIに食わせるコード一覧が欲しい時用）
クレデンシャル含むソースコードをChatGPT等のクラウドLLMサービスにアップロードしないでください。 今回のプロンプトはオープンなリポジトリのみを対象としており、シェルスクリプトが実行される環境もChatGPT側のクラウド上のサンドボックス内のみを想定しています。 ローカル環境では以下のシェルスクリプトをそのまま実行せずに、ご自身が作成したシェルスクリプトを利用してください。 以下はソースコードのプロジェクトルートで実行することで、ソースコードのダンプを.txt形式でダンプするシェルスクリプトです。 \`\`\` #!/bin/bash # バイナリファイルかどうかを判定する関数 is_binary_file() { local file="$1" local file_output file_output=$(file "$file") if [[ "$file_output" ==
IP Anycast について
Cloudflare は現在120か国、320都市以上に500を超えるエッジデータセンターを保有しています。これらはIP Anycast という技術を用いて同じIPアドレスでその時点でのユーザーから一番近いエッジを判別しています。 また技術的に必然性のある場合を除き、全てのエッジの全てのサーバで全ての機能を動作させるというのが基本設計です。 このブログサイトでは今までCloudflareの様々な機能をテストし手順としてまとめてきており、非常に多くの機能が存在していることをお分かりいただけたかと思いますが、パブリッククラウドと異なりそれらの機能は可能な限り内部ルーティングなしで動作するように設計されており非常にモノリシックです。このため、ユーザーはどこにいても一番近いエッジと自動で通信が確立され同じ機能が提供されることになります。ゼロトラスト系のサービスを使う場合これはセキュリティと通信速度
UUIDとULIDを理解していない方は見た方がいい記事
Auto increment（自動採番）型を採用したくない場合 Auto Incrementは、データベースにおいて自動的に一意の識別子を生成するメカニズムです。通常、数値型の列が対象となり、新しいレコードが挿入されるたびにその列の値が自動的にインクリメントされます。典型的なIDですかね。 ここでは一意性の確保の話や、データ移行やバックアップのデメリットには言及せず、セキュリティとプライバシーの懸念にフォーカスして考えます。 予測可能性 Auto Increment型のIDは連番であるため、次に生成されるIDが容易に予測可能です。これにより、攻撃者がシステムの内部構造を推測し、不正アクセスを試みるリスクが高まります。 情報漏洩のリスク 連番のIDはデータベースの挿入順序を反映しているため、公開されることで企業の活動パターンやデータ生成の頻度が漏洩する可能性があります。 例） 競合他社は、公
RustでAPIサーバーを書くのが思ったより良い
最近いろんなところで採用事例が増えてきたRustですが、Webサービス開発でのAPIサーバーを書くのにRustは向いてないと言われたりします。Rustの第一のターゲットはシステムプログラミングでありGCがないためAPIサーバー開発でシビアなメモリ管理はしたくないというのは一理あるのですが、RustでAPIサーバーの開発を実際にやってみるとむしろ開発体験が結構いいなと感じます。パフォーマンスのために難しい所有権を無理にがんばるみたいなマイナスのイメージはほとんど当てはまらなかったです。 Rustの難しいライフタイム、所有権があまり出てこない Rustにおいて難しいとされるライフタイム、所有権といった概念があり私も書く前はかなり身構えていたのですが、これに苦しむことは思ったよりも少ないです。その要因はWebサーバーで扱う処理のほとんどがリクエスト・レスポンスモデルでデータの流れが一方向でシンプ
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
LINE Botの開発でCloudflareとHonoを使う理由
概要 速さが正義 LINE Botの開発でCloudflareとHonoを使う理由 Cloudflare Workersの応答速度が速いから PoPについて CloudflareはAWSのlambdaに比べてポイントオブプレゼンス（PoP）の数が多く、処理が実行される場所がよりユーザーの近くにある可能性が高い。 そのため、パフォーマンステストではAWS Lambda、AWS Lambda@Edgeよりも応答時間が小さいという結果になった。 コールドスタートがない Cloudflare Workersはコールドスタートがなく、LambdaとLambda@EdgeのようにEventBridgeで1分おきにツンツンしなくていい。 Service bindingsが便利だから Cloudflare WorkersのService bindingsを使用することで、worker間の通信はパブリックに
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
ユニットテストってもう言わない！ CI/CD時代のテスト分類に最適なテストサイズという考え方
はじめに 以前からユニットテスト/単体テストという言葉は使いづらい、と感じており今回も旧Twitterで「テストを実行時間ベースで分類する良い言葉ないかなー」と呟いていたところ、「テストサイズのSMLって考え方があるよ」と教えて戴きました。 だいたいは教えてもらったt_wadaさんの記事にすべて書いてあるのですが、自分の整理も含めて動画にしたので、その補完記事となります。 TL;DR 単体テストのバベルの塔は既に崩壊 CI/CDでの継続的テストには時間ベースのテスト分類が重要 UT/IT/E2EではなくSMLによるテストサイズがCI/CDには合う それは単体テストか結合テストなのか？ 自動テスト、手動テストに関わらずテストの分類として単体テストと結合テストという言葉は一般的です。 ITQBではTest Levelsという言葉で定義されていますし、以下のようなV字モデルの対応表はみんな知って
中級 Vim 操作
この記事は Vim 駅伝 の 06/05 の記事です。 前回の記事は thinca さんによる、 06/03 の「Meguro.vim #23 を開催しました」という記事でした。 次回は 06/07 に投稿される予定です。 はじめに 本記事は以下の記事のオマージュです。 Vim の基本操作のうち、比較的マイナーながら汎用的に使える機能や小技を集めました。プラグインや複雑な設定が必要なものは含まれておらず、いずれも Vim と Neovim の両方で使うことができます。気になったものがあれば使ってみてください。 ノーマルモード編 検索結果を次々と置き換える Vim で文字列置換を行う最も有名な方法は :substitute コマンド （短縮形: :s） ですが、ノーマルモードの cgn というイディオムも便利です。これは c オペレータと gn テキストオブジェクト (:h gn) を組み合
Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
プログラマ視点での生成AIとの付き合い方
プログラミングについて、最近考えてることについてのポエム。 基本的に、 GPT-4 と Claude-3-Opus を使った経験を念頭に置いて話をする。機械学習エンジニアではないので、あくまで利用者に徹した視点での話。仕事で生成AIを使ったパイプラインを作ったりはしている。 生成AIの進化速度を予測しておく 今大事なことは、今AIがどの程度の性能かという定点の話ではなく、その進化の速度を認識すること。 コード生成というタスクにおいて、生成AIモデルを人間に当てはめると、こんな感じの人物像を自分は持っている。 GPT-4: プログラミング経験2年目の大学2年生 Claude-3-Opus: プログラミング経験3年目の大学3年生 ここでいうn年目は、業務経験ではなく、プログラミングの単位がある大学での、教育課程としての経験年数。今のひたすら学習量を増やす方式だと、単に1年に1年分ぐらい賢くなっ
統計検定®︎準１級は実務で役に立つのか？
タイトルの結論は、「役に立つ」です。 役に立つか立たないかの議論は一切せず、本記事では、如何に統計や数学が実社会で役に立つかを紹介します。 はじめに こんにちは。ZENKIGENデータサイエンスチーム所属の廣田です。原籍はオムロンソーシアルソリューションズ株式会社 技術創造センタですが、社外出向でZENKIGENに所属しており、数理最適化や機械学習を用いたデータの分析業務、それらの結果に基づいた顧客への提案をしております[1]。 出向先であるZENKIGENの同僚にも、原籍のオムロンの同僚にも、統計検定®の準1級や1級を持っている方がいて、私も負けじと準1級を受験しました。結果、統計検定®準1級に合格し、優秀成績賞までいただくことができました。 統計検定®合格証と優秀成績賞 試験対策を通じて、改めて統計学の考え方は有用と感じました。この手の検定試験は物事を体系的に学ぶきっかけになるため、私
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
無料で商用にも使える日本の郵便番号APIをリリースしました
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
