Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap

はじめに こんにちは、@okazu_dm です。 今回自分がぴざきゃっとさんが2022年4月に書いた以下の記事を更新したため、本記事ではその差分について簡単にまとめました。 Firebase Authentication利用上の注意点に関して生じた差分とは、すなわち「この2年強の間にどのような仕様変更があったか」と同義だと言えます。IDaaSに限らず認証のセキュリティに興味のある方には参考になるコンテンツだと思います。 更新した記事につきましては、以下をご覧ください。 差分について Firebase Authenticationの落とし穴と、その対策を7種類紹介する、というのがオリジナルの記事の概要でしたが、2年ほどの時間の中で対策については大きく進歩したものが4点ありました(残念ながら落とし穴が無くなった、とまでは言えませんが)。 今回記事の中で更新したのは以下4点です。 落とし穴 1.

2024-08-06 TSKaigi サブイベント #1 フロントエンド

先日のことですが、以下のニュースが統計的学習モデル界隈で話題になっていました。 肝心の箇所が会員限定コンテンツなので簡潔にまとめると、従来モデルよりも説明変数に入れる海域の数を増やした上で、Lasso（L1正則化）回帰で多重共線性を抑えつつ汎化性能を高めるというアプローチを取った、というお話です*1。これは回帰分析という基本に立ち返った、昨今の「猫も杓子も生成AI」という流れからは一線を画した試みで、いかにも玄人好みという感があるなと僕も感じた次第です。 一方で、僕が身を置く広告・マーケティング業界でもMMM (Media/Marketing Mix Models)を初めとして様々なタイプの回帰分析が広く行われていますが、個人的に見聞する範囲では冗談でなく本当にピンキリで、中には「そんなデタラメな回帰分析で本当に役員会の意思決定に使っているんですか？？？」みたいなケースも珍しくありません。

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

はじめに ChatGPTブームがひと段落した感がありますが、周りのエンジニアでChatGPTを活用している姿をあまり見みません。 基本的なテクニックを理解すれば、エンジニアこそChatGPTを活用できると思うので、普段使用しているテクニックをいくつかピックアップして紹介します。 プロンプトの記載方法 Markdown記法で指示する 色々なところで紹介されていますが、回答や処理の精度を上げる方法としてChatGPTへの指示にMarkdown記法を使用することがオススメされています。 例えば下記のような文章による指示を行おうとした場合

はい。学芸員資格持ちがまずは神奈川県のおすすめ美術館を書くよ。 なお増田の観点により近現代が多くなっています。 ～神奈川県立近代美術館（通称かまきん）～昔は鶴岡八幡宮の境内にあった（建築が坂倉準三で有名）けど、今は葉山の海沿いにある美術館。（鶴岡八幡宮のそばの鎌倉別館は今もあるはず）近代美術館としては国近美に次ぐ歴史のある美術館で、長いだけあって渋めも多いが、確かな企画、作品が多い。葉山の雰囲気も良いね。ここにいた学芸員のかたがいろいろな美術館の館長として活躍していたりするよ。 ～江之浦観測所～現代美術家、杉本博司氏が設計した施設。 個人的には彼の作品では「シアター」シリーズが素晴らしいと思う。その後の歴史や宗教に接続する作品群も戦略的とは思うけどね。ちなみにこの施設、中学生未満は入場不可。 ～横浜美術館～改修工事が終わり、トリエンナーレから再開。建築は丹下健三。ロビーが印象的。作品として

はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に

全文検索エンジンも、事前に検索対象のデータを調べてこのような索引を作っておくことで、高速な検索を実現しています。 インターネット検索の例 たとえばインターネット検索の場合、まず各サイトからデータを収集して、その中から索引に載せる単語を選んで索引を作ります。索引のデータは下の図の右側のような表になっています。各単語と、それがどのサイトのどこにあったのかを記録しておく形です。 検索の時は、この索引データを調べます。例えば利用者が「理解」という言葉で検索したら、索引の「理解」のところを調べます。そうすると「サイトAの8文字目と18文字目、サイトGの……」と出現場所がわかるので、すぐに結果を返せます。 なお、この図では索引の単語の並び方が適当ですが、実際には本と同じように「あいうえお順」などに並べておいて、すぐに単語を見つけられるようにしてあります。 索引にない単語 この仕組みの場合、索引にある単

Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ

