2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR

こんにちは、教育系のスタートアップでCTOをしていたヒガシ(@suica_versa)と申します。 表題の通り、私は約6年前から教育機関向けのシステム開発を行うスタートアップでCTOとして働いていましたが、7/10付けで破産開始決定が申し渡されました。 破産に伴い、取引先をはじめ関係各所には大変なご迷惑をおかけしていることを経営メンバーの一人として、謝罪いたします。 このnoteでは、なぜ破産に至ったのか？破産の手続きってどういう内容？破産するとどうなる？という、スタートアップではなかなか語られない点について同じ轍を踏まないよう共有いたします。 ただし、まだ本件については進行中ですので、ある程度内容は省いている点をご容赦ください。 【免責】 当記事は私が所属していたDoorkel社の正式な文章ではございません。内容については時系列含め不正確なものも多々ございますので、あくまで1社員の視点か

初めて使ったBIツールはLooker Studioのid:syou6162です。これまでTableau / Looker(≠ Looker Studio) / Metabase / Redash / Connected Sheetsなど色々なBIツールを触ってきましたが、不満は色々ありつつも個人的に一番しっくりきて愛着があるのはLooker Studioです。このエントリでは、その魅力と便利な使い方や注意点について書きます。例によって、社内勉強会向けの内容を外向けに公開しているため、内容の網羅性などは特に担保していないことにご注意ください。 Looker Studioの魅力 利用のハードルが限りなく低い & Google Workspaceとの連携が便利 複雑過ぎることができないので、諦めが付けやすい ちゃんとBIツールになっている Looker Studioの便利な使い方 多様なデータソ

背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな

はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます

こんにちは。GMO NIKKOのH.Tと申します。 GoogleからNotebookLMというサービスが出ましたので触ってみました。 NotebookLMの使い方 NotebookLM は簡単にはじめることができます。 NotebookLM にアクセスし、新しいノートブックを作成します。 そして自分が作成したいプロジェクトのための参照資料をアップロードすると、読み上げやブリーフィングシートの作成、FAQ、アイデアの整理などが可能になります。また、NotebookLM に質問して、すべてのソースの概要 ( 学習ガイドや目次など ) を自動的に作成することもできます。 Googleのブログより やってみた 早速使ってみました。 まず、上図のTry NotebookLMをクリックしますと以下のような画面が開きます。 「新しいノートブック」をクリックします。 あらかじめ青空文庫より「吾輩は猫である

今さらながらGoogleの「NotebookLM」を触ったら、インターネットサーフィンが普通にそのまま"仕事"になった話 6月頭くらい？　にGoogleがリリースして話題になっていた、自分専用のRAGが簡単に組めるLLMツール「NotebookLM」ですが、そのうち触ろうと思いつつも、「またRAGか」「どうせRAGでしょ？　知ってます」みたいな気持ちでいたら腰が重くなってしまい、いつのまにか一ヶ月くらい経ってしまっていました。 そして今日、たまたまちょっと時間が空いたので触ってみたんですが、想像していたよりもずっと楽しくてすごかったので書き残したく思った次第です。ちなみにこれ↓ NotebookLMってファイルとかURLとかかなりの量放り込めて、放り込まれただけ参照できる(しかもかなり精度高い)っていうツールなんですが、これの何がすごいというと、インターネットサーフィンをしながらおもしろい

はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after

HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。 この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。 TL;DR 暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。 解説 Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構

はじめに どもども、インフラ案件で奮闘中の井上弥風（いのうえみふう）です。 現在プロジェクトでELB（Elastic Load Balancing）を使用しており、その内部機能を完全に理解したいと思い、この記事を書きました。 この記事について この記事の最終的な目標は、「ELBとは何か？」を深く理解し、それを自信を持って説明できるレベルになることです。 しかし、ELBを完全に理解するためには、まず基本的なロードバランサーの概念を押さえる必要がありました。 そこで、この記事ではELBの根底にあるロードバランサーとは何かという点に焦点を当てていきます。 ELBの詳細については、この記事の後に公開予定の「ELBってなんやねん」という記事で詳しく取り上げます。 ELBに興味のある方は、ぜひそちらもご覧ください。 記事のゴール この記事を通じて、ロードバランサーがどのようにしてトラフィックの負荷分散

