7つのWeb技術！Webデザイナーやフロントエンドエンジニアが押さえるべき流行をキャッチアップ

近年、インターネットやWebの世界では様々な技術が登場。
Webデザインやフロントエンドにおいても急速に技術が進歩し、複雑でカッコいいホームページをより少ない工程で制作することが可能になりました。

ただし、その反面、Webデザイナーやフロントエンドエンジニアは波に乗り遅れないように、しっかりと流行をキャッチアップすることが求められています。

そこで今回は、Web関係者必須の7つのWeb技術について、解説していきます。
　　

最近Web界隈で流行している7つのWeb技術とは？

1. AMP

AMP(Accelerated Mobile Pages)とは、GoogleとTwitterで共同開発されている、モバイル端末でWebページを高速表示するためのプロジェクトやHTML規格のことです。

Googleはモバイル端末におけるユーザー体験を改善してブラウジングをより快適なものにするために常に模索を続けていました。
AMPによって、コンテンツ以外の余計な部分を読み込むことなく、モバイルに最適化された形でコンテンツを閲覧することができるようになりました。

AMPを適用するには、すでにあるホームページに数行のコードを組み込むだけです。あとはGoogleがAMP用のページとして表示してくれます。

モバイルユーザーは年々増え続け、2017年にはブラウジングの3/4がモバイル端末経由だと言われています。
AMPは動的なサイトには向いていませんが、ブログやニュースサイトのような文章をメインとしたコンテンツの場合は、AMPによって読み込み速度が上がり、エンゲージメント率の向上も期待できます。

参考：AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル｜ferret
　　

2. タスクランナー

あらゆるタスクを自動化すると、今まで時間のかかっていた単純作業が短縮できます。

それを可能にしたのがGruntやGulpといったタスクランナーです。特に後発のGulpは、Gruntよりも短いコードで自動化を行うことができ、作業時間もGruntより早いので、注目を浴びています。

タスクランナーによって単純作業を自動化すれば、自身はクリエイティブな作業に注力することができます。
Gulpを使うことで、SassをCSSにコンパイルしたり、JavaScriptやHTMLなどのコードを圧縮したり、使っていないCSSのクラスやidを取り除いたり、コードを編集した後に自動でブラウザを更新することが可能です。
　　

3. 3Dグラフィックライブラリ

2016年は、WebGLや2D・3DのWebグラフィック関係の技術が発達が際立った一年でした。
仮に、こうした技術に興味があるのであれば、Three.jsやBabylon.js、Away3D.jsのような3Dグラフィックライブラリについて学んでみることをオススメします。

その中でも特にキャッチアップしておきたいのが、Three.jsです。

Three.jsはJavaScriptをベースとしたものの中で、最も定評のある3Dレンダリングエンジンです。
光源と物体を用意して"シーンをカメラで表示する"という一連の作業をJavaScriptでコーディングすることで、3Dの物体を描画することができます。

2016年はVR元年と言われていましたが、2017年はWebの世界に3D技術がますます取り入れられていくでしょう。
Three.jsは基本的にJavaScriptの基本構文がわかって入れば扱うことができます。ぜひ3Dグラフィックにも挑戦してみてください。
　　

4. Webスターターキット

GoogleがWebデベロッパー向けに新たに公開したマルチデバイス用のオールインワンのホームページ作成キットが、Webスターターキットです。

Webスターターキットは単一の機能を提供するのではなく、様々な機能が同梱されています。
レスポンシブ対応のテンプレート、Sassのコンパイラ、JavaScriptやCSSのコードの圧縮、コーディング時のリアルタイムプレビュー、ページスピードインサイトなどがパッケージ化されており、GitHub上でオープンソースとして公開されています。

Webスターターキットは、Webデベロッパーがより大規模なホームページを作成したい時に欲しかった機能が凝縮されています。
こうした機能の多くは、先ほど紹介したGulpのように、ほかの優れた機能を持つソフトやサービスで置き換えることもできますが、制作歴の浅いコーダーやエンジニアにとっては十分過ぎるほどの機能を有しています。
　　

5. Webコンポーネント

Webデザインのプロセスが次第に変わってきています。
画面上で1つずつパーツをデザイン・コーディングしていくのではなく、あらかじめまとまった部品を作り、それを組み合わせて画面を構成していく方法に変わりつつあります。
このようなまとまった部品のことをWebコンポーネントと呼びます。

コンポーネントを組み合わせることで、再利用・カスタマイズ可能な要素を作ることができ、ウィジェットやイメージスライダー、ドロップダウンメニューなど、動的に生成するページ機能も簡単に配置することができます。

例えば、従来はドロップダウンメニューをulタグとCSSを使って再現していましたが、最終的には<dropdown>タグが使えるようになる、といった具合です。

今の段階ではWebコンポーネントは実用レベルで実装されているわけではありませんが、PolymarのようなWebコンポーネント管理ツールを使うことで、課題となっていた部分を克服することができます。
　　

6. Docker

近年、クラウド型のサーバーやストレージが注目されていますが、その一方でコンテナ型仮想環境であるDockerが本格的に普及し始めました。
Docker人気の背景には様々な点が挙げられますが、特に起動時間の速さとメンテナンスの手間が従来より減るほどのシンプルさが人気の理由です。

クラウドサーバー・ストレージでは、仮想サーバーを生成し、ホストOSを起動した上で、それぞれの共有領域にOSを起動していました。そのため、自分が使いたいサービスのOSを起動するのに分単位の起動時間が発生してしまうのです。
一方、コンテナ型仮想環境では、コンテナが切り出されて利用可能になるまでの待ち時間は秒単位です。

こうした「すぐに使える」環境であるという点が、Dockerの強みの1つです。

また、DockerにはDockerfileと呼ばれる設定をコード化したファイルなどが存在し、設定をコードとして明示的に記述することができます。
これにより、メンテナンスを行う時間が短縮され、ミスが減り、変更・管理が容易になります。

様々なクラウドサービスが登場していますが、2017年はこうした仮想環境の選択肢の1つとしてDockerがさらに頭角を現してくることでしょう。
　　

7. モーションライブラリ

微細な動きをつけることでユーザーのホームページからの離脱率を低くするマイクロインタラクションの手法が注目を浴びました。
CSS3やjQueryでも単純なアニメーションを実装することはできますが、よりユニークな動きをするモーションライブラリ(アニメーションライブラリ)を採用することも増えています。

モーションライブラリは、Motion UIやMagic、anime.js、AOSといったプラグインの形で提供されています。

スクロールするごとに目を引くアニメーションが出てくるので、思わずどんどん下にスクロールしてみたくなります。
　　

まとめ

いずれの技術も流行しているとはいえ、登場したものばかりです。どれも画期的なので理解しておく価値はあります。

10年前にiPhoneが登場した時のように、初めは普及するまで時間を要するかもしれませんが、いずれ当たり前にこうした技術を扱う日がやってくるかもしれません。

ぜひ波に乗り遅れないようにしっかりと流行をキャッチアップしていきましょう。