本記事では、「Chain-of-Abstraction (CoA) Reasoning」についてざっくり理解します。軽めの記事です。 株式会社ナレッジセンスでは普段の業務で、生成AIやRAGシステムを活用したサービスを開発しています。 この記事は何 この記事は、最近聞くようになった「Chain-of-Abstraction (CoA) Reasoning」の論文[1]について、日本語で簡単にまとめたものです。 今回も「そもそもRAGとは？」については、知っている前提で進みます。確認する場合は以下の記事もご参考下さい。 本題 ざっくりサマリー LLMが外部ツールを使って回答を生成するときの、回答精度を高める手法についての論文です。Metaの研究者らによって2024年1月に提案されました。「Chain-of-Abstraction (CoA)」という手法を使うメリットは、RAGに応用することで

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

1.プロンプトエンジニアリングとは 1-1.プロンプトとは 1-2.プロンプトの構成要素 2.プロンプトエンジニアリングの代表的な手法 2-1.Zero-shot prompting 2-2.Few-shot prompting 2-3.CoT（Chain-of-Thought） Prompting 2-4.Zero-shot CoT 2-5.Self-Consistency 2-6.Generate Knowledge Prompting 2-7.ReAct 2-8.Directional-Stimulus -Prompting 2-9.Multimodal CoT Prompting 3.敵対的プロンプトエンジニアリングの代表的な手法 3-1.Prompt-Injection 3-2.Prompt-Leaking 3-3.Jailbreak 3-4.Do Anything Now 3-

それでは以下、簡単なデモを含めながら個別に説明していきます。 1. ハイブリッドサーチ こちらは、性質の異なる複数の検索方式（例えばベクトル検索とキーワード検索）を組み合わせて検索精度を向上させる手法になります。 各検索方式単体の場合に比べ、性質の異なる検索方式を組み合わせ、ある種いいとこ取りをする事で、検索性能の向上が期待できます。 今回はBM25でのキーワードベースの類似度検索と通常のベクトル検索を組み合わせていきます。 BM25について簡単に説明しておくと、文脈や文章構造は完全に無視した上で、文書内の単語を全てバラバラに分割し、文書内の各単語の出現頻度と文書間におけるレア度を加味した特徴量を算出します。 つまり、特定の文書内の各単語の数をカウントしてヒストグラムを作れば、似たような文書には同じような単語がよく出るはずなので(同じようなヒストグラムの形になるので)、類似度が高くなる性質

凄まじい。猿渡先生本人が「最高傑作」と評する通り、この一冊に猿渡哲也作品の執念が詰まっている。 原作は、世界十大小説とも呼ばれる『白鯨』。原作は歴史的な背景の説明が多く現代の感覚では読みづらさも伴っているのですが、猿渡先生の大胆な構成と読者の誰もが認める漫画界トップクラスの画力により、原作の迫力ある動きのあるシーン、そして猿渡先生がほぼすべての作品に込めている宗教観や男の生きざまが遺憾なく発揮されている。 あらゆる場所で『タフ』を見かけるようになった昨今、まずは猿渡先生の名作短編たち……タフパラやロックアップなど（個人的にはGOKUSAIが好きですが人を選ぶか）の作品を今までお勧めしてきましたが、『エイハブ』は先生の集大成とも呼べる大傑作ですので、一冊なにか読み応えのある骨太な漫画を読みたい気分の際はぜひ。 ・コーポ・ア・コーポ

業務効率化に一役買ってくれると話題の「ChatGPT」。 今や「大学生の4人に1人が就活でChatGPTを使っている」といったデータもあり、リリース当初はあまり興味のなかった方でも、最近は「自分の仕事でうまく使えたりしないかな？」なんて考える機会も増えてきたのではないでしょうか？ ただ、ChatGPTが作業をどこまで効率化してくれるのかはまだまだ未知数です。時間を食う資料の作成やExcelの集計作業などをまるっとお任せできたらうれしいけど、思うようなアウトプットが得られず手間が増えたら、本末転倒な気もしますよね。 それに、ChatGPTの生成データをめぐっては、権利関係や内容の中立性・正確性などの側面で一部懸念の声も挙がっています。業務内での利用を禁止する企業や、自身のコンテンツを「学習・流用」されないよう自衛措置を講じるクリエイターも存在します。使用にあたってのルールも、完全に整っている

先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。