CSSやJavaScriptの新しい動き、フロントエンドのWeb制作の現状とこれから必要とされるテクニックや考え方

Post on:2017年6月9日

ユーザーの期待値はますます上昇

これは段階を設定します。

Webサイトに求められていることは、ますます高まっています。制作者は、非常に複雑なものを非常に迅速に構築し、非常にうまく動作するように求められています。

JavaScriptの新しい動き

jQueryはわたし達にとって素晴らしいものでしたが、新しいプロジェクトのためとなると終わっています。ES6+でカバーできるという意味ではありませんが、それは本当です。わたし達はDOMを直接的に扱い、ステータスストアのように扱うことで、問題に陥ってしまいました。わたしが始めたように、ユーザーの期待、そして複雑さが高まっています。わたし達はその複雑さを管理する必要があります。

When Does a Project Need React?で話したように、ステータスは大きなコンセプトです。Webサイトは、どのステータスを管理する必要があるかを考え、そのステータスのために適切なストアを建設して、構築されるでしょう。

新しいフレームワークはここにあります。Ember, React, Vue, Angular, Svelteなど。これらはステータス、コンポーネント、そしてDOMを扱うという考え方を可能にします。

そして今、これらはスピード、機能、APIの素晴らしさを競い合っています。

TypeScriptは長期的に見ると、優勢に見えます。なぜなら、これは制作者に安定性とより良いエディタ体験をもたらすからです。

ページ制作ではなく、全体を構築する

スタイルガイド、デザインシステム、パターンライブラリなど、これらはWebプロジェクトの標準的なプロセスの一部になっています。そして、主な成果物になるでしょう。何が必要とされるにしても、システムが構築できます。もう、ページの概念は消え去っています。コンポーネントは、ユーザーが見るものを構築するために一緒に組み合わされます。それはUXの人々、インタラクションデザイナー、マーケティングの担当者さえ一緒にできることです。

新しいJavaScriptは、このやり方が非常に適しています。

ネイティブとWebの境界線はあいまい

SketchとFigma、どちらを使いますか？わたし達はそれらがネイティブアプリなのか、Webアプリなのかではなく、機能で判断します。SlackやTwitterを使う時はネイティブアプリですか？それともブラウザで開きますか？どちらを使っても同じです。時にはWebアプリの方が便利で、またネイティブアプリの方が便利な時もあるでしょう。

わたしは定期的にネイティブアプリである必要があるアプリを使用しますが、Webアプリではそれほど困りません。オーディオやビデオのアプリを見るだけで、Skypeはフル機能のアプリを持っています。Lightstreamはフルのライブストリーミングのスタジオで、Zencasterはマルチトラックの高品質なオーディオを録音できます。それらはすべてブラウザで動作します。

これはWeb上で良い仕事をしている例にすぎません。Webのテクノロジーはこういった面でも大きく進歩しています。サービスの担当者は、オフライン機能やプッシュ通知などの重要な機能を提供します。Web Audio API、Web Payments API、Webはアプリケーションを構築するための最有力なプラットフォームになるはずです。

ユーザーは良いものを使用したいだけで、それがどのように構築されたかを考えたり、気にかけたりしません。

URLは依然として重要

Webには本当にこの権利があります。特定のものをすぐ見る普遍的な方法を持つことは信じられないほどです。URLは検索エンジンを可能にし、潜在的に最も重要なイノベーションの1つにします。URLは共有とブックマークを可能にします。URLはマーケティングでも公平です。誰でもURLを訪れることが可能で、阻止する人はいません。

パフォーマンスは鍵

パフォーマンスが低いWebサイトは、満足値が低下します。すべてがすぐに表示されると誰もが期待しています。そうでないサイトは恥ずかしいでしょう。

CSSはさらにモジュール化していく

スタイルシートを書くとき、わたし達は常に決断を必要とします。これはグローバルなスタイルでサイト全体に適用してもよいのか？あるいはこのコンポーネントのみの特殊なスタイルなのか？ CSSを書く時はこれらの2つを決断する必要があります。
コンポーネント固有のスタイルは、スコープが設定され、コンポーネントにバンドルされ、必要に応じて使用されます。

CSSプリプロセッサは徐々に消えていく

プリプロセッサの特徴の多くは、すでにCSSの変数で利用でき、より高度なビルドプロセス（インポート）によってより良く処理できます。CSSをモジュール化してスコープを決めるために最終的に使用するツールはCSSプリプロセッサなので、プリプロセッサの必要性が残るかもしれません。
現在のプリプロセッサの標準機能で、利点はミックスインだと思います。もし、ネイティブのCSSでミックスイン（おそらく@apply）と拡張（たぶん@extend）が実装されると、プリプロセッサの廃止が早まるでしょう。

HTMLとCSSをうまく利用することは引き続き重要

HTMLがどのように構築され、どのようにDOMにたどりつくかは、引き続き変化します。しかし、あなたはまだ良いHTMLがどのように見えるかを知る必要があります。 HTMLを構造化する方法を知っておく必要があります。これはあなたにとって有用であり、ユーザーがアクセスしやすく、スタイルを適応する方法です。

CSSがブラウザにどのように埋め込まれ、どのように適用されるかは引き続き変化しますが、それを使用する方法はまだ必要です。レイアウトを達成する方法、スペースを管理する方法、タイポグラフィを調整する方法など、プロフェッショナルなテクニックが必要とされています。

ビルドプロセスは競争力を発揮する

パフォーマンスは非常に重要です。フォーマンスを向上する機会がたくさんあるため、わたし達はコードベースでプロダクションにもたらす革命を見ることになるでしょう。webpackなどのツールはすでに大いに役立っていますが、コードが最終的にブラウザにどのように送られるかについて自動化されたツールを魔法にさせる余地がたくさんあります。

Webのプラットフォームが進化するにつれて、ビルドプロセスが調整され、最善の方法は進化します。