タグ

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

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

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

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

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

    Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
    murasuke
    murasuke 2023/12/26
  • フロントエンドにおいてModel-View-Controllerは死んだのか? | POSTD

    多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller(MVC)に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript( jQuery が書かれたプログラミング言語)が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ

    フロントエンドにおいてModel-View-Controllerは死んだのか? | POSTD
  • 私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD

    <script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚

    私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
  • 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
  • JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD

    筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS(Ruby-to-JavaScript)、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6

    JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
    murasuke
    murasuke 2021/11/15
  • POSTDをGatsby.jsベースに変更しました | POSTD

    POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.(現新規事業開発部)で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳!」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ

    POSTDをGatsby.jsベースに変更しました | POSTD
    murasuke
    murasuke 2021/04/29
    いい記事がおおかったから、引き続き楽しみ。
  • 分岐予測の簡単な歴史 - Part 1 | POSTD

    ※これは、 RC(The Recurse Center:プログラマ教育施設) によって組織された講演シリーズである”localhost”を始動するために、Two Sigma(ツーシグマ)での2017年8月22日の分岐予測に関する講演の原稿を仮に書き起こしたものです。 コードで分岐を使われている方は、どれくらいいらっしゃいますか? ifステートメントやパターンマッチングを使われているという方、よろしければ手を挙げてください。 ほとんどの聴衆が手を挙げる 次の質問に関しては手を挙げてもらうつもりはありませんが、もしそうお願いした場合、恐らく手を挙げる人の数は少なくなるのではないでしょうか。その質問とは、「分岐を実行する際、CPUが何をして、そのパフォーマンスは何を意味しているのかを十分に理解しているか」、そして「分岐予測に関する最新の論文を理解できるか」というものです。 この講演の目的は、CP

    分岐予測の簡単な歴史 - Part 1 | POSTD
    murasuke
    murasuke 2018/09/27
  • V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス | POSTD

    数週間前に、JavaScriptが実際どのように動いているかを掘り下げて紹介する記事の連載を始めました。JavaScriptがどのような機能で構成されていてそれらがどのように組み合わさって機能していくのかを知ることによって、さらに良いコードやアプリケーションを作ることができるのではないかと思ったからです。 連載の1回目では 、エンジンやランタイム、コールスタックについての概要を紹介しました。2回目となる今回は、Google V8 JavaScriptエンジンについて細かく説明していきます。また、より良いJavaScriptコードの書き方、すなわち私たちの開発チーム SessionStack がプロダクトを開発する際に意識しているベストプラクティスについても併せて紹介します。 概要 JavaScriptエンジン とはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

    V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス | POSTD
    murasuke
    murasuke 2017/10/14
  • SQLトランザクション分離 実践ガイド | POSTD

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

    SQLトランザクション分離 実践ガイド | POSTD
    murasuke
    murasuke 2017/10/14
  • H.264の秘密 | POSTD

    (編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) (2016/12/11、いただきましたフィードバックをもとに翻訳を修正いたしました。) H.264は、動画圧縮コーデックの標準規格です。ネット上の動画、Blu-ray、スマホ、セキュリティカメラ、ドローンなどなど、今やあらゆるところでH.264が使われています。 H.264は注目すべき技術のひとつです。たったひとつの目標、つまりフルモーションビデオの送信に要するネットワーク帯域を削減することを目指した30年以上の努力の結晶なのです。 技術的な面でも、H.264はとても興味深い規格です。この記事では、その一部について概要レベルでの知識を得られることでしょう。あまり複雑だと感じさせないようにするつもりです。今回おはなしする概念の多くは動画圧縮全般にあてはまるものであり、H.264に限ったものではありません

    H.264の秘密 | POSTD
    murasuke
    murasuke 2016/12/09
  • Essential Electron : Electronの簡潔・平易な概要 | POSTD

    Electronとは? Electronは JavaScriptHTMLCSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMacWindowsLinuxで動かせます。 次は: なぜ重要? 定義: JavaScriptHTMLCSS はWeb用の言語で、Webサイトの基的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos (Electronで何ができるかをみてください) なぜ重要? 一般に、デスクトップアプリケーションは各オペレ

    Essential Electron : Electronの簡潔・平易な概要 | POSTD
  • 「有害なgoto」「時期尚早な最適化」、そしてプログラミングにまつわる神話は諸悪の根源である | POSTD

    以下のプレゼンテーションは、私がPapers We Love Madridの初会議で発表したものです。講演のテーマは、Donald Knuthの論文「Structured Programming with Go To Statements」(goto文を用いた構造化プログラミング)でした。 我々が人間として抱える最大の問題は、信念と現実を混同することである。 – Alan Kay それ(goto)を禁止するか、それとも使わない方向へ教育するかが問題だ。 – Donald Knuth この記事では、神話についてお話ししたいと思います。Googleで 神話(myth) の定義を検索してみると「広く信じられているが誤った信念や観念」とあり、dictionary.comを見ると「立証されていないか誤った共通的信念であり、社会制度を正当化するために用いられる」と説明されています。ここで問いたいのは、

    「有害なgoto」「時期尚早な最適化」、そしてプログラミングにまつわる神話は諸悪の根源である | POSTD
  • The Little Printf : 「我々はなぜプログラミングをするのか?」を追う寓話 | POSTD

    この文章は、2015年10月9日にシカゴで開かれたカンファレンス、 CityCode でのプレゼンテーションを書き起こしたものです。同じ内容を ビデオ と印刷向け PDF文書 でも公開しています。 — Chapter 1 私は、コンピューターやテレビゲームが身近になる前に生まれてラッキーでした。友達や兄弟と外に出て遊び、自分自身で遊びを発明するという機会に恵まれたのですから。 小枝を即座に弓や銃や剣や望遠鏡に見立てたりして、自分たちがヒーローになったりもできました。小枝は何にでもなりましたが、ブーメランにはなりませんでした。一度投げた小枝は自分で取りに行かなければならないのでね。 成長する過程のどこかで、やがてそういう風に遊ぶことが恥ずかしくなってきます。他の子供たちが「大人らしく振舞うことが格好いい」と考えているのに、自分だけが松ぼっくりを手榴弾に見立てたり、魔法の力を持っているかのよう

    The Little Printf : 「我々はなぜプログラミングをするのか?」を追う寓話 | POSTD
  • デバッグの技術 | POSTD

    この記事は、アムステルダムで2015年に開かれたFronteersのカンファレンスで私が行った講演、「デバッグの技術」に対応するものです。 要約:利用可能なあらゆるツールの使い方を学び、必要なときにそれを使うことで、バグの撃退を楽しみましょう。そのほうが、キーボードを無暗に叩いて6か月も費やしてしまうより、ずっと楽しいものです。 題に入る前に… この記事を終わりまでスキップしたければ…… Don’t. Write. Bugs. とはいえ…… おそらくこれを読んでいるあなたはロボットではないでしょうから、1個や2個のバグぐらいは書いてしまったことがあるでしょう。「銀の弾丸」は存在しないのです。 実際、先ほどジョークで申し上げた『バグを書くな』というのは、デバッグの仕方を学ぶことの対極にあるものです。必要なのは経験です。バグに対するアプローチを見つけられるようになるためにはバグに遭遇しなけれ

    デバッグの技術 | POSTD
  • JavaScriptでx86エミュレータを書く | POSTD

    背景 コンピュータ・サイエンスのバックグラウンドを持たない者として、私は常々もっと低いレベルでプログラムのしくみを理解したい、そこに多くのエネルギーを費やしたいと考えてきました。 そこで、まずは基を身につけるためにプログラミングの入門書である『 Programming from the Ground Up 』を入手したのですが、なかなか学習を始められずにいました。そんな時、ちょうどブラジルまでの11時間にも及ぶフライトが予定されており、それがこのを読み始めるにはもってこいの機会となったのです。 読んでみると、このがすっかり気に入ってしまいました。ただ、事例がLinux x86 GNUアセンブリ言語で書かれていたのです。私は64ビットのMac OS Xユーザでした…。アセンブラ、リンカフラグの例や、 i386 と x86_64 間のシンタックスを理解するのにはインターネットが欠かせない

    JavaScriptでx86エミュレータを書く | POSTD
    murasuke
    murasuke 2015/10/19
  • リレーショナルデータベースの仕組み (3/3) | POSTD

    データマネージャ このステップで、クエリマネージャはクエリを実行するので、テーブルとインデックスからデータを取得する必要があります。そこでデータマネージャに対してデータを取得するよう要求するのですが、ここで次の2つの問題が発生します。 リレーショナルデータベースはトランザクションモデルを使用しています。この場合、「いつでも・どんなデータも取得できる」というふうにはいきません。どこか別の場所で、ここに格納されているデータを同時に使用したり更新したりしている可能性があるからです。 データの取得は、データベース内で実行する処理の中で最も時間のかかるもの です。従ってデータマネージャはそれを見越して、メモリバッファにデータを取得しておき、それを保持しなければなりません。 このセクションでは、リレーショナルデータベースがこの2つの問題にどう対処しているかを説明します。なお、データマネージャがデータを

    リレーショナルデータベースの仕組み (3/3) | POSTD
  • リレーショナルデータベースの仕組み (2/3) | POSTD

    クライアントマネージャ クライアントマネージャは、クライアントとの通信を扱います。クライアントとは、(Web)サーバであったり、もしくはエンドユーザ、またはエンドアプリケーションであったりします。ここではJDBC、ODBC、OLE-DBといった良く知られる一連のAPIを介してデータベースにアクセスできる様々な方法が提供されています。 また、データベースアクセスのための専用のAPIも提供されています。 データベースと接続する手順は以下の通りです。 マネージャは最初に 認証を行い (ログイン情報とパスワードの確認)、次にデータベースにアクセスできる 権限 を持ち合わせているかチェックする。これらのアクセス権はDBAによって規定されている。 その後、クエリを管理できるプロセス(もしくはスレッド)が利用可能かチェックする。 データベースに高負荷がかかっていないかどうかも確認する。 要求されているリ

    リレーショナルデータベースの仕組み (2/3) | POSTD
    murasuke
    murasuke 2015/09/17
  • リレーショナルデータベースの仕組み (1/3) | POSTD

    リレーショナルデータベースが話題に挙がるとき、私は何かが足りないと思わずにはいられません。データベースはあらゆるところで使われており、その種類も、小規模で便利なSQLiteからパワフルなTeradataまで様々です。しかし、それがどういう仕組みで機能しているかを説明したものとなると、その数はごくわずかではないでしょうか。例えば「リレーショナルデータベース 仕組み」などで検索してみてください。ヒット数の少なさを実感できると思います。さらにそれらの記事は短いものがほとんどです。逆に、近年流行している技術(ビッグデータ、NoSQLJavaScriptなど)を検索した場合、それらの機能を詳しく説明した記事はたくさん見つかると思います。 リレーショナルデータベースは、もはや大学の授業や研究論文、専門書などでしか扱われないような古くて退屈な技術なのでしょうか? 私は開発者として、理解していないものを

    リレーショナルデータベースの仕組み (1/3) | POSTD
    murasuke
    murasuke 2015/09/16
  • RubyとPythonにおけるガベージコレクションの視覚化 | POSTD

    稿は、ブダペストで開かれたイベント「 RuPy 」で、Pat Shaughnessyが披露したプレゼンの内容をまとめたものです。 プレゼンの映像はここ から視聴できます。 稿は当初、 同氏の個人ブログ に投稿されましたが、同氏の了承を得て、Codeshipに再掲載します。 このイベントは「RubyPython」に関するカンファレンスなので、RubyPythonでは、ガベージコレクション(以下「GC」)の動作がどう違うのかを比較すると面白いだろうと私は思いました。 ただしその題に入る前に、そもそもなぜ、GCを取り上げるのかについてお話しします。正直言って、すごく魅力的な、わくわくするテーマではないですよね? 皆さんの中でGCと聞いて、心がときめいた方はいらっしゃいますか? [実はこのカンファレンス出席者の中で、ここで手を挙げた人は数名いました!] Rubyコミュニティで最近、Rub

    RubyとPythonにおけるガベージコレクションの視覚化 | POSTD
    murasuke
    murasuke 2015/08/07