フロントエンドのテストは皆のためのもの

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

4d

フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ

クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、どちらかが特に「勝っている」わけではありません。...

5w

パフォーマンスの文化を創る

パフォーマンスの文化を創る Webパフォーマンスの向上は、コンバージョンの改善と利益の増加につながります。これに関しては極めて多くのケーススタディが存在しており、テクノロジーの専門知識を持たないプロダクトマネージャーでさえこの事実を知っていることも珍しくありません。それでは一体なぜ、最後の差し迫った緊急事態に至るまで、場合によっては顧客のネガティブなフィードバックが殺到し、Webサイトのパフォーマンスの悪さが浮き彫りになるまで、パフォーマンスへの取り組みは後回しにされることが非常に多いのでしょうか？ 私は幸運にも、それぞれ独自の背景と課題を有する幅広いプロジェクトのパフォーマンス面に長年取り組むことができました。しかし、経験を積むにつれて、私はほとんどの時間をコードの最適化ではなくプロセスの最適化に費やすようになりました。私は元々ソフトウェア開発者なので、コードを精査してボトルネックを発見し、別の選択肢を提案・実装し、自分でも驚くような仕事とパフォーマンススコアの向上を実現する方が性に合っています。私がコンサルタントとして参加するチームが、高いスキルを持つエンジニアで構成された既に確立したチームである場合、私は往々にして懐疑的な目...

Jul 2021

アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編

※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar...

Jun 2021

アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編

クイックサマリー‐私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color...

May 2021

POSTDをGatsby.jsベースに変更しました

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

Apr 2021

PHPはもうダメだ、PHP万歳！

GutenbergとWordPressに関する騒動は、PHPの終焉につながる最新記事です。深呼吸をしてください、みなさん。トロールは無視し、Mark TwainとFidel CastroとPHPとの共通点を見ていきましょう。そして、もっと重要なのは、スタートアップやスモールビジネスにとって、PHPが今でも合理的な選択である理由です。 PHPはいつから廃れ始めたのか “PHPはもうダメだ”といったブログの投稿が、登場し始めたのは2011年のようです（これより古いものを見つけたら、お知らせください）。Mediumや、mushroomsのように突然出現したcoding bootcampsを探し回れば、その唯一の共通点は、みんながPHPを嫌っているか、あるいは単に無視しているかです。どうやら、法外な値段のコーヒーを飲みながら、油まみれのヒゲと皮肉たっぷりのTシャツと一緒に、PHPでコーディングするのは不可能のようです。...

Mar 2019

70%の人がフェイクニュースに懸念 — Google の闘い

「児童３０人をレイプした小児性愛者でHIV陽性の司祭　教会の外で磔りつけに」というようなタイトルを最近、見たことはありますか？　それほど以前のことではないでしょうね。こうした不快で輝かしくないタイトルには、特に心がそそられるものです。ソーシャルメディアのフィードをスクロールしているとき、大げさな見出しの付いたニュースがシェアされているのに出くわしたことは、誰にでもあるはずです。疑いを抱きながら記事をクリックして読む人もいれば、ニュースの出どころを確かめもせずに即座にシェアする人もいるでしょう。 注釈：「画像が付いているからといって、ネット上の情報をどれもこれも鵜呑みにしてはならない」―アブラハム・リンカーン 批評精神のある読者なら、数分間の手間をかけ、Googleが指示する注意義務を払って話の真実性を確かめるでしょう。でも、そのときには、その話は急速に広まって何百万回も閲覧されていて、もう手遅れかもしれません。...

Mar 2019

データサイエンティストにおいて、最も需要のあるスキルとは

雇用者は何を求めているのか？ データサイエンティストは、多くのことを知っていると期待されます。例えば機械学習、コンピュータ科学、統計、数学、データの可視化、コミュニケーション、そしてディープラーニングといったものです。これらの分野の中には、データサイエンティストが学んでいる可能性のある何十もの言語やフレームワーク、テクノロジが含まれています。雇用者側から求められたいデータサイエンティストは、限られた学びの時間をどのように割り当てるべきでしょうか。 私はデータサイエンティストにどのようなスキルが求められているのかを探るため、Web上の求人情報サイトを見て回りました。一般的なデータサイエンスのスキルと、特殊な言語やツールは分けて考えています。検索した日は2018年10月10日、サイトはLinkedInとIndeed、SimplyHired、Monster、それに[AngelList](https://angel.co/jobs）です。以下は、各Webサイトにデータサイエンティストの求人がどれだけ掲載されていたかを示す図です。...

Mar 2019

JavaScriptとオブジェクト指向プログラミング

本稿は、オブジェクト指向プログラミング（OOP）について予備知識のないJavaScriptの学習者向けに書かれています。OOP の中でJavaScriptに関連する部分にのみ焦点を当て、OOPの概要については説明しません。ポリモーフィズムについては、静的型付け言語の方が適しているため省きます。 なぜOOPを知る必要があるか？ あなたは初めてのプログラム言語にJavaScriptを選びましたか？　あなたはコードが10万行以上にわたる巨大企業のシステムを扱う腕利きの開発者になりたいですか？　 オブジェクト指向プログラミングを最大限活用できるように学ばなければ、到底無理でしょう。 様々な考え方 サッカーでは、安全に守りを固めることもできますし、サイドからの高いボールに飛びつくこともできます。また、先など考えずに攻撃することも可能です。これらの戦略は全て同じ目的を持っています。それは試合に勝つことです。...

Mar 2019