maesblog

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

早いもので2017年もあっという間に過ぎ2018年が始まりました。最初の投稿は、このブログとフロントエンドの2017年を振り返り、2018年の展望でも書きたいと思います。今年も当ブログをよろしくお願いいたします。

2017年のブログを振り返る

まずは当ブログmaesblogの2017年を振り返ります。2017年は前半はそこそこのペースで記事を投稿していましたが、9月からピタッと記事の投稿がなくなってしまいました。それは9月に転職したことも関係があるかなと思っています。忙しくなったということではありませんが、記事を書くというより勉強に時間を割くことが多くなりました。結局2017年の記事投稿数は、2016年の32記事より若干少なくなり、27記事となりました。投稿した記事の内容は、ほぼほぼ技術系の記事でした。

ブログのPVの方は、2017年1月が約33,000で、2017年12月が約41,000となり、投稿数は少なかったですが多くの方に訪問していただきました。ありがとうございます。ちなみに、一番多かった月は2017年10月で約45,000でした。

maesblogの2017年のPV推移
maesblogの2017年のPV推移

PVの多かった記事TOP10

2017年によく読まれた記事です。相変わらず昔書いた記事の人気が高いです…。去年もほぼほぼ同じような結果でしたが、いまだに当ブログではjQueryやCSSの記事の人気が高いです。2017年書いた記事はひとつもTOP10に入らないという悲しい結果でした。あまり読まれる記事を書けていないということですかね。こうなったら2018年はCSSの記事を多めに書いていこうかなと思います。

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

幸運にもバズった記事

昨年幸運にもバズった記事はこの記事でした。前の会社で新規事業に携わっていて、会社の意向も強かったのですが、自分がメインで作った記事メディアの紹介記事です。ただ普通にWordPressだけで運営するのは差別化にもならないので、ここぞとばかりに流行りの技術を使いまくったブログでした。このブログは残念なことになくなりました。どんなブログだったかは、この記事を読んで確かめてみてください。

  1. React + Redux + WP REST API + SSRで爆速ブログを作ったので事例として紹介します

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

Google Search Consoleの検索アナリティクスからのデータです。年間のデータが取得できないので、過去3ヶ月のデータを載せておきます。よく読まれた記事とは異なり、「react」「redux」関連のキーワードによる訪問が多かったです。この辺りの記事もまだ需要がありそうです。2018年は引き続きReactに関する記事もたくさん書ければと思います。

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

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

変化は少なかったが二極化がさらに進んだ

JavaScriptのフレームワーク戦争もReactの独り勝ちと行った感じで落ち着き、2017年のフロントエンド界は特に大きな変化はなく緩やかに進んでいったと思っています。2016年はReact vs Angularという構図でしたが、2017年はReactがシェアを大きく広げた1年だったのではないでしょうか。一方向性のデータフローによるコンポーネント指向といった考え方もかなり浸透したきているのを感じます。

一方でいまだにフロントエンドの変化が激しいと嘆いている人たちがいます。完全に二極化が進んだかなとも思っています。2013年ごろからトランスパイルやビルドなどを行うようにJavaScriptの開発手法が変わり始め、さらにはES2015のリリース、SPAの開発技術の発展などフロントエンドの世界は大きく変わりました。これらのパラダイムシフトにうまく乗れた人と、乗り切れず取り残された人たちの差が如実に出始めたのではないかと思います。すでにこうした最近の技術が当たり前になってしまった人たちは今更改めてブログなどに書かなくなってきているのもそれに拍車を書けているのではないかなと思います。jQueryオンリーだった人が、いきなり最近のフロントエンドの開発スタイルを取り入れることが大変な時代になってきたかなと思っています。

その中でもVueが勢いづいた

上記のように2017年のフロントエンド界はそれほど劇的な変化はなかったと思っていますが、そんな中で目立っていたのがVueかなと思っています。特に日本語のドキュメントが整備されているということもあり、日本での盛り上がりは顕著だったと思います。2017年の暮れのQiita主催のアドベントカレンダーでは4つほどカレンダーが作られたのには驚きました。

また、Vueの盛り上がりと共に状態管理のVuexやVueでネイティブアプリが作れるWeexなどについての記事もよく見かけるようになりました。

async/awaitにはお世話になった

それから2017年は、ECMAScript(ES2017 / ES8)がリリースされました。このES2017の目玉機能と言われたのが、async/awaitでした。このasync/awaitの登場により、非同期処理をシンプルに書けるようになりました。私もなにかとこのasync/awaitのお世話になることが多くなりました。

HTML & CSS事情は?

HTMLに関しては、2016年11月1日に勧告されたHTML 5.1から約1年1ヶ月を経て、2017年12月14日にHTML 5.2が勧告されました。HTML 5.2では新たにdialog要素が追加されたり、body要素の中でのstyle要素が許容されたりしました。

CSSに関しては、CSS4がいつ出るの?という状況が続いていますね。2017年も特に大きな変化はなしでした。一つあるとしたら、CSS Grid LayoutがChrome、Firefox、Safariに対応したことでしょうか(IEとEdgeはすでに2017年以前に対応ずみ/ただし仕様がいまいち)。これによりCSS Grid Layoutがモダンブラウザでは普通に使えるものとなりました。

2018年のフロントエンド

hyperapp / mobx / Parcelがくるかな

2018年もそれほど大きな変化はなさそうですが、hyperapp、Mobx、Parcelあたりがスマッシュヒットするのではないかなと思います。

