2018年のブログを振り返る

まずは当ブログの2018年を振り返ります。投稿数は、2017年の投稿数「27記事」とほぼ同数で「26記事」でした。だいたい月に2記事ペースで投稿したことになります。ほとんどが技術系の記事でした。

2018年は、当ブログに対してそれなりに大きな改修を行いました。現在の業務の知見を生かしてSPA化しても良いかなと思いましたが、WordPressのブログという性質上あまりやる意義もなく、それでもこのブログで何か新しいことをやってみたいなと思って、Turobolinksを導入することにしました。同時に脱jQueryを行ったり、広告の表示を必要最小限に減らしたりしました。Turbolinksの導入の効果はそこまで期待していませんでしたが、そこそこパフォーマンスの向上に繋がったかな思っています。

ブログのPVは、2018年1月が「約41,000」で、2018年12月が「約56,000」となり、1年間で26記事と少ない投稿数ではありましたが、多くの方に訪問していただきました。ありがとうございます。一番PVの多かった月は2018年10月で「約64,000」でした。

PVの多かった記事TOP10

2018年の1年間でよく読まれた記事TOP10を紹介します。相変わらずCSS系の記事が強くワンツーフィニッシュです。それから2015年、2016年に書いた記事が多く読まれました。つまり、当時よく書いたReact系の記事ということです。さすがにjQuery系の記事は読まれなくなってきています。それから、残念なのは2017年、2018年に書いた記事がなかなかTOP10に入ってこないってことですかね。Angular系の記事も結構書いているんですが、思ったより伸びてきませんでした。

1. scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery） 2017年5月28日
2. CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】 2015年9月20日
3. Atom（GitHub製エディタ）に乗り換えて最初にやっておきたいこと 2015年5月8日
4. 覚えておきたいReactの実装でよく使う基本的な構文（書き方） 2016年11月28日
5. JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法 2012年2月1日
6. Reactチュートリアル: Intro To React【日本語翻訳】 2016年11月02日
7. TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介 2018年8月18日
8. Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説 2016年05月21日
9. 技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 2016年12月11日
10. Nikon D5300を購入、初の一眼レフカメラとして正解だった 2014年10月26日

幸運にもバズった記事

幸運にもバズった記事はVueの記事でした。業務でVueを使ったことはなく、特にVueに精通しているわけでもないのでこれには驚きました。社内の別プロジェクトでVueを使い始めるという話が出てきたときに、社内でVueの会話が普通にできないといけないなと勉強がてら書いた記事でした。若干Angular目線で書いたのが引っかかる要因になったのかなと勝手に思っています。

1. TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介 2018年8月18日

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

Google Search Consoleの「検索パフォーマンス」からのデータです。「typescript」関連のキーワードによる訪問が多かったです。この結果からもTypeScriptの盛り上がり具合がわかりますね。それから、2014年にニコンの一眼レフカメラ「D5300」の記事を投稿しましたが、その記事に対する検索のニーズがまだまだあることに驚いています。

1. react チュートリアル
2. vue typescript
3. react typescript
4. typescript class
5. gulp 使い方
6. tumblr
7. react setstate
8. typescript react
9. ニコン d5300
10. d5300

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

いろいろ抜け漏れがあるかと思いますが、今思いつくままに、2018年のフロントエンドを振り返ってみます。

大きな変化はなかった

2018年のフロントエンド界隈を振り返ると、2017年もそうでしたが、これと言って大きな変化はなかったように思われます（もちろん私の業務や興味のある分野に限った話となります）。かつてのWebpackやReactのようなこれまでの慣習を大きく変えてしまうようなツールなどは現れませんでした。

フロントエンド周りの技術で言うと、HTML 5.3の勧告はありませんでした。ECMAScript 2018（ES2018）はリリースされましたが、目立ったものはPromiseのFinally対応やObjectへのスプレッド構文対応くらいでした。CSS 4は全くの動きなしでした。それから2018年はPWA（Progressive Web Apps）が来ると思っていましたが、こちらもSafariの微妙なService Workerの実装（プッシュ通知が使えない）で、ネイティブアプリを脅かすほどの盛り上がりとはなりませんでした。完全にフロントエンドの世界はいわば成熟期に入ってしまったような感じがします。

Vueの勢いが凄かった

そうした状況の中で、やはり「Vue.js」の勢いがなんとなく外から見ていて目立っていました。2017年からその勢いは強くなっていましたが、確実にフロントエンドの世界でその地位を確立したように思います。特に、これまでjQueryで実装していた静的サイトのインタラクティブなUIや、Nuxt.jsを使ったサーバーサイドレンダリングなどでVueが当たり前のように使われるようになった印象です。逆にSPA（Single Page Application）案件は従来通りReactやAngularが使われることが多く、うまく棲み分けができてきたんじゃないかなと思っています。なので、お互いフロントエンドエンジニアを名乗っていたとしても、私は完全にSPA案件の方の人間なので、話が噛み合わないという状況によく遭遇しました。この傾向は今後もしばらくは続いていきそうです。

