Webセキュリティのあるきかた2024/10/5 YAPC::Hakodate 2024
Web標準のバックエンドアプリのテスト
ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby
TaskChute Cloud | 時間の使い方が変わるツール
時間の使い方を徹底的に変える、タスク管理ツール 次は何をするべきか？今日のタスクが全部終わるのは何時なのか？ すべてTaskChute Cloudにお任せください。 重要なタスクに没頭できる環境を作り上げよう。 タスクを並べ、見積もり時間を入れ、実績時間を記録する。 すべてのタスクを時間軸にのせるTaskChuteは、他のどんなタスク管理術よりも現実的。 今日の残業時間はどれくらいなのか、リアルタイムに把握できます。 PCでも、スマホでも。最強のタスク管理ツール、TaskChuteのweb版。 Web上で動くTaskChute Cloudは、デバイスを問わずお使いいただけます。タスクシュート時間術の生みの親であるシゴタノ！大橋さんに監修いただきました。Cloudならではの機能も多数ご用意しています。 Cloudオリジナル機能：ルーチンマスター ルーチンタスクを完璧に管理。 私たちは、生活の
「サードパーティークッキーの廃止の撤回」ってどういうこと？ | IIJ Engineers Blog
このように、Cookie自体はいきなり誰かの個人情報・プライバシーに触れる仕組みではありません。あくまでアクセスを識別するための技術です。また、ECサイトやSNSのように、利用者を識別して動作しなければならないWebサイトではCookieはかならず必要になります。 サードパーティークッキーって？ 今回話題になっているのは、「サードパーティークッキー (3rd Party Cookie)」です。これもCookieの一種なのですが、ここまで出てきたものと少し扱いが異なります。それは、Cookieが複数のWebサイトをまたがって利用されるという点です。 サードパーティーCookieの説明のために、A社のWebサイト、B社のWebサイトという、無関係な二つのWebサイトがある事にしましょう。そして、ここにP社のWebサイトを追加します。P社のWebサイトと書きましたが、ここで想定しているのは、A社
SSR, CSR, SSG, PPR の整理
PPR の登場でだいたい登場人物が出揃ったかな、というタイミングのため、一度まとめる。 左が古いもの、右が新しいもので並べている。 これらの目的 いたずらに登場人物を増やしているわけではなく、解決したい課題に対する解法としてこれらがある。というわけで、そもそもこれらが出てきた目的に立ち戻って考えてみる。 と言っても特に難しいことはなく、すべてユーザーからのリクエストを起点としてできるだけ速くユーザーが画面を操作できるようにするためのものだ。特に最近出てきたものほどその傾向が強い。 速度にこだわる理由は、コンバージョンや売上の減少を回避するためが大きいだろうか。ユーザーが短い時間で目的を達成できるのであればそれに越したことはないし、ともすればロイヤルティも向上する。 待ち時間は少ないほうが良いのか？ ここではどういった状況であっても待ち時間は少ないほうが喜ばしいという推測に立っている。が、す
Web サービスをフロントもバックも TypeScript で作る時の構成例
せっかくなのでフロントもバックも TypeScript を使おう、ということで、アレコレ考えて作った構成を共有します。何かの参考になれば幸いです。 下記の Web サービスを開発するときに使いました。 システム構成 ランタイム：Bun フレームワーク： Express ORM：Drizzle ORM インフラ：Docker 私的にはバックエンド中心で処理・出力し、そのうえでフロントエンドを使うのが好きです。 ディレクトリ・ファイル構成の例 あまり深くディレクトリを掘りたくなかったので、ルートに散在しています。 ├── assets ：ビルドされたフロントエンドのファイルが入る ├── constants ：定数関係 │ └── index.ts ├── controllers ；コントローラー │ ├── _Controller.ts：ルート(/)のコントローラー │ └──
AWSアンチパターン戦記
「君子危うきに近寄らず」という言葉は、賢明な人は危険を避けるという意味を持ちます。 アンチパターンを知り、それを回避するのは第一歩 準備を怠ると動いてるシステムがアンチパターンとなる。 準備とは、データを集め、テストを繰り返すことから。 新しいことへの果敢なチャレンジをわすれずに。ときには、AW…
Server-Sent Events を複数パターンで実装して理解を試みる
Server-Sent Events (SSE) 目新しい技術というわけではありませんが、最近 Server-Sent Events (SSE) について言及する記事をよく見かけます。 何番煎じかはわかりませんが、個人的に興味があることと、正直触ってみたことがなかったので、コードを書きつつ調べてみました。 ※本記事で登場するサンプルコードは次のリポジトリで公開しています。 SSE とは SSE 自体を解説する記事は無数に存在するため詳細な説明は割愛しますが、簡単に言うと、サーバーからクライアントへ一方向の Push 通信を行うための仕組みです。 MDN にもページが存在するため、参考になります。 独自プロトコルを必要とせず、HTTP/1.1 でも動作するのも特徴です。 SSE の歴史 wikipedia に SSE に関するページが存在し、次のような記述があります。 SSE メカニズムは、
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門ガイドは、 イスラエルのデベロッパー Tali Garsiel 氏による多数の研究の結果です。1 ～ 2、3 ブラウザの内部構造に関する公開データをすべて確認し、 あまり時間を費やすことはありません。彼女は次のように書いています。 ウェブ デベロッパーとしてブラウザの操作の仕組みを学ぶ より適切な意思決定を行い、開発の背後にある正当性を理解するのに役立つ ベスト プラクティスをご覧ください。これはかなり長いドキュメントですが、Google に 時間をかけて調査を進めていきます。できてよかったね。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは最も広く使用されているソフトウェアです。この入門編では 舞台裏で働きます「google.com」と入力するとどうなるかを確認し
Playwright を使用したエンドツーエンド テストの概要
エンドツーエンド テストの概要:Playwright。 Playwright は、Microsoft がオープンソースとして開発したエンド ツー エンド テスト用フレームワークで、モダンな Web アプリのテストに使用します。 この 6 部構成のシリーズでは、インストールから、テストの実行、記述、デバッグまで、関連するすべてを取り上げます。 Playwright を使うと、モダンな Web アプリに信頼性の高いエンドツーエンド テストを実行できます エンドツーエンド テストの概要:Playwright。 Playwright は、Microsoft がオープンソースとして開発したエンド ツー エンド テスト用フレームワークで、モダンな Web アプリのテストに使用します。 この 6 部構成のシリーズでは、インストールから、テストの実行、記述、デバッグまで、関連するすべてを取り上げます。 P
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
Webアプリケーションのパフォーマンス・チューニングの勘所 / web tuningperformance
# 参考資料 - https://speakerdeck.com/hanhan1978/purohuairawoshi-tutaphpapurikesiyongai-shan-falsekan-suo - https://speakerdeck.com/hanhan1978/web-applicat…
ABテストの結果よりも大事なたった一つのこと - Uzabase for Engineers
こんにちは。NewsPicks App Reader Experience Unit でエンジニアしている青木です。 NewsPicks では日々のサービス改善において AB テストを数多く実施しています。 施策毎に AB テストを柔軟に実施できるのは過去紹介した AB テスト基盤があってこそです。 https://tech.uzabase.com/entry/2022/12/25/183334 App Reader Experience Unit（以下 ARX）でも上記の AB テスト基盤を使ってモバイルアプリの改善を行なっています。 今回は ARX で AB テストを行う際に特に大事にしていることについてお話ししていきます。 ABテストの結果よりも大事なたった一つのこと 目的 ~ AB テストの結果が良かったから施策を適用するわけではない ~ 仮説 ~ 事前調査に基づく観点での仮説検証
普段使わないけど便利なWeb API 8選
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
続・HTTPキャッシュを使いこなして、Webアプリを快適に(1) | IIJ Engineers Blog
ディレクティブは、,(カンマ)で区切って、複数指定が可能です。 例えば、max-age=3600とmust-revalidateの2つのディレクティブを指定するときは、以下のように書きます。(ディレクティブの個々の意味は、後ほど説明するので、まだ解らなくて大丈夫です。) ただし、複数指定する場合は、矛盾しないように指定する必要があります。(矛盾する組み合わせの動作は未定義なので) そして、互換性のため、ブラウザやプロキシが未対応のディレクティブは、無視する決まりがあります。この動作のおかげで、古いブラウザは新しいディレクティブを無視できるので、ブラウザがおかしくなることは防げます。 RFCやMDNにも、この説明の例として、互換性のため、類似効果のディレクティブを並記する例が書かれていたりします。 ですが、この方法で、古いシステムとの互換性を考え出すとどんどん複雑になります。 現実的に考えて
アーキテクトがチェックすべきオープンソースのWebサービス一覧
実装の参考の当たり 前口上: オープンソースの実装を読もう 普段Web開発をしているとこの書き方は普通か、実装の方向性はよさそうか不安になることがあります。そういった際、同じリポジトリの既存実装や会社の他のリポジトリ、技術ブログや本、過去の経験、他のメンバーの意見などを参考にしつつ当たりをつけるわけですが、リファレンスが増えるに越したことはないです。 有名な言語、フレームワークではオープンソースのWebサービスがGitHub、GitLab上などにあがっていることがあり、参考になります。 それぞれライセンスがあり、とりわけGPL汚染などは要注意ですが、収集した一覧が溜まってきたのでまとめておきます。ある程度有名なものメインでスクリプト言語+Go。 Ruby Ruby on Railsは有名なので採用しているWebサービスが多数あります。 Redmine イシュー、プロジェクト管理ソフトのRe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remixを通じてWebを学ぶ一覧
