フロントエンドの2016年の振り返りと2017年の展望

あけましておめでとうございます。2017年も当ブログを何卒よろしくお願いいたします。今年初めての投稿なので、このブログとフロントエンドの2016年を振り返り、2017年の展望でも書いたいと思います。

2016年のブログを振り返る

まずは当ブログmaesblogの2016年を振り返ります。2016年も2015年に引き続き毎月1記事以上アップを続けることができました。しかし、2016年の記事投稿数は、2015年の45記事に対して大幅に投稿ペースは落ち、結局31記事となりました。投稿した記事の内容は、ほぼほぼ技術系の記事となりました。

ブログのPVの方は、2016年1月が約28,000で、2016年12月が約33,000となり、と投稿数の割には微妙に成長できたかなと思っています。途中、ありがたいことに記事がバズった月(2016年6月)もありました。その月のPVは約40,000となりました

maesblogの2016のPV推移
maesblogの2016年のPV推移

PVの多かった記事TOP10

2016年によく読まれた記事です。相変わらず昔書いた記事に人気が集まっています。当ブログだけの結果ではありますが、jQueryやCSSの人気はまだ高いということがわかりますね。今年書いた記事で唯一10位以内に入ったのは「Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説」というReduxについて書いた記事でした。この記事は2016年の後半からじわじわと人気が出てきた感じがしています。Reduxも2016年を通してそれなりに普及してきていることがわかりますね。

  1. Atom(GitHub製エディタ)に乗り換えて最初にやっておきたいこと
  2. JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
  3. Nikon D5300を購入、初の一眼レフカメラとして正解だった
  4. CSSでフルスクリーン(全画面) + 縦横中央配置レイアウトを作る【3ステップ + おまけ】
  5. iframe要素のスマホ対応 – CSSとJavaScriptそれぞれのレスポンシブ対応方法
  6. 8ステップで完成!CSS3で「斜めのストライプ」を作る方法
  7. gulpの基本的な使い方(gulp.jsの基礎をしっかり理解する)
  8. 【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
  9. React.jsチュートリアル【日本語翻訳】
  10. Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説

幸運にもバズった記事

ブログを運営する上で記事をバズらせるような施策はしていませんが、バズは突然やってきます。今年バズった記事と言えばこの記事につきますね。2015年も翻訳系の記事がバズりましたが、今年もバズったのは翻訳記事でした。この記事は、Reactを覚えてみようと思わせてくれる良記事です。ぜひ一読ください。

  1. すべてのプログラマーが知っておきたいReactの7つの強み

訪問数の多かった検索キーワード

Google Search Consoleの検索アナリティクスからのデータです。年間のデータが取得できないので、2016年12月のデータを載せておきます。「react」「redux」関連の訪問が多いですね。それから一眼レフカメラ「Nikon D5300」関連もいまだに多いです(すでにD5500、D5600という後継機が出ているにも関わらず…)。

  1. redux
  2. react redux
  3. iframe レスポンシブ
  4. d5300
  5. ニコン d5300
  6. css 斜線
  7. react チュートリアル
  8. gulp 使い方
  9. react tutorial
  10. redux react

2016年のフロントエンドを振り返る

2016年のフロントエンド界は、良くも悪くも大きな変化がなかった1年だったかなという印象です。1年を振り返って見たいと思います。

2強 + Reduxで落ち着いたJSフレームワーク

JavaScriptのフレームワークを見ると、AngularReactの2強が2016年内にそれぞれメジャーバージョンをリリースしたことで、フレームワーク戦争はほぼ終焉したと言っていいでしょう。2016年後半からVueの注目度が高まってきましたが、しばらくはこの2大フレームワークの時代が続くのではないかと見ています。FluxのフレームワークもReduxで落ち着きましたね。自分はFacebook/Flux推しでやってきましたが、さすがにReduxの波には逆らえず、今ではReduxをバリバリ書くようになりました。(Facebook/Fluxの影はだいぶ薄くなりましたね…)

ES2016とHTML 5.1勧告

2015年にこれまでのES5から大きな進化を遂げたES2015が公開されましたが、2016年にはさらに仕様が追加されたES2016が勧告されました。2016年にはES2015やES2016が大きく普及するかなと思っていましたが、自分の感覚ではまだまだ普及仕切っていないなと言ったところです。特にJavaScriptをメインとしていない人たちへの普及は難儀しそうな予感です。それからHTMLも新たにHTML 5.1が勧告されました。

CSSは特に大きな進化はなかった

