Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
React Server Componentsの仕組み：詳細ガイド | POSTD
React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
Core Web VitalsはWebを高速化したか？ | POSTD
Core Web Vitals（CWV）は2020年5月に発表されました。Googleはこの発表の中で、「より良いWebのためにページエクスペリエンスを評価する」と述べています。特に重要なのは、この評価がGoogleの検索順位アルゴリズムの一部を構成することでした。つまり、高速なWebサイトは、同等の遅いWebサイトよりも順位が上になり、Google検索によるトラフィック（ほとんどのWebサイトにとってWebトラフィックの最も大きな部分を占める）が増えます。 Webパフォーマンスコミュニティは、Webパフォーマンスのビジネス上のメリットを売り込むことに関して、常にSEO業界に劣っていました。Webパフォーマンスがビジネスのパフォーマンスに直接影響を及ぼす証拠が数多く存在するにもかかわらずです。しかし、今やSEO業界全体がWebパフォーマンスを重視するようになり、企業もWebパフォーマンスに
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
ツールは解決策ではない | POSTD
最近、『The Atlantic』に掲載された非常に重苦しい 記事 「The Coming Software Apocalypse」（きたるソフトウェア大惨事）を読み終えました。同記事は最初のうちは、人に傷害を与えたり、人の命を奪ったりした恐ろしいソフトウェアバグについて述べており、いい内容です。しかし、途中から急に残念な展開になっているのです。 同記事の著者はソフトウェア業界の多くの思想的リーダーにインタビューをしましたが、 Light Table 、 モデル駆動工学 、 TLA+ といった新しい技術を生み出したリーダーだけを選んでいます。 私はこうしたツールに何ら反対しているわけではありません。Light Tableプロジェクトに資金提供さえしました。優れたソフトウェアツールは優れたソフトウェアを書きやすくすると思います。しかし、ツールは「大惨事」に対する解決策ではありません。 著者は
恐竜に教える現代のCSS – Part 1 | POSTD
注釈： 「CSSでピクセルをいじるのは確かに難しかった！ 今じゃHTMLで非セマンティックなクラス名とかインラインCSSとかを使うのがクールで、JavaScriptでCSSスタイルを書いたりもできるって！」 「『ファミリー・ガイ』の『CSS』GIF（訳注：米アニメ『ファミリー・ガイ』のキャラクターを使った、CSSを扱う厄介さを示唆するGIF画像）をここに挿入」 「ハハッ！」 CSSは不思議なことに、Web開発者が学ぶ中で非常に易しいとも難しいとも考えられている言語です。確かに、CSSは簡単に始められます。特定の要素に適用するスタイルの属性と値を定義して、それから……いえ、差し当たって必要な作業はほぼそれだけです。しかし、比較的大規模なプロジェクト向けに意義のある形でCSSを組むとなると、作業は複雑に入り組んできます。あるページのある要素のスタイルを指定しようとCSSのどの行を変更しただけで
「フロントエンド開発者」の終焉 | POSTD
元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
JavaScript モジュールの現状 | POSTD
(注：2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき？ 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
インターフェースプレビューを利用した非ブロッキングユーザインターフェース | POSTD
泥に足を取られながら歩くのではなく、氷上を滑走するようなインターフェース 非ブロッキングインターフェースとは 私が抱くイメージでは、非ブロッキングインターフェースとは氷上を滑走するようなもの、そしてブロッキングインターフェースとは泥に足を取られながら歩くようなものです。ネットワークのスピードにかかわらず、非ブロッキングインターフェースを使うと表示速度が速く、反応も良く、表示が途切れることがないように感じられます。つまり新たなページをロードした時やWeb上のボタンをクリックした時にすぐ画面が反応し、中途半端な状態でユーザが待たされることはありません。 そこで”インターフェースプレビュー”という手法を1つご紹介しましょう。非ブロッキングインターフェースを設計する際に、非常に効果的な手法です。これを使えば、データを読み込んでいる間にも、ページレイアウトやプレースホルダ要素をすぐにレンダリングでき
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
コードの半減期とテセウスの船 | POSTD
プロジェクトが発展する際は、単純に新しいコードが古いコードの上に追加されているのでしょうか。もしくは、時間をかけて徐々に古いコードが新しいコードに置き換えられているのでしょうか。これを解明するために、手ごわい GitPython プロジェクトの助けを借りて、Gitプロジェクトを分析する 簡単なプログラム を構築してみました。履歴を年ごとに振り返り、 git blame を実行してみようと思ったのです（この処理を多少でも速くすることは簡単ではないと分かりました。しかし、ファイルのキャッシングを便宜的に含ませることや、変更された点を履歴から見つけること、 git diff を使って変更したファイルを無効にすることなどの詳細を、いつかお伝えします）。 頭がさえている時に、 テセウスの船 をダサくもじって、 “テセウスのGit” と名付けました。私は父親になって、ひどいダジャレを作れるようになった
くだらないAPIなんていらないよ – 2016年のウェブスクレイピング事情 | POSTD
ソーシャルメディアのAPIとそのレート制限は、あまり気分のよいものではありません。特にInstagram。あんな制限つきAPIを欲しがる人がいったいどこにいるんでしょうね？ 最近のサイトは、スクレイピングやデータマイニングの試みを阻止するのがうまくなってきました。AngelListはPhantomJSすら検出してしまいます（今のところ、他のサイトでそこまでの例は見ていません）。でも、ブラウザ経由での正確なアクションを自動化できたとしたら、サイト側はそれをブロックできるでしょうか？ 並行性を考えたり、さんざん苦労して用意した結果として得られるものを考えたりすると、Seleniumなんて最悪です。あれは、私たちが「スクレイピング」と聞いて思い浮かべるようなことをするためには作られていません。しかし、賢く作り込まれた今どきのサイトを相手にして、インターネットからデータを掘り当てるための信頼できる
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
他人の書いたコードに挑もう – Part 1 | POSTD
この記事では、他人が書いたコードを扱うための練習法を一から説明します。目標は、 Spyder Python IDE という今まで触ったこともないプロジェクトのコードに任意の変更を加え、途中で行き詰ることなく、目的達成に必要な情報 のみ 習得することです。ここでは、勘や実験的な手段、そしてプロの現場で養った洞察力を武器に問題に対処する方法を学びます。形式ばったレッスンのように、苦痛を感じることはないでしょう。満足感や挫折、葛藤を味わいながらプロジェクトを進め、最終的には（なんとか動く程度の）パッチを完成させ、大規模で不慣れなコードベースに機能を追加します。 プログラミングを学んでいる人は皆、あらゆる種類のプログラムで大量のコードを書いています。それは、問題集に載っているアルゴリズムを実装するにせよ、ウェブサイトの構築やビデオゲームの作成をするにせよ同じです。ところがプロのソフトウェアエンジニ
あなたのアプリの読み込みが加速したとユーザに感じてもらうには | POSTD
ソフトウェアを設計する際、アプリを端末に読み込む速度を変えることについて、シミュレートする手段はありません。従ってアプリのコンテンツが画面に表示されるまで、ユーザが延々と待たなければならなかったとしても、その原因は必ずしも設計だとは限りません。 さらに、インターネットの通信速度は保証されているわけではありません。画像や音楽などをダウンロードしていると、通信速度が著しく低下することがあります。こんな時のために、ユーザに不満を抱かせず、退屈させない方法を考えておく必要があります。 スピナーの表示は無益 スピナーを表示するのは、コンテンツの読み込み処理や演算処理の最中であることを表すのに適切な方法ではありません。デフォルトでアイコンを読み込むのは（例えば中心からグレーの輪が広がるiOSのスピナーのように）、ユーザによくない印象を与える傾向にあります。スピナーは、デバイスのブート（起動）に始まり、
Classy CSS: Sassスタイルシートへのプログラマティックアプローチ | POSTD
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
デバッグの技術 | POSTD
この記事は、アムステルダムで2015年に開かれたFronteersのカンファレンスで私が行った講演、「デバッグの技術」に対応するものです。 要約：利用可能なあらゆるツールの使い方を学び、必要なときにそれを使うことで、バグの撃退を楽しみましょう。そのほうが、キーボードを無暗に叩いて6か月も費やしてしまうより、ずっと楽しいものです。 本題に入る前に… この記事を終わりまでスキップしたければ…… Don’t. Write. Bugs. とはいえ…… おそらくこれを読んでいるあなたはロボットではないでしょうから、1個や2個のバグぐらいは書いてしまったことがあるでしょう。「銀の弾丸」は存在しないのです。 実際、先ほどジョークで申し上げた『バグを書くな』というのは、デバッグの仕方を学ぶことの対極にあるものです。必要なのは経験です。バグに対するアプローチを見つけられるようになるためにはバグに遭遇しなけれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
