Skip to content

Vol.233

Kota Furusawa

Branching Out from the Great Divide by Chris Coyier Jump to heading

フロントエンドデベロッパの大きな境界とさらなる枝分かれ Jump to heading

ウェブフロントエンドデベロッパーという肩書は多くの仕事の本質をカプセル化する。Chris氏は、Brad氏の記事に言及しながら、フロントエンドの役割に対してツリーのメタファを利用して、同じフロントエンドデベロッパとして同じ根幹は持ちながらも、その先の枝分かれしているところは全く別のものであるとはなす。

4 Rules for Intuitive UX by Erik D. Kennedy Jump to heading

直感的なUXのための4つのルール Jump to heading

UXを改善するためのシンプルな4つのテクニックを紹介する。

場所の法則に従う

適切なコントロールを、適切な場所に表示するようにする。変化を与えるアクションは変化を与えるものに対して配置する。

何でもドロップダウンにしない

ドロップダウンは求められるアクションが多く、選択肢が一覧できないので適切ではない場合が多い。他のUIで対応できないか検討する。

目を細めて見てみる

目を細めて見てみても、それが正しく理解できるかを確認する。

例を示す

ショーケースなど、例を示して、どのように使えばよいのか、これは何なのかを伝える

Write tests. Not too many. Mostly integration. by Kent C. Dodds Jump to heading

テストを書く。多すぎず。そしてインテグレーションテスト Jump to heading

Guillermo氏がTweetした、 Write tests. Not too many. Mostly integration. に対してのKent氏の考察。テストを書く重要性(Write tests)、多すぎるテストが開発の邪魔をする点(Not too many)、UnitとE2EではなくIntegrationテストを重要視する(Mostly integration)という3点を詳しく解説していく

Using Native JavaScript Modules in Production Today by Philip Walton Jump to heading

Webpackなどのバンドラを使用せずに、JavaScript分割、読み込みをする方法について。実際の所現在モダンなブラウザではネィティブなJavaScriptモジュールを読み込むことができ、それに加えて、パフォーマンスを向上させることができるという。詳しくは本文で詳しく解説されているが、ポイントとしては以下の通り:

  • バンドラを使うが、フォーマットはES2015とする
  • 積極的にコード分割を行う
  • rel="modulepreload" を用いて、すべてのモジュールを静的依存関係の中にプリロードする
  • import()をサポートしていないブラウザに対しては、ポリフィルを活用する
  • モジュールをサポートしていないブラザのために <script nomodule> を使用する

Design tools are holding us back by Tom Johnson Jump to heading

デザインツールは数多く存在するが、Webで活用する場合、それらに足りないものが非常に多いと指摘する。例えば、ボックスモデル、継承などWeb特有の特性をデザインツールで表せない場合が多い。しかしながら、最近ではWebflowやFramer Xなど、印刷モデルではなくデジタルのデザインをするためのツールも増えてきているという締めくくる。

In Brief Jump to heading