サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは、アプリケーションエンジニアの鈴木です。 先日、私が担当しているtebiki現場分析をReact v18 から v19 にアップグレードしました。 この対応は半年以上前から計画されていたものの、私自身初めての経験が多く、なかなか着手できずにいました。 今回ようやくリリースまでこぎつけたので、特に大変だったポイントや、やっておいて良かったことまとめます。 「依存ライブラリの対応状況の調査」が大変だったReact 側の変更点はアップグレードガイドを読めば理解できます。 一方で「React に依存しているライブラリがReact 19 をサポートしているのか」をどう調べればよいのかがわからず、ここが最初の大きな壁でした。 主要ライブラリのメジャーアップデート対応は初めてだったため、ネット検索・issue 調査・deep research など、使える手段を総動員して調べる日々。それ
PR TIMESのCDNをCloudFrontからFastlyに移行しました こんにちは、インフラチームテックリードの櫻井です。 今回はプレスリリース配信サービスの prtimes.jp で使用しているCDNをCloudFrontからFastlyに移行したことについ... なお該当のAPI以外へのリクエストは正常に処理できていたため、PR TIMESへのリクエストが一律でブロックされている状況ではなかったと考えられます。 根本原因の仮説と検証 ここまでの調査でわかったことは以下です。 該当のお客様から行われたメディアリスト保存APIへのAJAXリクエストは、501エラーとしてNew Relicに記録されている。 該当のお客様から行われたメディアリスト保存APIへのAJAXリクエストは、PR TIMESシステムに到達していない。 該当のお客様から行われた他のAPIへのリクエストは、正常にレス
Next.js 16からの/_next/mcpエンドポイントにより、AIエージェントは 実行中のアプリケーションの内部状態にリアルタイムでアクセスできる ようになるからです。 HowIt Works（仕組みの解説） 以下仕組みの解説ですが、少し細かい内容になるので、先に検証結果をみたい方は飛ばして先に検証セクションからご覧ください。Next.js DevTools MCPがどのように動作しているのか、アーキテクチャを理解しておくと、より効果的に活用できます。 公式ドキュメントによると This package provides a bridge MCP server that connects your coding agent toNext.js development tools: Coding Agent ↓ next-devtools-mcp (this package) ↓
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 -JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
はじめに はじめまして、テックドクターでバックエンドエンジニアをしている筧と申します。 最近、弊社ではAPI の品質を担保するために「API シナリオテスト」をプロダクトに導入しました。今回は、このAPI シナリオテストのツールであるPostman(+Newman)、Tavern そして runn を比較し、最終的に runn を選んだ理由をご紹介します。API シナリオテストとは？API シナリオテストとはなんでしょうか？ 開発におけるテストといえば、ユニットテストや結合テスト、API テストや E2E テストなどをよく耳にします。しかしAPI シナリオテストという言葉はあまり聞き馴染みがないという方も多いかもしれません。API シナリオテストはAPI テストの一種で、複数のAPI を連鎖的に呼び出して実行するテストです。以下の特徴を持っています。 複数のAPI を順序
はじめに こんにちは、@Sicut_studyです。Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
今や、AIを活用してソフトウェア開発すること自体は一般的になり、一種のブームと化している。 しかし、Web上で見かけるのはワンショットでテトリスを作る程度の小規模なプロジェクトの話がほとんどで、驚けるものの、正直あまり実用性は無いように感じる。 俺たちが本当に知りたいのはテトリスの作り方じゃねえ！現実の中規模以上のシステム開発で、いかに楽に良いものを作れるかだろ！ ということで、まずは弊社から現時点のノウハウを全公開しようと思う。 弊社ではCursorを1年以上活用（サービスがGAになったタイミングから全社員で利用）しており、一定のノウハウを蓄積してきている自負がある。ただ、あくまで一例ではあるので、ぜひみなさんの現場での活用事例も共有してほしい！ 免責事項AIエディタでの開発は、LLMとAIエディタの進化に伴い、常に変化している。 そのため、この記事で述べる方法論は、現時点での、弊社での
はじめに なあジョージさんよ……あんた、いつもこう言ってたよな？ 「便利さとシンプルさ、それがユーザーも開発者も幸せにする秘訣だ」ってよ。 あたしゃな、その言葉に乗っかっちまった。ユーザーのため？ 開発を効率化するため？ そりゃあ立派なもんだ。でもな、それが「命取り」になることがあるんだぜ。 シンプルに作ったはずのサービスが、悪意ある奴らに好き勝手利用されて、時には「あたしの知らなかった地獄」を見せてくれる。越えたらいけない一線がある。そんな話を、今日はしようじゃねえか。 さあ、これがあたしらの舞台だ。セキュリティの教科書には載らない、バグバウンティでも指摘されない、ニュースにもならない、「 現場のWebサービスぶっ壊れ地獄 」 ……教えてやりますぜ！！ 1. サインアップし放題からのクレカ決済し放題地獄 この地獄、知ってやがるかい？ 聞いてくれよ。ユーザーを簡単にサインアップさせる……
こんにちは、株式会社Berryの浅沼です。 この記事を書いている数週間前くらいから話題のClineを会社で導入し、開発に利用しています。最初はコードの自動生成から試していたのですが、.clinerulesを使ってプロジェクトごとのカスタム設定ができることを知り、どんどん活用の幅を広げていきました。 特に大きかったのが、プロジェクト内のコード構造・コーディングルールの設定に加えて、コミットメッセージやプルリクエストのタイトル・サマリーを生成するルールを追加したことです。これによって、「コードを書く→コミットメッセージを考える→プルリクを書く」という一連の作業がスムーズになり、全体の開発効率が格段に上がりました。 この記事では、実際の.clinerulesの内容も含めて、どのようにルールを作り、育て、活用しているのかを紹介します。特に、コードの自動生成以外の使い方にも触れますので、すでにCli
この記事はNuco Advent Calendar 2024の12日目の記事です。 はじめにエンジニアとして、開発を効率化しながらクオリティの高い成果物を生み出すには、優れたツールやリソースを活用することが欠かせません。 苦労して自分で作ったものの、実は便利なツールが既にあって、車輪の再発明をしてしまっていた、、ということも日常茶飯事です。 しかし、インターネット上には無数の選択肢があり、「どのサイトを使えばいいのか迷ってしまう」という声もよく聞かれます。本記事では、そんなエンジニアの方々のために、日常的な開発やデザイン業務で役立つ便利なサイトを16個厳選しました。UIデザインの参考になるサイトから、日々の業務を効率化するツールまで、多岐にわたるリソースをご紹介します。これらを活用することで、業務のスピードアップだけでなく、新たなインスピレーションを得るきっかけになれば幸いです。 1
はじめに こんにちは、ソーシャルベッティング事業本部海外ベッティング事業部の山崎です。本記事では、EffectiveGoやGoogle のスタイルガイド、Code Review Commentsといった公式資料、Future Architectの記事などを参考に、Go を初めて触る開発者を対象にした汎用的なレビューコメントの 20 選を紹介します。 大きく以下の４つのセクションに分けました 言語仕様に関わる内容 標準パッケージの使い方 エラーの扱い方 単体テストLinter の活用について 可能な限りlint で自動化して人の手が加わる前に静的解析でできればベターです。 特にこの記事で紹介するような汎用的なコメントについてはいくつか反映できるlint もあると認知しております。 そのような設定のlint config サンプルをまとめようとも思いましたが、実際に運用まで至って
アジャイル型でアプリ開発を進めたところ、完成に至らなかったことについて、ベンダの不完全履行、プロジェクトマネジメント義務違反等が主張されたが、いずれも否定された事例。 事案の概要 eスポーツ事業の企画・運営等を行う原告（Ｘ）は、ゲーマー向けソーシャルアプリの開発を構想し、開発ベンダである被告（Ｙ）との間で、平成28年8月18日に、ゲームに参加する人をマッチングし、参加者同士がコミュニティを形成するソーシャルメディア機能を有するソフトウェア（本件ソフトウェア）を開発する契約（本件契約）を締結した。対価の額合計は、2450万円。その支払は1000万円、1000万円、450万円の3回にわけて行われることとされ、最後の450万円は、納品物を納入後に支払うこととなっていた。本件契約の締結前には、Ｘは、検収に合格しなかったら、支払済みの代金を返金する条項を設けることを求めたが、Ｙは「返金を想定してお
便利ツール 私たちは日々の開発の中で様々な便利ツールを使います。 その中でもBurpは多くの機能を持ち、エンジニアにとってかかせないツールとなっています。 今回の記事ではフロントエンド開発においてBurpがどのように役立つかを紹介します。 Burpとは BurpはPortSwiggerにより提供されているツールで、Professional、Enterprise Editionなどの種類があります。中でもCommunity Editionは無料で提供されており、誰でも公式サイトからダウンロードすることができます。 では早速Burpの使い方を紹介していきます。 Proxy ProxyはBurpを使う上で最もベーシックな機能になります。 準備 Burpを立ち上げ、タブからProxyを選択 Open browserをクリックし、ブラウザを立ち上げる 解析したいページを開く 上記のようにBurpで立
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめにエンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 要件定義関連の記事も投稿してます。時間あればぜひ読んでみてください！ 今回は「機能要件」に関する内容について投稿します。 機能要件とは ※引用：IPA（独立行政法人 情報処理推進機構）図1 機能／非機能要求の相違点と課題 機能要件は、「必ず搭載すべき機能」 を指します。新規開発であっても既存のリプレイスであっても顧客としては業務内容に直結しているため、イメージしやすい
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数であることを仮定しています。Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策（あくまでも緩和） SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるようにDomain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がる
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。Reactベストプラクティス:react-hooks/exhaustive-de
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
(๑╹◡╹๑) @tsuchie88 みんなの銀行は、アクセンチュアがシステム構築しただけじゃなくて、GCPで稼働するCloudSQLを中核にK8sでコンテナ化されたアプリケーション群を東西リージョンで両現用化したかなり画期的なシステム構成で面白いんだけど、サービスもカードレスでスマホのみ、サブスクモデルと尖りすぎてるんだよな pic.twitter.com/4xMikwGQwf 2024-05-30 21:49:00 (๑╹◡╹๑) @tsuchie88 アクセンチュアって、海外では勘定系パッケージを販売してるし、Citibankのフロントエンドシステムとか個別構築も手掛けてたりして、何気に金融系システムベンダーとしての存在感があるんだけど、日本ではあんま強くなかっただけにMAINRIはスクラッチで日本で投入したライト勘定系で面白いんだが 2024-05-30 21:54:08
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