TypeScriptがいよいよ定着し始めた

それから、Vueと同じく強い勢いを感じたのは「TypeScript」です。AngularやReactの登場とともに、フロントエンドの開発でも静的型付けの習慣が根付いてきていて、それはAngularにおけるTypeScript、ReactにおけるFlowというようにフレームワークの世界から定着し始めました。2017年くらいから、TypeScriptがじわじわと独り立ちし始め、フレームワークの枠に留まらずフロントエンド開発の様々なところで使われるようになりましたが、依然としてReactで使われるFlowの存在も無視できるものではありませんでした。

それが2018年に入ると、ReactでもTypeScriptを使うというように空気が一変し、それとともにFlowの影が一気に薄くなったような気がします。Vueでも公式でTypeScriptのサポートを行うなど、もはやTypeScriptは型マニアだけのものではなくなり、フロントエンドの開発に欠かせないものとなったんじゃないでしょうか。昨年は待望のメジャーバージョンとなるTypeScript 3.0もリリースされました。また、GitHubの2018年の上位プログラミング言語（コントリビュータ数）ランキングの結果を見てもわかるように、TypeScriptは7位に入るほどの人気プログラミング言語へと成長を続けています。

進化を続けたReact & 安定を維持したAngular

メジャーリリースはなかったものの、Reactは2018年も走り続けた印象です。2018年3月のReact v16.3から2018年の12月のReact v16.7まで複数のマイナーリリースが行われました。マイナーリリースではありましたが、新しいライフサイクルメソッド、新しいContex API、新しいRef API、StrictMode Component、Pointerイベント、React.lazy、React.memoなど次から次へと新しい機能が追加されました。そして2018年10月に発表された次期Reactに追加される「React Hooks」は大きな衝撃を与えてくれました。エコシステムでも、Create React App 2のリリース、styled-componentsやGatsbyの定番化など話題には事足りませんでした。

そんな進化の激しかったReactに対して、Angularはだいぶ落ち着いていた印象です。2018年5月のAngular 6、2018年10月のAngular 7と2度のメジャーリリースこそあったものの、リリース内容は驚くほどシンプルなものでした。Angular CLIやAngular Materialの改善、バージョンや開発環境の整理、パフォーマンスの向上、サポート関連の充実化などフレームワークの進化というよりは、Angularをより多くの開発者に使ってもらえるような施策に関するものが多かったように思われます。それだけフレームワーク自体は完成形に近づいているとも言えますが、これだけReactやVueの影に隠れつつある状況の中で、話題となるようなリリースがなかったのはちょっと残念に思いました（特にAngular 7）。なお、個人的にはAngular Elementsの対応や、FirebaseのAngular公式ライブラリAngularFireのリリースなどは嬉しい内容でした。

2019年のフロントエンド

今思いつくままに、2019年のフロントエンドを展望してみたいと思います。

TypeScriptの時代到来

上でも述べたように2018年はフロントエンドに限って言えばTypeScriptがアーリーマジョリティあたりまで定着した年でもありました。2019年もその勢いが続いていくのは必至です。正直、TypeScriptがどこまで普及してしまうのか予想もできないほどです。AngularはもともとTypeScriptで書くものですが、ReactやVueでもTypeScriptで書くのが当たり前になるんじゃないでしょうか。そればかりじゃなく、簡単なUIの実装であれば、stencilやPREACTのような軽量なコンパイラを使ってTypeScriptでただただJSXを書くスタイルというのも定着し始めて、普通にJavaScriptで何かを書くという機会はだいぶ減っていくはずです。

ちょうど「deno」というV8エンジンでTypeScriptのコードを実行するためのランタイムが話題になり始めています。これはTypeScriptをそのまま（トランスパイルせずに）実行してくれるツールです。このような類のツールが普及し始めると、TypeScriptはJavaScriptのスーパーセットという位置付けから、単独のプログラミング言語というイメージが強くなるんじゃないでしょうか。この1年でTypeScriptがどれほどの存在となるのか目が離せません。

3大フレームワークに大きなアップデート

いわゆる3大フレームワークと呼ばれているAngular、React、Vueは今年大きなアップデートを控えています。Angularは今年Angular 8と9のリリースが予定されていて、そのどちらかで待望の「Ivy」がリリースされるんじゃないかと思っています（リリース時期は未定）。IvyはAngularの新しいビューエンジンとして開発されていて、「Smaller, Faster, Simpler」というキャッチフレーズの通り、Ivyを使うとコンパイル速度はより短縮され、ビルドサイズはより小さくなると言われています。ng-japanで実際の開発者の基調講演で聞いた話だと、Angular 6でビルドした36KBのHello Worldのアプリが、Ivyを使うと2.6KBにもなるらしいです。こんな話を聞いたら、誰だってAngularに興味を持つはずです。Ivyのリリースは、Angularの人気向上の起爆剤となりうる大きなアップデートとなるでしょう。

