サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
postd.cc
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。(v.10以降搭載されています。)この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール(または国、あるいは両方)ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
あなたが知らない既存機能があるかもしれません! マイクロソフト社は2006年、Microsoft Officeの新バージョンで追加してほしい機能について、顧客調査を実施しました。驚いたことに、ユーザが希望した機能の90%以上はすでに実装されており、その存在が知られていないだけであることが判明しました。機能の「見つけにくさ」の問題の解決策として同社が考案したのが、現在のMicrosoft Office製品でおなじみの「リボンUI」です。 この問題はOfficeに限ったものではありません。日々使用するツールの機能をすべて把握している人はほとんどいません。PostgreSQLのように大規模なツールであればなおさらです。数週間前にPostgreSQL 14がリリースされたばかりなので、この機会にPostgreSQLのあまり知られていない機能に注目してみたいと思います。 この記事では、Postgre
私は先日、開発者が何を最も大きな課題に挙げているかを知ることで、開発者コミュニティのニーズを理解できるという記事を書きました。 元々の投稿はMDN Developer Needs Assessment(2019年)の結果を要約したものでしたが、不運なことに、この調査は2020年に中止されました。この調査情報は、Webプラットフォーム全体の方向性を定めるのに役立つ点で、私たちのチームにとって重要だったため、調査の中止は残念なことです。 調査を実施していたMozillaの代わりとして、私はチームのために、開発者の大まかなニーズを把握する調査を企画しました。 3カ月ごとに、米国、英国、インドのWeb開発者やWeb開発における意思決定者約700人をランダムにサンプリングして実施し、過去に実施したすべての調査とデータを比較して、トレンドに変化があるかを見ていきます。 注意すべきなのは、MDN Sur
Core Web Vitals(CWV)は2020年5月に発表されました。Googleはこの発表の中で、「より良いWebのためにページエクスペリエンスを評価する」と述べています。特に重要なのは、この評価がGoogleの検索順位アルゴリズムの一部を構成することでした。つまり、高速なWebサイトは、同等の遅いWebサイトよりも順位が上になり、Google検索によるトラフィック(ほとんどのWebサイトにとってWebトラフィックの最も大きな部分を占める)が増えます。 Webパフォーマンスコミュニティは、Webパフォーマンスのビジネス上のメリットを売り込むことに関して、常にSEO業界に劣っていました。Webパフォーマンスがビジネスのパフォーマンスに直接影響を及ぼす証拠が数多く存在するにもかかわらずです。しかし、今やSEO業界全体がWebパフォーマンスを重視するようになり、企業もWebパフォーマンスに
Rustコードのコンパイルが遅いことは誰でも知っています。しかし筆者は、世の中のほとんどのRustコードはコンパイルをもっと速くできると強く感じています。 例えば、つい最近の記事にこのように書かれていました。 一方、Rustでは、プロジェクトやCIサーバーの性能にもよりますが、 CIパイプラインの実行に15~45分かかります。 これは筆者には理解できません。GitHub Actions上にあるrust-analyzerのCIの所要時間は8分です。しかも、これは100万行の依存関係に加え、20万行の独自コードが記述されたとても大規模で複雑なプロジェクトでの話です。 確かに、Rustは根本的な部分で非常にコンパイルが遅いのは間違いありません。Rustはジェネリクスのジレンマにおいて「遅いコンパイラ」を選び、全体的な設計思想としてコンパイル時間よりもランタイムを優先しています(この点に関する優れ
名前が1文字の「-」という謎めいたnpmパッケージは、2020年にレジストリで公開されて以来、70万回以上ダウンロードされています。 さらに、このパッケージには有効なコードが含まれていません。では、一体なぜこれほど多くダウンロードされているのでしょうか? npmパッケージ「-」の中身 「-」というnpmパッケージは、2020年初めにnpmレジストリで公開されてから、約72万回もダウンロードされてきました。 パッケージのバージョンは0.0.1のみで、ファイルは3つです。 tar tvf 0.0.1/--0.0.1.tgz package/dist/index.js package/package.json package/README.md これらのファイルは主にマニフェスト(package.json)とindex.jsで、特に面白い点はなく、スケルトンコードが書かれているだけです。 マニフ
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS(Ruby-to-JavaScript)、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
「CDN」(content delivery network)という言葉からは、Googleのような大企業がいくつもの巨大なハードウェアを管理し、1秒当たり何百ギガビットものデータを処理する様子が想像されます。しかし、CDNは単なるWebアプリケーションです。私たちのイメージとは違いますが、それが事実です。8年前に買ったノートパソコンを使って、コーヒーショップの席に座りながらでも、きちんと機能するCDNを構築できます。この記事では、これから5時間でCDNを開発しようとするときに、直面するかもしれないことを紹介します。 まずはCDNの機能を明らかにしておきましょう。CDNはセントラルリポジトリ(通称:オリジン)からファイルを吸い上げ、ユーザーに近い場所でコピーを保存します。初期のオリジンはCDNのFTPサーバーでした。現在、オリジンは単なるWebアプリとなり、CDNはプロキシサーバーとして機
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT(Flash of Invisible Text)か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT(Flash of Unstyled Text)のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
Webパフォーマンスの向上は、コンバージョンの改善と利益の増加につながります。これに関しては極めて多くのケーススタディが存在しており、テクノロジーの専門知識を持たないプロダクトマネージャーでさえこの事実を知っていることも珍しくありません。それでは一体なぜ、最後の差し迫った緊急事態に至るまで、場合によっては顧客のネガティブなフィードバックが殺到し、Webサイトのパフォーマンスの悪さが浮き彫りになるまで、パフォーマンスへの取り組みは後回しにされることが非常に多いのでしょうか? 私は幸運にも、それぞれ独自の背景と課題を有する幅広いプロジェクトのパフォーマンス面に長年取り組むことができました。しかし、経験を積むにつれて、私はほとんどの時間をコードの最適化ではなくプロセスの最適化に費やすようになりました。私は元々ソフトウェア開発者なので、コードを精査してボトルネックを発見し、別の選択肢を提案・実装し
※前編がこちらにあります 目次 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 Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.(現新規事業開発部)で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳!」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ
(編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) GutenbergとWordPressに関する騒動は、PHPの終焉につながる最新記事です。深呼吸をしてください、みなさん。トロールは無視し、Mark TwainとFidel CastroとPHPとの共通点を見ていきましょう。そして、もっと重要なのは、スタートアップやスモールビジネスにとって、PHPが今でも合理的な選択である理由です。 PHPはいつから廃れ始めたのか “PHPはもうダメだ”といったブログの投稿が、登場し始めたのは2011年のようです(これより古いものを見つけたら、お知らせください)。Mediumや、mushroomsのように突然出現したcoding bootcampsを探し回れば、その唯一の共通点は、みんながPHPを嫌っているか、あるいは単に無視しているかです。どうやら、法外な値段のコー
「児童30人をレイプした小児性愛者でHIV陽性の司祭 教会の外で磔りつけに」 というようなタイトルを最近、見たことはありますか? それほど以前のことではないでしょうね。こうした不快で輝かしくないタイトルには、特に心がそそられるものです。ソーシャルメディアのフィードをスクロールしているとき、大げさな見出しの付いたニュースがシェアされているのに出くわしたことは、誰にでもあるはずです。疑いを抱きながら記事をクリックして読む人もいれば、ニュースの出どころを確かめもせずに即座にシェアする人もいるでしょう。 注釈: 「画像が付いているからといって、ネット上の情報をどれもこれも鵜呑みにしてはならない」―アブラハム・リンカーン 批評精神のある読者なら、数分間の手間をかけ、Googleが指示する注意義務を払って話の真実性を確かめるでしょう。でも、そのときには、その話は急速に広まって何百万回も閲覧されていて、
雇用者は何を求めているのか? データサイエンティストは、多くのことを知っていると期待されます。例えば機械学習、コンピュータ科学、統計、数学、データの可視化、コミュニケーション、そしてディープラーニングといったものです。これらの分野の中には、データサイエンティストが学んでいる可能性のある何十もの言語やフレームワーク、テクノロジが含まれています。雇用者側から求められたいデータサイエンティストは、限られた学びの時間をどのように割り当てるべきでしょうか。 私はデータサイエンティストにどのようなスキルが求められているのかを探るため、Web上の求人情報サイトを見て回りました。一般的なデータサイエンスのスキルと、特殊な言語やツールは分けて考えています。検索した日は2018年10月10日、サイトは LinkedIn と Indeed 、 SimplyHired 、 Monster 、それに[AngelLi
本稿は、オブジェクト指向プログラミング(OOP)について予備知識のないJavaScriptの学習者向けに書かれています。OOP の中でJavaScriptに関連する部分にのみ焦点を当て、OOPの概要については説明しません。ポリモーフィズムについては、静的型付け言語の方が適しているため省きます。 なぜOOPを知る必要があるか? あなたは初めてのプログラム言語にJavaScriptを選びましたか? あなたはコードが10万行以上にわたる巨大企業のシステムを扱う腕利きの開発者になりたいですか? オブジェクト指向プログラミングを最大限活用できるように学ばなければ、到底無理でしょう。 様々な考え方 サッカーでは、安全に守りを固めることもできますし、サイドからの高いボールに飛びつくこともできます。また、先など考えずに攻撃することも可能です。これらの戦略は全て同じ目的を持っています。それは試合に勝つことで
デスクトップ ここでは、実際にデスクトップアプリケーションにならしめているデスクトップアプリケーションの一部についてお話しします。特定のスキルセットを必要とするデスクトッププラットフォームは大量に存在しています。例えば、Photoshopは画像を扱うアプリケーションなので、Photoshopなどで何か書きたければ、画像の処理を行うアルゴリズムと技法を絶対に知っておく必要があります。Dropboxなどで何か書きたい場合は、ソケットプログラミングを絶対に知っておく必要があります。そしてVisual StudioなどでコンパイラやIDEをビルドしたければ、コンパイラの操作方法を絶対に知っておく必要があります。ここではその詳細には触れません。デスクトッププラットフォームに取り組みたい場合に最も使う可能性のある言語について見ていきます。 デスクトッププラットフォームに関して言えば、プログラマはC++
プログラミングの森の奥で道に迷わないために 私がプログラミングの仕事を始めたばかりのころの悩みの種は、どの言語や技術を選ぶべきか、でした。何を学び、何から始めればいいのか。プログラマとしての初仕事を獲得するために知っておくべきことは何か。そのころ(ほぼ10年前)、CourseraやUdemyや SoloLearn は、ありませんでした。いい職に就くための確実な方向、完璧な道筋がどんなものなのか、私にはわかりませんでした。高給で、満足できて、優遇される、21世紀の宇宙飛行士、つまりプログラマの仕事を得るには。 問題は今でも相変わらず同じです。ビギナーは選択の段階でつまずき、優れたプログラマになるための近道はなく、コミュニティは「Pythonっていう言語は簡単ですか?」というような新入りの質問を歓迎するほど温かくもありません。プログラマとして成功するための道筋は、むしろ以前よりも見えにくくなっ
役立つコードレビュー(CR)のコツは、学校では習いません。アルゴリズム、データ構造、プログラム言語の基礎は習っても、確実に役に立つフィードバックを返す方法をじっくりと教えてくれる人はいないでしょう。 コードレビューは優れたソフトウェアを作り出すには欠かせないプロセスです。レビューを通したコードは、そうでないコードよりも 質が高く、バグが少ない 傾向があります。健全なコードレビュー文化には、副次的な利点もあります。たとえば、 バス因子 を押しとどめる、新メンバーのトレーニングに最適なツールになる、など。また、コードレビューは優れた知識共有の手段でもあります。 前提 まずは、この記事のポイントの前提を提示する必要があるでしょう。それは以下のとおりです。 信頼のおける環境で作業をしている。あるいは、あなたとチームは、あなたの信頼性を高めることを目指して作業している。 コードではないシナリオでフィ
情報科学科の卒業生やプログラマの中には、UberやNetflixのような新興企業や、 Amazon 、 Microsoft 、 Google のような大企業や、InfosysやLuxsoftのようなサービスを基本とする企業で、プログラミング、コーディング、ソフトウェア開発の仕事に就きたいと考える人が大勢います。しかし、実際にそういった企業で面接を受ける場合、大半の人が プログラミングに関してどのような質問をされるか 見当もつきません。 この記事では、 新卒生からプログラマになって1〜2年までの 経験値が異なる人たち向けに、それぞれの プログラミングの面接でよく聞かれる質問 をいくつか紹介していきます。 コーディングの面接では、主に データ構造とアルゴリズムに基づいた質問 がされますが、 一時変数を使わずにどのように2つの整数をスワップするのか 、というような論理的な質問もされるでしょう。
DevOpsエンジニアになるためのイラストガイド(関連コースへのリンク付き) DevOpsは今とてもホットなテーマです。多くの友人、同僚、上級開発者である知人がDevOpsのエンジニアとなり自分のいる組織の中で第一人者になろうと一生懸命になっています。 私は DevOps の恩恵を心から認めています。DevOpsはソフトウェア開発とデプロイの改善に直結しているからです。しかし私の限られた経験から言っても、DevOpsのエンジニアになるのは 簡単ではありません。 非常に多くのツールと事例があり、適切な学び方を選ぶのがとても難しいのです。 Javaのブロガー としてよく質問を受けます。例えば、 DevOpsのエンジニアになるにはどうすれば? どのツールを学べば? どんな事例を参考にすれば? DevOpsエンジニアにはMavenとJenkinsがマストですか? DockerやKubernetes
多くの人が気付かないうちにWeb2.0からWeb3.0への移行が進みそうです。アプリケーションの見た目は現在使っているものとほとんど変わりませんが、バックエンドで変化が進んでいきます。未来を予測する人ならば、クラウドを使うSiacoin、ソーシャルメディアのプラットフォームとしてのSteemit、さらに未来を予想する手段としてAugurも頭に浮かぶのではないでしょうか。 適正に動く最初のブロックチェーンがリリースされたことを見れば、人々がWeb2.0を離れWeb3.0へ向かっているのは明らかでしょう。なぜなら、開発者というのはテクノロジーとWeb2.0のユーザーフレンドリーな手法を身につけても、更に使いやすいと考えられているWeb3.0に着手しようとするからです。 上の図の分布では、いろいろな企業とWeb2.0のセグメントが示され、ブロックチェーンに基づいたプロジェクトのどれに勝ち目がある
スクラム とは、最近、特にソフトウェア開発の分野でよく使われているバズワードです。この概念は、1995年のOOPSLAでJeff SutherlandとKen Schwaberにより提唱されました。自己組織的なチーム構成と短いスパンの持続可能な繰り返し作業に重点を置くもので、複雑なソフトウェア製品やプロジェクトを扱うためのすっきりとした軽量なフレームワークです。 シンプルで軽量な性質を強みとするスクラムですが、これを導入している企業の約半数が正しく実践できていないと思われます。では、一見すぐに使えそうな手法なのに、実践するのが非常に難しいのはなぜなのでしょうか。その理由と、これを確実に成功させるために講じるべき対策を見ていきましょう。 1. 組織の賛同が得られていない どういう タイプの企業であろうと、何かを変えようとすれば必ず直面する最大の課題であると言えるのが、これです。スクラムも例外
(編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) オブジェクト指向プログラミングが、ソフトウェア開発に新しい設計を持ち込みました。 その結果、開発者は単一の目的を処理するために、全体のアプリケーションに関係なく、1つのクラスの中で、同じ目的や機能を持つデータを結び付けることができるようになりました。 しかし、このオブジェクト指向プログラミングで、分かりにくいプログラムやメンテナンスができないプログラムを防ぐことはできません。 そこで、5つのガイドラインがRobert C. Martinによって作り出されました。これら5つのガイドラインすなわち原則により、開発者にとって読みやすく、メンテナンスが可能なプログラムを作成しやすくなりました。 5つの原則は、S.O.L.I.Dの原則と呼ばれています(頭字語はMichael Feathereによって名付けられま
新しいプロジェクト始まると、開発者はいきなりプログラミングに飛びつく傾向があります。それもいいでしょう。結局、それが仕事なのですから。でも、時には飛びつく前にブレーキをかけて、ソフトウェア設計から手を付けるのもいい考えかもしれません。 “ホワイトボードを使う長袖のホワイトシャツの男性”(出典: Trent Erwin / Unsplash ) ソフトウェア設計にはいろいろな方法があります。UMLなどのモデリング言語のソフトウェアを利用することもできるし、 テキストを書いて 画像を使うこともでき、あるいはホワイトボードに描くこともできます。ここで大切なのは、ソフトウェアの開発中に設計を保存して再考できることです。設計は多少なりとも改善していかなければなりません。ですから、いつも最初からホワイトボードに描きたいというわけではないのならばデジタルデータで、設計を行うのも良さそうです。データの保存
メッセージの耐久性と持続性 分散型システムのノードは演算し、データを保存し、互いにメッセージを送信し合います。メッセージ送信の重要な指標は、これらのメッセージがどれだけ確実に届くかです。基幹システムでは、消失メッセージがゼロでなくてはならない場合がしばしばあります。 分散型システムにおける通信は、RabbitMQ、Kafkaなどの分散型メッセージングサービスを用いることがほとんどです。こういったメッセージングサービスはメッセージ配信において様々なレベルの信頼性をサポートしています(または、サポートするように設定を変えられます)。 メッセージの永続性とは、メッセージを処理しているノードで何らかの問題が起こった時、その問題の解決後に処理されるよう、メッセージはそこに残ることを意味します。メッセージの持続性は多くの場合、 メッセージキュー レベルで用いられます。持続性のあるメッセージキューを実装
バックエンドに関する経験があった私は、2年前にモバイルソフトウェアエンジニアとしてUberに入社しました。担当することになった仕事は、決済機能の構築を含む アプリの刷新 です。その後、 技術管理の側に回る ことになり、チームそのものを率いることになります。配下のチームは、決済を行うバックエンドシステムの多くを担当していたため、責任者となった私もバックエンドに触れる機会が以前にも増して多くなりました。 Uberで働く前は、分散型システムの経験はなきに等しかったと言っていいと思います。 それまでの私は、一般的なコンピュータサイエンスの学位を取得後、フルスタックのソフトウェア開発に10年間、関わっていました。分散型システムについては、一応、大まかな仕組みやトレードオフなどは知っていましたが、一貫性や可用性、冪等性などの概念に精通していたとはお世辞にも言えません。 この記事では、大規模で可用性が高
次のページ
このページを最初にブックマークしてみませんか?
『POSTD | ニジボックスが運営するエンジニアに向けたキュレーションメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く