タグ

ブックマーク / postd.cc (95)

  • テストピラミッド万歳 | POSTD

    クイックサマリー:「テストピラミッド」は、自動テストをUI、サービス、ユニット単位に整理することで、開発に自動テストを組み込む方法を示すために作成されました。2012年に定義されて以降、このモデルは次第に使われなくなってきたように思いますが、当に廃れてしまったのでしょうか。この記事では、最新のテスト戦略を紹介するとともに、今日のソフトウェア開発におけるテストピラミッドの関連性を検討します。 筆者の同僚であるジャン・フィリップ・ピエトルチェクが、かつてコードを書く開発者の責任について、次のように述べました。 none「我々の仕事の成果を最終的に使用する人々は、(中略)我々がただ最善を尽くすだけでなく、実際に機能するものを作ることを期待しているのです。」 — ジャン・フィリップ・ピエトルチェク 彼の言葉は、私たちが書くコードをそれに依存する人々の観点からとらえている点で非常に印象に残りました

    テストピラミッド万歳 | POSTD
    efcl
    efcl 2024/03/02
    テストピラミッド、E2Eの量の問題
  • Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD

    はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSSTypeScript、Turborepo、ESLintReact Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記:ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ

    Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
    efcl
    efcl 2023/12/28
    Next.jsのPages Routerでのアプリケーションアーキテクチャについて。 Next.jsのディレクトリ構造、ツール、コーディングスタイルについてなど
  • Miško HeveryのQwik記事シリーズ | POSTD

    POSTDでは、DEV Communityで公開されているQwikシリーズ の翻訳記事を公開予定です。 翻訳記事の更新に合わせてこのページも更新されていきます。 シリーズ記事一覧 Qwikの紹介 – HTMLファーストのフレームワーク クロージャによる死(とQwikによる解決方法) HTMLを最初に、JavaScriptを最後に:Webを高速化する秘訣 Qwik:最適できめ細かい遅延読み込みを実現 モバイルサイトのGoogle PageSpeed Insightsスコアを100点にするには 既存のバンドラの手法は間違っている QwikとPartytownでJavaScriptを99%削減する方法 Qwikスターターの紹介 – 今すぐQwikを起動・実行してみよう

    Miško HeveryのQwik記事シリーズ | POSTD
    efcl
    efcl 2023/01/06
    Qwikシリーズの翻訳記事
  • 人材マネジメント🤯 | POSTD

    初めて会社を起業する人のほとんどは、集団をマネジメントする方法を学ぶ間に、創業当初の従業員を燃え尽き症候群にさせてしまうと思います。 筆者のアドバイスがそのようなケースを減らせるなら、ここに書いておく価値があるでしょう。 筆者は小規模なチームやスタートアップ企業のマネージャーのためにこの記事を書きました。 ほとんどのアドバイスは、大規模な企業のマネジメントには当てはまらないのではないかと思います。 なお、急成長している企業に入社する人への全般的なアドバイスについてはこちらをご覧ください。 筆者について 中・小規模のエンジニアリングチームを数チーム管理した経験あり On DeckのCTO CoinListの元エンジニアリング担当VP AngelListの元リモート責任者 Product Huntの元CTO それでは始めましょう。 マネージャーはすべての失敗に責任を負う 分かります……とても前

    人材マネジメント🤯 | POSTD
    efcl
    efcl 2022/10/15
    "よくある誤解は、燃え尽き症候群は働き過ぎが原因というものです。 実際の原因は、仕事をコントロールできない、自分が影響を与えられていないと感じることです"
  • モダンWebにおけるキャッシングのための新HTTP標準 | POSTD

    一般ユーザー向けの大規模なWebサイトや、モダンWeb上で動作するWebアプリケーションを運営する場合、CDNなどのキャッシングサービスによって静的コンテンツをキャッシュすることが極めて重要です。 しかしこうしたサービスは、非常に複雑で分かりにくいものです。 幸い、IETF(Internet Engineering Task Force)のHTTPワーキンググループがこの状況を改善すべく、HTTPの新標準策定に取り組んでいます。 最近、同ワーキンググループでは、キャッシングのデバッグとキャッシュ設定の管理を容易にすることを目的とした、HTTPヘッダに関する2つの新標準案の発表に向けて活発な動きがありました。 このことが何を意味し、どのように機能するのか、そしてWeb制作に携わる開発者全てがなぜ注目すべきなのかについて見ていきます。 新標準 この記事で取り上げる標準案は以下の2つです。 Ca

    モダンWebにおけるキャッシングのための新HTTP標準 | POSTD
    efcl
    efcl 2022/09/04
    Cache-Status、CDN-Cache-Controlについて
  • React Server Componentsの仕組み:詳細ガイド | POSTD

    React Server Components(RSC)は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの

    React Server Componentsの仕組み:詳細ガイド | POSTD
    efcl
    efcl 2022/07/28
    React Server Componenntの仕組み
  • フロントエンドのテストは皆のためのもの | POSTD

    テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種

    フロントエンドのテストは皆のためのもの | POSTD
    efcl
    efcl 2021/09/14
    Front-End Testing is For Everyoneの翻訳記事。 テストがチェックする範囲とチェックするツールについてまとめたもの。 ユニットテスト、結合テスト、E2Eテスト、アクセシビリティテスト、ビジュアルリグレッションテスト、パフ
  • パフォーマンス分析の方法論23選 | POSTD

    パフォーマンス分析のメソドロジーとは、システムやアプリケーションのパフォーマンスを分析する際に準拠できる手法です。メソドロジーを手がかりとして作業に着手できますし、根原因やその他の要因の発見に役立ちます。異なる種類の問題を解決するのには、それぞれに適したメソドロジーがあります。目的を達成するまでに何度か方法を変えて試してみるといいかもしれません。 メソドロジーを使わない分析は手探りの探索になり、ある問題に対する手がかりが見つかるまで(もしあればですが)ずっと場当たり的にメトリクスを分析することになってしまいます。 このサイトでは以下のメソドロジーについて詳しい資料を公開しています。 USE(Utilization Saturation and Errors)メソッド :リソースのボトルネックを見つける TSA(Thread State Analysis:スレッドステート分析)メソッド :

    パフォーマンス分析の方法論23選 | POSTD
    efcl
    efcl 2020/10/19
    パフォーマンス分析のアンチパターン、分析のパターン https://www.amazon.co.jp/dp/4873117909/
  • Amazon AWSでユーザ数1100万以上にスケーリングするためのビギナーズ・ガイド | POSTD

    あるシステムを、1人のユーザから1100万人以上にスケーリングするにはどのようにすれば良いのでしょうか。Amazonのウェブサービスソリューションアーキテクトである Joel Williams が AWS re: Invent 2015 Scaling Up to Your First 10 Million Users でスケーリング方法について素晴らしいプレゼンをしています。 AWS上級者のユーザには適さないプレゼンですが、AWS初心者やクラウド初心者、Amazonが次々と送り出す新機能の流れについていけていない人が始めるには素晴らしい内容だと思います。 おおよその見当は付いていると思いますが、このプレゼンはAmazonによって提供されているため、どの問題についても解決策として提案されているものは全てAmazonのサービスになります。amazonのプラットフォームの役割は、印象深く、分か

    Amazon AWSでユーザ数1100万以上にスケーリングするためのビギナーズ・ガイド | POSTD
    efcl
    efcl 2018/07/06
    ユーザー数ごとのAWSにおけるスケーリング手段について。 1000万あたりからDBの分割が始まる
  • Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD

    まず、このバトルに関わるには、JavaScriptとReduxの知識が必要です。知識がない人には、このブログ記事は向いていません(話についていけませんから)。残りの人は、一緒に難題を解決していきましょう。 Reduxには、副作用を取り扱うための所定の方法がありません。そう、これは 祝福であると同時に呪いでもあります。 最善策はこれだ、という結論がまだ出ていないので、かなりの数の選択肢が流布しています。SlackNetflixのような大きな会社がRxJSと Redux-Observable を選んだのに対して、Reactネイティブの開発者たちの間で人気が高いのは Redux Saga です。 うわべを取り繕った記事を書くつもりはなく、道理をわきまえるつもりもありません。私は、この対決を「戦い」に持ち込むつもりなのです。thunkで満足していて、好意的な意見を期待している人は、読まない方がい

    Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD
    efcl
    efcl 2018/03/17
    Rx vs. Redux saga
  • 超高速エンジンの内部:Quantum CSS(別名Stylo)- 前編 | POSTD

    Project Quantumのことをお聞きになったことがあるでしょう。これはFirefoxを高速化するために、Firefoxの中身を大幅に書き換えたものです。実験的なブラウザ、Servoから部分的に交換を実施し、エンジンの他の部分の著しい改善を図っています。 このプロジェクトは、飛行中のジェット機でのジェットエンジンの取り替えに例えられます。現場でコンポーネントごとに変更を実施するので、各コンポーネントの準備が整い次第、Firefoxで効果を確認することができます。 また、Servoから採用した最初の重要なコンポーネントは、Quantum CSSと呼ばれる新しいCSSエンジン(以前の別名はStylo)で、現在はNightly版でテストすることが可能です。(編注:Firefox 57からはデフォルトで有効化されています) about:config に行き、 layout.css.servo

    超高速エンジンの内部:Quantum CSS(別名Stylo)- 前編 | POSTD
    efcl
    efcl 2017/12/16
    Quantum CSSについての解説の翻訳
  • SQLトランザクション分離 実践ガイド | POSTD

    (注:2017/10/16、いただいたフィードバックを元に翻訳を修正いたしました。) (注:2017/10/11、いただいたフィードバックを元に翻訳を修正いたしました。) データベースのドキュメントで分離レベルを目にして、軽く不安を感じつつ、あまり考えないようにしたことはないでしょうか。トランザクションの日常の使用例できちんと分離について言及しているものはほとんどありません。多くはデータベースの初期設定の分離レベルを利用しており、後は運頼みです。しかし、来、理解しておくべき基的なトピックであり、いくらか時間を投入してこのガイドの内容を学習すれば、もっと快適に作業できるようになるでしょう。 私はこの記事の情報を学術論文、PostgreSQLドキュメンテーションから集めました。分離レベルの 何たる かだけでなく、適用の正確さを保持しつつ最大速度で使うにはいつ使うべきか、という疑問に答えるべ

    SQLトランザクション分離 実践ガイド | POSTD
    efcl
    efcl 2017/10/15
    データベースのトランザクション分離レベルについて。
  • SymSpell対BK木:100倍速い文字列のあいまい検索とスペルチェック | POSTD

    注釈:500,000単語収録の辞書内における1,000単語の検索時間 X:最大編集距離 Y:検索時間/ms 従来、スペル修正や文字列のあいまい検索には、 BK木 が適していると言われてきました。しかし、これは当でしょうか。 また、 スペル修正に関する私のブログ に寄せられたコメントには、BK木が、あいまい検索のためのデータ構造として優れていると言及されていました。 そのような経緯から、今回、BK木と他の選択肢のベンチマークを取って比較してみようと思い立ったわけです。 近似文字列検索アルゴリズム 近似文字列検索では、文字列リスト内の文字列を検索し、特定の 文字列メトリック に従って、それに近い文字列を返します。 文字列メトリックは多数あり、例えば レーベンシュタイン距離 、 Damerau-Levenshtein距離 、 ハミング距離 、 ジャロ・ウィンクラー距離 、 Strike a m

    SymSpell対BK木:100倍速い文字列のあいまい検索とスペルチェック | POSTD
    efcl
    efcl 2017/10/05
    文字列のあいまい検索やスペル修正のアルゴリズムについて
  • Webデベロッパのためのセキュリティ・チェックリスト | POSTD

    安全で堅牢なWebアプリケーションをクラウドで開発するのは 非常に困難 です。それを簡単だと思っているような人は、例えばとんでもない頭脳をお持ちというなら別ですが、遠からず痛い目を見ることになるでしょう。 もし MVP(Minimal Viable Product:必要最低限の機能を備えた製品) のコンセプトを鵜呑みにして、有益かつ安全な製品を1ヶ月で作成できると考えているようなら、プロトタイプを立ち上げる前に一度考え直した方がいいと思います。以下に挙げたチェックリストをご覧いただければ、セキュリティに関するクリティカルな問題の多くをスキップしていることが分かるはずです。あるいは少なくとも、潜在的なユーザに対しては 誠実 であるように心がけ、製品が完全ではないこと、そしてセキュリティが不十分な製品を提供していることを伝えるようにしてください。 このチェックリストはシンプルなもので、決して完

    Webデベロッパのためのセキュリティ・チェックリスト | POSTD
    efcl
    efcl 2017/06/25
    Same-Site Cookieとか書いてあるのか
  • どれだけ速く文字列からスペースを削除できるのか | POSTD

    時によってプログラマは文字列から不要な文字を取り除きたい場合があります。例えば、テキストの一部からすべての行の末尾文字を削除したいとします。 その時、全スペース(‘ ‘)や改行コード(‘\n’および‘\r’)を削除する問題を考えてみましょう。 効率的に実行するにはどのような方法がいいのでしょうか。 size_t despace(char * bytes, size_t howmany) { size_t pos = 0; for(size_t i = 0; i < howmany; i++) { char c = bytes[i]; if (c == '\r' || c == '\n' || c == ' ') { continue; } bytes[pos++] = c; } return pos; } 上記のコードはUTF-8でエンコードされた文字列で動作します。UTF-8がASCII

    どれだけ速く文字列からスペースを削除できるのか | POSTD
    efcl
    efcl 2017/02/23
    ベクトルでまとめて処理をする。 SIMD
  • 仮想DOMの内部の動き | POSTD

    PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM(VDOMあるいはVNode)は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考:これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReact

    仮想DOMの内部の動き | POSTD
    efcl
    efcl 2017/02/10
    The Inner Workings at Virtual DOMの翻訳記事
  • 部分文字列とRegExpの領域の冒険 | POSTD

    パート1:小さな部分文字列はでき”ない” 数週間前、Dart SDKに関して、 String.substring のパフォーマンスが非常に悪い というバグが報告されました。以下は、その問題と一緒に提出されたマイクロベンチマークの中心部分です。 // JavaScript version function test(s){ console.time("substring(js)"); while (s.length > 1) { s = s.substring(1); } console.timeEnd("substring(js)"); } // Dart version test(s) { final stopwatch = new Stopwatch()..start(); while (s.length > 1) { s = s.substring(1); } print("subs

    部分文字列とRegExpの領域の冒険 | POSTD
    efcl
    efcl 2017/02/03
    部分文字列とメモリ。 Vyacheslav Egorov
  • コードの半減期とテセウスの船 | POSTD

    プロジェクトが発展する際は、単純に新しいコードが古いコードの上に追加されているのでしょうか。もしくは、時間をかけて徐々に古いコードが新しいコードに置き換えられているのでしょうか。これを解明するために、手ごわい GitPython プロジェクトの助けを借りて、Gitプロジェクトを分析する 簡単なプログラム を構築してみました。履歴を年ごとに振り返り、 git blame を実行してみようと思ったのです(この処理を多少でも速くすることは簡単ではないと分かりました。しかし、ファイルのキャッシングを便宜的に含ませることや、変更された点を履歴から見つけること、 git diff を使って変更したファイルを無効にすることなどの詳細を、いつかお伝えします)。 頭がさえている時に、 テセウスの船 をダサくもじって、 “テセウスのGit” と名付けました。私は父親になって、ひどいダジャレを作れるようになった

    コードの半減期とテセウスの船 | POSTD
    efcl
    efcl 2016/12/27
    古いコードが新しいコードに置き換わるまでの期間をビジュアライズ https://github.com/erikbern/git-of-theseus
  • プログラミングスタックをEveはどのように統合するのか | POSTD

    この投稿では、エキサイティングで魅力的な新しいプログラミング言語、 Eve について紹介していきたいと思います。今回は6パートのシリーズのうち、パート1です。 1. プログラミングスタックの全体をEveはどのように統合するのか 2. When logic programming meets CQRS(ロジックプログラミングがCQRSに出会う時) 3. Throwing off our scope chains(スコープチェーンを取り除く) 4. Smalltalk and protein programming(Smalltalk言語とプロテインのプログラミング) 5. The rock-solid foundation for Eve’s big vision(Eveの壮大なるビジョンのための強固な基盤) 6. Why Eve will be perfect for realtime a

    プログラミングスタックをEveはどのように統合するのか | POSTD
    efcl
    efcl 2016/12/20
    プログラミング言語Eveについて
  • 英政府デジタルサービスのPaaSチームが採っている、公平な会議進行のためのアプローチ | POSTD

    議論が、自信がある人物や一番声の大きい人物によって支配されてしまう状況に誰もが陥ったことがあるはずです。 目立たない人物や新しいグループメンバは意見を述べることを躊躇してしまいます。そうでない人も、発言するタイミングを計るばかりに議論に集中できず、やっと話す機会ができたころには内容が進んでしまっている……といったことがあります。 誰もが他人の話を遮ったり、遮られたりします。 個人的な経験から思うに、人は「思いやりが無かったり権力欲が強いがために、会話を主導したり他人の発言を遮ったりしてしまう」というわけではありません。熱心だからこそ、結果的にそのような行動を取ってしまうのです。さらには、情熱的な人が多く集まってしまうと、どのような組織においても、ミーティングが混乱したり、ポイントがずれたり、思うように進まなかったりするリスクはあります。 Stephen Hawking曰く、「物静かな人ほど

    英政府デジタルサービスのPaaSチームが採っている、公平な会議進行のためのアプローチ | POSTD
    efcl
    efcl 2016/12/06
    円滑なコミュニケーションの補助ツールとしての手信号