この時はそれぞれ単独のプロンプトで小説家と編集者を演じさせましたが、今回はもうすこしシステマチックに、段階を踏んで小説を生成させてみます。 プロンプトの検討等にはkgmkm氏のリポジトリや記事を参考にさせていただきました。この場を借りてお礼申し上げます。 仕組みを相談するのにClaude (3.5 Sonnet)とやり取りをしていましたので、この記事の草稿も書いてもらいました。所々、なんとなく冗長だったり文体が違ったりしますが、面倒なのでそのままにしてあります（すみません）。 生成スクリプト生成スクリプトとプロンプト定義はgistに置きました。 https://gist.github.com/kohya-ss/68d41a9720bfbdfd87869ec970142f4b 概要近年、大規模言語モデル（LLM）の発展により、AIによる文章生成の可能性が大きく広がっています。今回はローカル環

はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。

はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が

大吉祥寺.pm https://kichijojipm.connpass.com/event/314917/ https://blog.utgw.net/entry/2024/07/15/135648

マンガ家。2003年少女誌『LaLa』（白泉社）でデビュー。著書に『片桐くん家に猫がいる』『子育てビフォーアフター』（新潮社）、『鬼を飼う』などがある。『ヤングキングアワーズ』（少年画報社）にて『横浜黄昏咄咄怪事』を連載中。メイクは好きだが、キラキラ美容部員さんのいるコスメカウンターは怖かった。アラフォーになり、「顔面迷子」状態の日々。 X（旧Twitter）：https://twitter.com/keitoyo 続メイクがなんとなく変なので友達の美容部員にコツを全部聞いてみた 「結局、今のメイクでいいのかわからない」「メイクは楽しくなってきたけど、あれ、またワンパターンになってきたかも……」顔面迷子だったマンガ家が、再び友達の美容部員に聞く！「基礎を学んだら次は応用」ではなく「基礎、そして基礎以前に戻れる」一冊。 バックナンバー一覧 現役美容部員のBAパンダさんが、幼なじみのマンガ家吉

2024/07/13 大吉祥寺.pm 20分レギュラートーク 登壇資料

のんのん @nonnon__nonai PaintsUndoが手描き偽装に使われる懸念はあるけど、今の段階でそれだけの精度があるか否かでは評価が異なるし、正当な使い方があるか否かでも評価はかなり変わってくる。 だから、いずれも検討せずに「手描き偽装に使われる」という懸念のみを拡散するのは、必要以上に不安を煽る行為だと思う。 のんのん @nonnon__nonai PaintsUndoが手描き偽装に使われる懸念はあるけど、今の段階でそれだけの精度があるか否かでは評価が異なるし、正当な使い方があるか否かでも評価はかなり変わってくる。 だから、いずれも検討せずに「手描き偽装に使われる」という懸念のみを拡散するのは、必要以上に不安を煽る行為だと思う。 ぶどう弐 @bdow2d35 普通の消費者はイラストがAIか手描きかなんてそこまで気にしないし、普通の生成AIユーザーはわざわざタイムラプス偽造して

iPad mini（第6世代）用にApple Pencilが必要になった。筆者は悩んだ末に、サードパーティー製のいわゆる「互換ペン」を購入した。Apple Pencilのように使える製品である。 以前にも同様の製品を何種類か試したことがあるが、明らかに性能が良くなっていて驚いた。いくつかのこだわりを捨てれば、Apple Pencilの代用品に十分なると思う。 そこで今回は、互換ペンがどこまでApple Pencilに迫っているか、レビューを交えて紹介しよう。 Apple Pencilを高いと思ってしまった iPad mini（第6世代）に対応するApple Pencil（第2世代）の直販価格は2万1800円（税込み、以下同）である。今まで周囲には「性能を考えればApple Pencilは全然高くないよ」と言っていた。にもかかわらず、今回は高いと思ってしまった。これには価格以外の要因がある。

ページ閲覧 AutoPagerize chromewebstore.google.com ページネーションされたウェブページを自動で読み込み続けます。無かったら違和感あるレベルで日常になっています。 daily.dev chromewebstore.google.com 開発者向けニュースを空タブに表示します。 タブを開くときに自然に視界に入るのに加えて、検索で「過去話題になったもの」から探したりします（はてなブックマークやHacker Newsも似た用途で使います） ホームタブとは別です。ホームはperplexity.aiにしてます。 Google Scholar PDF Reader chromewebstore.google.com 標準のPDFビュワーを科学論文を読みやすく強化します。参考文献の追跡や引用、ジャンプ機能を提供します。ついでに官庁資料やクリプト系のホワイトペーパーなど

海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 「jQuery」を悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規の「jQuery」へ今回のトロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザ