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

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

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

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

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

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

1. Web Components

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

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

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

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

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

Web Components

2. Polymer

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

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

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

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

Polymer

3. AMP

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

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

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

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

AMP

4. Gulp

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

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

Gulp

5. TypeScript

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

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

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

JavaScriptの次の段階に進みたい人は、TypeScriptを試す価値があります。一度ワークフローに慣れたら、あなたのスキルセットの中で最も強力なツールになるはずです。

TypeScript

6. Three.js

WebGL、2D・3Dグラフィックスに興味があれば、Three.jsについて知っておくべきです。これはWebグラフィックスに使えます。

2D・3Dグラフィックスを必要とするWebサイトは、現在はほとんどありませんが、今後増えてくることが予想されます。

Three.jsは、canvas要素、データ図表などを作成するのに最高なJavaScriptライブラリの1つです。

Three.jsの最も良い所は、無料でかつオープンソースであるため、WebGLのAPIに合わせて継続的に改良が加えられていることです。

Three.js

7. Docker

Dockerなどのコンテナ管理のためのプラットフォームは完全な仮想環境を構築して、Webサイトを別のサーバーへ簡単に移動させることができます。

Dockerは、開発サイクル全体を根本から変えることができる数少ない開発プラットフォームの1つです。1つのサーバーから別のサーバーへファイルを簡単に移動するための環境が提供されます。

DevOpsのエンジニアには必須の技術でしょう。Dockerは最近人気が高まっていて、オンライン上で役立つガイドも数多く見つけることができます。

Docker

8. Ionic Framework

Ionic Frameworkは、Web開発には向かないフレームワークだと思います。Ionic Frameworkは、HTML、CSS、JavaScriptなどの言語でネイティブアプリを開発するWebエンジニアを対象としています。

Ionicは、iOSとAndroid端末のためのネイティブモバイルアプリ開発に使える、無料のフレームワークです。

JavaScriptなどのWebフレンドリーなコードでアプリを開発できますが、最終的には、SwiftとJavaで開発したような外観に仕上がります。

Webエンジニアがネイティブアプリエンジニアの世界に移ることはほとんどないため、Ionicは貴重な選択肢でしょう。

lonicがネイティブアプリを作成するWebエンジニアにとっての「標準」になるのかどうかについて結論を下すのは尚早です。しかし、lonicはすでに1.3版まで公開されていて、これまでのところ、IonicはWebコミュニティから多くの支持を集めています。

Ionic Framework

9. Zurb’s Libraries

私は数年来のZurbの大ファンであり、ZurbのフレームワークFoundationは信じられないほど強力なツールです。Foundationの最新版では、HTMLメールの開発におけるテンプレートや自動化の機能を備えたFoundation for Emailsと、Web用フレームワークFoundation for Sitesを分離しています。

ZurbのMotion UIは、Webアニメーションの作成に役立つライブラリです。

Zurbのオープンソースのツールはどれも素晴らしく、開発チームによって改良の努力が重ねられています。Zurbの開発ラボが公開したものは、私は何でもおすすめします。

Foundation for Emails
Motion UI

10. Google Web Starter Kit

Googleのチームはエンジニアのための便利なリソースを数多く公開していて、Web Starter Kitはその中でもあまり知られていないツールの1つです。

これは特定の機能に特化したツールではなく、レスポンシブなWebサイト、Sass・CSSモジュール、ローカルHTTPサーバー、ブラウザのリロード機能、コードリント（ソースコードのバグなどをチェックするプログラム）などを構築するのに役立つリソース群のライブラリです。しかも完全に無料です。

さらに、多くのツールは「初心者レベル」をはるかに超えた機能を備えています。したがってスターターキットと呼ばれていますが、実際にはエンジニアの経験レベルに関係なく、新規のWebプロジェクトを開始するにあたっては非常に便利なツール群です。

Google Web Starter Kit

まとめ

2016年注目の一つとなったAMPやますます便利になっているJavaScriptのライブラリなど、常に技術のトレンドは変わっています。

ぜひ自分たちが運営しているサービスの開発に役立つ技術やツールを取り入れてみてください。

TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。

過去に独学で始めてみたけど挫折してしまった人でも、現役のエンジニアやデザイナーの元でサポートを受けながら進めることができます。その場ですぐ聞けるので、つまずくことなく習得できるはずです。