hyperappは昨年の暮れに話題になった新QiitaでReactをやめてhyperappを採用した背景という記事の通り、Qiitaが採用したフロントエンドを構築するためのライブラリです。しかもファイルサイズが1KBと軽量なところも売りの一つのようです。hyperappは簡単に言うと、ReactにReduxの機能を持たせたようなものです。状態管理がよりシンプルに行えるようになっています。ReactとReduxを使った場合、その連携の部分や副作用の記述がコード量も多くなりカオス化しやすい部分でした。hyperappではそのような複雑になりそうな部分を内部で処理するようにし、とにかくシンプルに書けるようになっています。

Mobxも同様に状態管理をシンプルに書けるようにしてくれるものです。hyperapp同様Redux疲れを解決してくれるツールの一つです。アプリの状態をobservableとして管理できるAngularで言うRxJS的なツールです。hyperappと同様Reduxの複雑な副作用の部分をシンプルにしてくれ、さらに大幅にコード量を減らすことができるということで、徐々に注目されてきてるツールです。

ParcelはWebpackやBrowserifyのようなビルドツールです。特徴としては、設定ファイルが必要なくシンプルに使えることです。ビルドツールと言えば現在はWebpackが主流になっていますが、やはり高機能なだけに設定ファイルがカオス化しやすいのが玉に瑕でした。Parcelも上述のhyperappやmobxと同様シンプルがテーマのツールとなっており、2018年はこのように手軽に使えるツールが流行るのではないでしょうかね。

静的型付けがますますマストになる

もうすでになりつつありますが、2018年はJavaScirptでの開発で静的型付けがますますマストになるんじゃないかなと思います。Googleが社内での標準言語にTypeScriptを採用したという話もありましたし、TypeScriptはかなり市民権を得てきています。AngularではTypeScriptで書くのが前提ですし、VueでもTypeScriptへの手厚いサポートがあります。またReactの方では同じFacebookが開発しているということで相性が良いFlowがあったりします。そんな状況なので、2018年はこうした型チェックシステムの導入が当たり前になってくるのではないでしょうか。

いよいよPWAが普及する

いよいよ2018年はPWAが一般的なものになるのではないでしょうか。今年の春にリリース予定のiOS 11.3に搭載されるSafari 11.1に待望のService Workerが実装される予定です。PWA(Progressive Web Apps)は、2015年にGoogleが提唱したネイティブアプリのように動くWebアプリのことです。Service Workerを使うことで、ネイティブアプリの特徴でもあるオフラインでの起動や通知機能をWebアプリに実装できるようになります。すでにChromeには実装済みで、Safariの実装を待つような状態でした。

Service Workerが実装されたSafariがリリースされれば、PWAは普及は爆発的に進むと思います。それと同時にフロントエンドエンジニアの出番も増えるはずです。Service Workerを含め、新しい技術を使う機会が多くなりそうですね。

なんだかんだでReact

昨年はさほど大きな動きがなかったフロントエンドの世界ですが、今年もなんだかんだでReactがさらにその地位を固めていくのではないかなと思っています。Angularは、もうこれ以上盛り上がらないような気がしています。私の現在の仕事はAngularがメインで、日々Angularの情報を追うようにしていますが、最近はこれといってワクワクするような情報がないといった印象です。それに対してReactでは、コンスタントに話題を振りまいてくれました。すでに派生系のツールでも、以下のように充実してきています。

React Native
Reactの作法でネイティブアプリを作るためのツール
React Native for Web
ReactとReact Nativeの作法でWebアプリを作るためのツール
ReactXP
ReactとReact Nativeの作法でクロスプラットフォームアプリを作るためのツール
React VR
ReactとReact Nativeの作法でVRコンテンツを作るためのツール
react-game-kit
ReactとReact Nativeの作法でゲームを作るためのツール
Redux Offline
オフラインアプリ開発用のRedux
razzle
create-react-appのUniversal JavaScriptアプリ版のようなもの
Create React Kotlin App
KotlinでReactアプリを作るためのツール

このようにReactを覚えれば、いろんなものが開発できるようになってきているし、それをサポートするツールも充実してきています。2018年もReactはまだまだ勢いを伸ばしていきそうな気がしています。

まとめ – 2018年の私

以上、フロントエンドの2017年の振り返りと2018年の展望を思いつくままに書いてみました。なんだかんだでReactがスタンダードになっていくとは思いますが、予想できないのがフロントエンドの世界でもあります。ワクワクさせてくれる話題が増えると良いですね。

2017年のGitHubの「草」の状況は以下の通り、ほとんど生やすことができませんでした。逆に言うと、新規事業の開発や転職後の会社では初めてのAngular案件の開発など仕事が充実していたとも言えるかもしれません。今年はもっと草を生やしていきたいですね。

maechabin_github2017

最後に私の2018年は、例年通りフロントエンド周りを追求していく年になりますかね。特にPWAに関しては、いろいろと知見を貯めていければと思っています。それから昨年は3回目の転職をしました。これまで自社サービスの開発がメインでしかやってこなかったのが、今年から初めて客先常駐の仕事をしています。これはこれで結構辛いんですが、これまでの職場とは比較にならないくらい本格的なアジャイル開発の現場であり、その辺はたくさん学べることがあります。また現場が現場だけに、これまでの自社サービス開発では手抜きになりがちだった、設計、ドキュメント、エラーハンドリング、テストなどしっかり対応することが求められます。そんな現場なので、学べることはいろいろと吸収していけそうです。仕事も落ち着いてくると思うので、個人的にも何かサービスを開発したいですね。

ブログの方も投稿数はおそらく少ないと思いますが細々と続けていくつもりです。今年もこのmaesblogをよろしくお願いいたします。

関連記事

コメント

  • 必須

コメント