昨年のブログ記事では、2016年はCSSが大きく進化するだろうと書きました。しかしふたを開けると、自分がCSSのトレンドを追っていなかったということもありますが、2015年の頃と状況は変わらなかったかなという印象です。PostCSSCSSnextの爆発的な普及はまだ見られていないです。CSS4もまだまだ先なんでしょうかね。自分の2016年のCSSのトピックスとしては、SassをRubyのものからNodeのものに切り替えたということくらいでしょうか。

ビルド&タスクランナー系はWebpackに落ち着きそう

自分はbrowserify + npm script派なんですが、周りを見るとWebpackがだいぶ熱くなってきていますね。Reactのドキュメントでもビルドの部分がWebpackを使って説明されていたりします。またRuby on Railsでも次のバージョン5.1からWebpackがサポートされるという話もあります。Webpackが主流になりそうですね。gulpもまだ死んではいないですね。

jQueryはしぶとく生き続けている

2016年は脱jQueryの動きが加速するかなと思っていましたが、現場レベルではまだまだ普通に使われていますね。ただ、jQueryに関する話題はかなり少なくなったと思います。

2017年のフロントエンド

2017年も引き続きAngularとReactの1年になると思っています。そしてそれほど大きな動きはないかなと思います。ただAngularやReactが普及することによって、サーバーサイドもAngularやReactで実装するUniversal JavaScript(Isomorphic)のプロジェクトが増えてくるかなと予想しています。それからES2017に追加される予定のAsync/Await。非同期周りの実装にも変化が出てきそうですね。その他、以下のような動きがあるのではないかと予想しています。

Vueが第三勢力となるか

2016年後半からネット上で話題になり始めたフレームワークのVueが今年はブレイクするかどうか注目ですね。AngularやReactのいいとこ取りということで、AngularやReactに消耗した人の受け皿になっているとのことです。日本語のドキュメントが用意されているのも嬉しいところです。自分も興味はあるので、そろそろ触ってみようと思っているところです。

PWAやAMP対応のWebサイトが増える

PWA(Progressive Web Apps)はGoogleが提唱する「WebとNativeの両方の利点を兼ね備えたモバイルWebアプリ」のことです。インストール不要で使え、オフラインで利用できたり、通知を受け取ることができるようなWebアプリです。PRPL(パープル)といったPWAの開発パターンも提唱されています。SSLやHTTP/2の普及が流行る条件となりますが、開発に挑戦する人は増えるんじゃないでしょうか。それからAMP(Accelerated Mobile Pages)も2016年にGoogleによって提唱されたモバイルWebを高速化させるための技術仕様となりますが、こちらも2017年は対応するページが増えるんじゃないかと見ています。

Web VRが注目される

2017年はWeb VRの仕様が標準化されブラウザに実装される予定です。つまり今年はWeb VR元年と言われています。Oculusでは、VR用の独自ブラウザ「Carmel」とそこで動かすコンテンツを開発するためのReact VRというものを開発しているようです。VRは技術的には面白いですが、一般に普及するかどうかは正直半信半疑な部分も無きにしも非ずです。ただ、やはりReactでVRを開発できるのであれば、ぜひどんなものかトライしてみようと思っています。

2017年の私

このブログでReactに関する記事をよく書いていることもあって2016年はいろいろReactに関することで声をかけていただく機会が多かったです。実現できたものもあれば、できなかったものもあり、良くも悪くもReactに振り回された1年でした。そういう意味でReactに関しては、自分でもよく勉強したと思っています。自分の関わったプロジェクトでも、Reactを採用したりしました。

GitHubの草の状況は以下の通りです。

2017年github(maechabin)の草の状況

個人的には以下のようなものを作りました。

昨年のブログ記事では、Swiftに挑戦してiOSのアプリを作りたいとか書きましたが、結局できませんでした。しかし、React Nativeという選択肢が今はあるので、今年こそはアプリの開発に挑戦したいですね。

それから今年は、昨年からずっと気になっているPythonにも手を出そうと思っています。あとは引き続きReactとReduxを今年もやっていく予定です。昨年からReactとReduxでのSSR案件をやっているので、もっともっとサーバーサイド周りの知見を増やしたいなと思っています。

あとはフロントエンドとは関係ない話ですが、昨年kindleを買いまして、この歳になって小説を読むようになりました。今年は技術書ばかりでなく、小説などもたくさん読んでいきたいと思っています。その辺の話もこのブログで書ければと思っています。

ブログの方は引き続き、マイペースでやっていきます。JavaScriptやReact、Reduxについて何か書いて欲しいことなどあれば、お知らせください。今年もこのmaesblogをよろしくお願いいたします。

コメント一覧

  • 必須

コメント