体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

今すぐ知っておくべき!モダンな10のWeb技術

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、ライターのJake Rocheleau氏によって投稿されました。

 

ここ数年の間に、新しい技術が数多く公開されています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。

私が最新ツールとベストプラクティスに常に関心を持っているのは、「今日のツール」が「明日の必須ツール」となるからです。

 

この記事では、モダンなWeb技術トップ10をご紹介します。

 

1. Web Components

01-webcomponents-homepage

Web Componentsは、W3Cの標準化委員会によって策定が進められているHTML5要素の新しい仕様です。

これらのコンポーネントを使えば、タブ化したウィジェット、画像スライダー、ドロップダウンメニューなど動的ページに使える機能を、カスタマイズと再利用が可能な要素として作成できます。

例えば、ドロップダウンメニューをul要素を使ってゼロから作成する代わりに、タグなどを使って作成することができます。

 

Web Componentsのメインサイトには実例が多く紹介されています。

実際のプロジェクトに利用するのはまだ早いかもしれませんが、今後数年でそれも変わってくるはずです。将来的にWeb ComponentsがW3Cの正式な勧告となったときに備えて、Webエンジニアは少なくともWeb Componentsに慣れておいた方がいいでしょう。

 

2. Polymer

02-polymer-project-homepage

Web Componentsを使い慣れたら、次はPolymerなどのライブラリが役立ちます。PolymerはGoogleによって主導されているオープンソースのプロジェクトで、Web Componentsなどを標準化する目的で進められています。

Web ComponentsのAPIを使っていれば、このライブラリによって開発はより簡単になるでしょう。動画、スライダー、Googleマップのウィジェットなどの埋め込み機能のためのプレビルト型の要素を取得できます。

 

Polymerのゴールはモジュール化です。Web ComponentsのAPIによってウィジェットを自由に開発できるのも、こうした理由からです。同じコードのブロックを書き直さなくても、同じページ上に多くのウィジェットを追加することができます。

PolymerはWeb Componentsと組み合わせて使うべきです。この2つの技術は、Webサイトのモジュール化を劇的に発展させるでしょう。

 

3. AMP

03-washington-post-amp-pages

Googleはユーザーエクスペリエンスの向上、ブラウジング体験のシンプル化を常に推進してきました。そしてGoogleのAMP(Accelerated Mobile Pages)のプロジェクトは、あらゆるWebページをシンプル化してモバイル端末上での表示を最適化することに成功しました。

小さなコードをページに追加するだけで、Googleの技術によって残りは自動的に実装されます。

 

WebサイトをAMPで最適化すれば、読み込みが速くなり、画像と動画は事前読み込みされ、モバイル上での読書体験を効率化するため、ネイティブアプリのように振る舞います。

モバイルユーザーが年々増えていることを考えれば、この技術は注目に値します。高度にインタラクティブな設計にしたいWebサイトには向きませんが、ブログやニュースのサイトにおいては、AMPはモバイルWebのビジネスに革命を起こすかもしれません。

 

4. Gulp

04-gulpjs-homepage

自動化は、単調な仕事を減らし、プロジェクトを最短スピードで構築するための鍵です。Gulpなどのタスクランナーを使えば、余計なタスクを自動化し、「素晴らしいWebサイトを構築する」という本来の作業に集中することが容易になります。

Gulpは、SassのファイルからCSSファイルを生成したり、テンプレートやブラウザごとのCSSをコードに取り入んだり、コードに変更を加えた後にページを自動更新することが可能です。その他にも多くの自動化機能があります。

 

5. TypeScript

05-typescript-homepage

Googleが開発したフロントエンドのフレームワークAngularJSは最近、スクリプト言語としてTypeScriptを採用しました。このことはWeb・Angularプロジェクト用の基本的なスクリプトを書く時間の節約化につながり、TypeScriptをより魅力的にしています。

 

TypeScriptは新しい言語というよりも、JavaScriptを拡張したスーパーセットです。

すでにJavaScriptを使っている人にとって、TypeScriptの学習は簡単になるでしょう。標準仕様のES6(ECMAScript6)の構文に基づいたコードを使えますが、コンパイラを変える必要はありません。

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。