Reactは、引き続きv16系のマイナーバージョンアップが続く予定となっていますが、「React Hooks」が早くも2019年のQ1でリリースされる予定です。React HooksはこれまでStatelessだったFunction Componentでもstateを扱えるようにする仕組みです。これによりClass Componentが不要となり、完全に関数だけの世界が実現されます。Reactの考え方はそのまま引き継ぐものの、そのスタイルは大きく変わることになります。もちろん引き続きClass Componentは使い続けることはできるので従来のスタイルで書けなくなるということはありません。　しかし、React Hooksがリリースされたら、多くのReactユーザーはReact Hooksに飛びつくことは必至で、2019年は大きくReactが変わる転換期となりそうです。

Vueは、待望のVue 3.0が今年中にリリースされると言われています（リリース時期は未定）。そして、注目すべきことは、そのVue 3.0がTypeScriptで書き直されているということです。とは言え、引き続きVue 2系との互換性は保たれるようですが、やはり多くのVueユーザーはTypeScriptで書くようになるはずです。2019年はVueの世界でもTypeScriptで書くことが当たり前となる転換期となりそうです。

フロントエンドの領域拡大

Angular、React、Vueなどのフレームワークが浸透し、もはやこれらのフレームワークが使えるというだけでチヤホヤされる時代は終わったと思います。すでに複数のフレームワークを使いこなすことが当たり前のようになってきていますし、今後は状況に応じてそれぞれのフレームワークの特性を活かして使い分けていけるエンジニアが望まれるようになるでしょう。従ってReactが一番だとか言ってひとつのフレームワークに固執するのは危険かなと思っています。

そしてこれはエンジニアとしての原点だとは思いますが、問題を解決する突破力や物事を推し進める実行力など自力のあるエンジニア像が今まで以上に求められてくることでしょう。というのも、やれDockerだの、やれサーバーレスだの、やれCI/CDだの、やれアーキテクチャだのフロントエンドエンジニアが扱う領域が拡大してきているからです。しかもそれぞれを習得するための難易度は高くなってきています。2019年は、まさにそうした新しい領域に立ち向かわなければならない場面がこれまで以上に増えてくるんじゃないかと予想しています。

大穴で「Flutter」が来るかも

最後に2019年に流行りそうなものを予想しておきます。ズバリ「Flutter」です。FlutterはGoogle製の「Dartで書いたひとつのコードベースからiOSとAndroidのネイティブアプリをビルドしてくれるSDK」で、2018年12月に初のメジャーバージョンとなる「Flutter 1.0」がリリースされ、まさに今が旬と言えるツールです。しかも驚くべきことに、FlutterのGitHubスター数はすでに「51,298」となっています（2019年1月24日現在）。React Nativeのスター数が現在「73,156」なので、まだまだ歴史の浅いFlutterのスター数は驚異的だと思います。そういうところを鑑みると、2019年爆発的に普及してもおかしくないと考えています。

まとめ – 2019年の私

以上、フロントエンドの2018年を振り返り、2019年の展望を思いつくままに書いてみました。まさにJavaScriptからTypeScriptへの転換期が今来ていると言ったところでしょうか。ただ、予想できないのがフロントエンドの世界でもあります。今年もワクワクさせてくれる話題がたくさん増えると良いですね。

2018年のGitHubのコントリビュート数は以下の通り「609」でした。昨年はReactを中心に勉強のためのサンプルをたくさん作りました。Elm、Flutter、Firebaseなど自分にとって新しいことにも手を出してみました。それなりに参考になりそうな簡単なサンプルをアップしているので、ぜひGitHubアカウントをフォローしてもらえると嬉しいです。

最後に私の2019年ですが、引き続きAngularがメインとなります。昨年同様業務でAnuglarをやりつつ、ReactやVueのキャッチアップを続けることになりますかね。それから新しいこととしてFirebaseを使ったFlutterやReactNativeでのネイティブアプリ開発の知見を貯めていきたいですね。それからdenoにはかなり期待しているので、常に新しい情報を追っていくようにしたいと思っています。

昨年は英語を学びにフィリピンのセブ島に語学留学しました。そんな感じで英語にもやる気を見せています。当ブログでも翻訳記事を書いたりしていますが、昨年はAngularやMDNの公式ドキュメントを翻訳したりしました。今年はさらに英語で活動できる場を増やしていきたいと考えています。

ブログの方も投稿数はおそらく少ないと思いますが細々と続けていくつもりです。UIの改良なんかも行っていきたいと考えています。今年もこの「maesblog」をよろしくお願いいたします。何か記事などに対してご要望などあれば、コメントください。