FREENANCE Ad

Web開発トレンド6選。多様な環境に対応する「Vue.js」に注目

2018 Trends
FREENANCE Ad

「この世で、たったひとつの真実は、変わり続けることだけ」という言葉がありますが、Web開発産業はまさにその言葉通りで、トレンドが常に変わり続けています。

より直感的で、面白くて、魅力的なデザインを求めるユーザーの期待に応えるように、新しいフレームワークやプログラミング言語が誕生しています。

この記事では、2018年のトレンドになるであろうWeb開発デザインを6つ紹介したいと思います。

2018年に注目すべきWeb開発トレンドTOP6

1. Vue.jsがトレンド入り

2014年に開発された『Vue』が、2018年になって非常に人気が出てきました。

企業がサポートして開発された『React』(Facebook)や『Angular』(Google)とは違い、たった一人の開発者によって作られた『Vue.js』は、軽量で動作の早いフレームワークです。

開発者のエバン・ユウは、自身のブログでこう書き綴っています。

「長年開発を続けていたオープンソースのVue.jsを公開しました。MVVMとシンプルなAPIを使ったWebインターフェイス開発のためのライブラリーです。興味がある方はvuejs.orgGitHub repoで詳細を確認してください。

この開発のきっかけやモチベーションはまた別の記事で書きます。今回はただ、初めて行った一からの開発、公開、マーケティングとオープンソースの管理についての投稿です。」

ブログは中国語で書かれていたこともあり、中国で爆発的なトレンドとなりました。

現在では、Expedia、アリババ、任天堂、GitLabなどの大企業でも使われています。

また、『2017年にGitHubで最もアクティブだったプロジェクトトップ10』にも入っています。

Facebookの『React』を抜かして、77Kものスターがついています。

10most forked projects on git
出展 : GitHub

『Vue.js』で作られたプロジェクトは下のサイトで見ることができます。

made with vue.js

2. Javascriptの改良による関数型プログラミング

関数型プログラミングとは、基本的なプログラミングスタイルのひとつで、複数の関数を組み合わせてソフトウェアを開発する方法です。ずっと前から使われてきましたが、2018年には再びトレンド入りしそうです。

状態の共有やミュータブルなデータを避けることができて、オブジェクト指向のプログラミング言語よりも使うのが簡単だと言われています。

Javascriptで開発している人は、プログラムをいくつかの関数に分けるという関数型プログラミングの経験があるかもしれません。

Different code style

最近行われたJavascriptのアップデートによって、関数型プログラミングがさらに使いやすくなりました。

おすすめの関数をいくつか紹介します。

アロー関数は、より短い構文で、メソッドでない関数に最適です。

arrow function

スプレッド演算子で、同じオブジェクトを作ることを防ぐことができます。

object / array spread

async / awaitも便利です。

3. 拡張機能の互換性が改善

ブラウザー拡張機能は、JavaScript、HTMLやCSSで書かれていて、ブラウザーに新しい機能を付け足したり、見た目を変えることができます。『Google Chrome』や『Firefox』などで、ブラウザー拡張機能を使う人は多いことでしょう。

この拡張機能が、2018にはさらなるトレンドになりそうです。

というのも、今までは特定のブラウザーに向けて開発されていましたが、『Firefox』が『Google Chrome』向けの拡張機能をサポートしたり、『Edge』もこれに向けて動いています。

Mozillaの開発者マニュアルでは、クロスブラウザーでの開発を進めていて、WebExtension APIを使って拡張機能を開発することになりました。

拡張機能の互換性を確かめるWebサイトもあるのでぜひ使ってみてください。

Extension Compatibility Tester

4. リアルタイムWebアプリ

リアルタイムWebアプリでは、『WebSockets』を使用してサーバーと通信することで、常に最新の情報を表示できます。

こうすることで、いちいちアプリを開いて最新の情報があるか確認しなくてすみます。

『Node.js』ではすでに使われていますが、最近になって他のプログラミング言語やフレームワークも対応してきています。

驚くことに、サーバー側の作業がほとんどだった『Ruby on Rails』でも、リアルタイムの必要性に迫られ、ActionCableという名前でリアルタイムに対応するようになりました。

5. プログレッシヴWebアプリ

Webアプリでありながら、モバイルアプリのような操作感で使うことができるプログレッシヴWebアプリですが、Googleが力を入れていることで注目を集めています。

今まで主流だった、いかにモバイルアプリをWebサイトに似せるか、という時代は終わり、現在では、成功しているモバイルアプリにWebサイトを似せることでユーザーを増やそう、という流れに変わってきています。

Googleは、プログレッシヴWebアプリをすすめる理由をいくつか提唱しています。

ホーム画面に置くことができる 

Webサイトでありながらアプリのような役割を果たすので、ホーム画面に置いてアプリのように使うことができます。

home screen

ネット接続の良し悪しに関係なく使える

オフラインに対応しているプログレッシヴWebアプリは、ネットに繋がっていなくても機能を使うことができます。

offline mode

ユーザーエンゲージメントの向上

通知機能もあるのでユーザーの注意をより引きやすくなりました。eXtra Electronicsは、これによりユーザーが約4倍もWebサイトに訪れるようになり、サイトに滞在する時間も2倍になりました。

user engagement

乗り換えるユーザーが増加

ハイクオリティーなユーザーエクスペリンスのおかげで、AliExpressは新規ユーザーの乗り換え率が104%増えました。

improved conversions

6. モバイルファーストのWeb開発が大前提に

モバイルユーザーが増えるにつれ、レスポンシブWebデザインは今や必要不可欠なものとなりました。2018年は、いよいよモバイル開発を極めるべき年でしょう。

シンプルに、自分のWebサイトがモバイル機器で表示できるかどうか。そして、どうすればユーザーエクスペリエンスを良くできるのかを考えましょう。

インターネットユーザーの実に80%がスマートフォンを持っていて、毎日使っています。調査によると、平均で1日に5時間もモバイル機器を使っているそうです。

ユーザーが多いモバイル機器市場での成功が、大きな成功の鍵となりそうです。

注意すべきは、ユーザーがスマートフォンを使うときシチュエーションを想像すること。49%は片手で使っています。片手で操作できる範囲、特に親指が届く範囲にボタンを置くなどして、ユーザーフレンドリーなデザインを開発しましょう。

Fitts Law
出展 : Scott Hurff

最後に

Vue.jsという新しいフレームワーク、デザイントレンド、ユーザーからの期待、そしてモバイル開発が、Web開発を日々進歩させています。デザイントレンドやユーザーの期待に敏感になることが、モバイル市場での成功に近付く鍵となるでしょう。

開発する言語に関わらず、2018年はWeb開発者にとって、きっとわくわくする年になることでしょう!

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship