2017年のブログを振り返る

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

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

PVの多かった記事TOP10

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

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

幸運にもバズった記事

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

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

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

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

まとめ – 2018年の私

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

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

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

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