こんにちは、株式会社ICSインタラクションデザイナー／Schoo講師の鹿野といいます。
本記事では、この1年で執筆したフロントエンド関連の技術記事の中で、PV数・SNSのシェア数の観点からとく反響が大きかったものをご紹介します。
CSS3 - Flexbox
Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA
floatプロパティよりも簡潔なコードでボックスの豊富なレイアウトが可能になる「Flexbox」が注目を集めています。この記事ではWebページの作成を通してFlexboxの特徴と使い方について解説しています。 889はてなブックマーク。
Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
Flexboxとfloatプロパティをパフォーマンスの面から比較した記事。Windows、macOSの各種ブラウザについて比較検討しました。 114はてなブックマーク
たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版 - Qiita
Webコンテンツ制作でよくある上下中央揃えについて、Flexboxを使ってわずか4行で実現する方法を紹介しした記事。258いいね(Qiita)。
HTML5 - レスポンシブイメージ
レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA
2016年11月2日にHTML 5.1が勧告されましたが、その中でも注目の新機能が「レスポンシブイメージ」。レスポンシブなwebデザインにおいて、CSSもJavaScriptも使わず画像を最適に取り扱える技術です。482はてなブックマーク。
HTML 5.1の新要素picture入門 - Qiita
レスポンシブイメージの技術の1つであるpicture要素について、Qiitaで取り上げた記事。90いいね(Qiita)。
JavaScript
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶） - Qiita
jQueryではAJAX通信を行うために$.ajax()を用いますが、その際にsuccessはerrorを使うのは、見通しの悪い古い記法です。この記事で紹介している新しい記法に移行しましょう。228いいね(Qiita)。
TypeScript
TypeScript 2.0時代の型定義ファイルの取り扱い方 - Qiita
2016/9/23に、Microsoft社製のAltJS「TypeScript」の最新バージョン2.0がリリースされました。2.0からnpmのみで扱えるようになった型定義ファイルについての紹介です。144いいね（Qiita）。
GitHub
2016年新機能! GitHubのmasterブランチをWebページとして公開する手順 - Qiita
GitHubでは元々webページを公開できる機能がありましたが、2016/8/18のアップデートにより、masterブランチのみで効率的にwebページを公開できるようになりました。その具体的な設定手順について紹介しています。773いいね(Qiita)、195はてなブックマーク。
GitHubでタスク管理ができる新機能「Project」超入門 - Qiita
2016/9/15、GitHub上でタスク管理ができる「Project」機能が発表されました。タスクリストの作成例を通して、Projectの具体的な設定方法について紹介します。117いいね。
Bootstrap
5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜 - Qiita
Twitter社製の人気のUIフレームワーク「Bootstrap」最新バージョン4の入門記事として、HTMLコーディングのみでタブを作る方法を紹介しました。 93いいね(Qiita)。
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita
Bootstrap 4を通してレスポンシブWebデザインの基本について学ぶ記事です。 89いいね(Qiita)。
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4を使う腕、CSSよりも効率的なSassを使った方法を紹介。 82いいね(Qiita)。
ツール
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定 - Qiita
CSSをコーディングする上で避けては通れないベンダープレフィックスを、自動的に記述できるPostCSSの技術「Autoprefixer」についての紹介です。128いいね(Qiita)。
Webサイト制作に役立つイマドキのアセット作成ツール！ 5分でわかるwebpack入門 - ICS MEDIA
Webサイトで必要なあらゆるファイル（アセット）を最適な形に作り変える「webpack」が今注目を集めています。SNSのシェア数は少なかったものの、定期的な検索流入のある記事です。
Adobe MAX 2016レポート
Adobe MAXで発表された新技術が凄すぎて会場は狂喜乱舞に！アドビの本気を垣間見る11の革新的なテクノロジー - ICS MEDIA
ICS池田との共著。Adobeのクリエイティビティカンファレンス「Adobe MAX 2016」のため、アメリカのサンディエゴまで取材にいきました。その中でで発表された、Adobeが開発中の新技術についての紹介記事です。金曜夜公開ということもあり、129はてなブックマークとブクマ数はそこまでありませんが、ありがたいことに各インフルエンサーの方がこの記事を話題にしてくださり、高いPV数となっています。
Swift
Webエンジニアに知ってほしいSwiftのスゴいところ5選 - Qiita
iOS・macOSアプリを開発する上で必要な言語「Swift」を、web開発言語と比較した記事です。89いいね。
フロントエンドのトレンド
これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー - Qiita
「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」について、将来性・人気の面からどれを選ぶべきなのか？ を検討した記事です。 662いいね(Qiita)。
最後に
最高のインプットはアウトプットです。技術記事を執筆する度、自分自身が一番勉強になっていることを感じます。2017年も積極的に執筆や登壇をしますので、TwitterやQiitaでぜひフォローしてみてください。
また、ここで紹介した記事以外にもさまざまな記事を書いていますのでよろしければご覧くださいませ。
- ICS MEDIA : https://ics.media/entry/author/kano
- Qiita : http://qiita.com/tonkotsuboy_com