ウェブ制作者におすすめしたい、反響が大きかった私のフロントエンド記事まとめ（2018年編）
こんにちは、ICSの鹿野です。noteに初めて投稿します。
4年前にICSに入社し、ウェブ制作やアプリ開発（主にSPA、ゲーム）を業務で行いつつ、ICS MEDIA、Qiitaで技術発信をしたり、Lynda.comやSchoo、各勉強会でフロントエンドの技術発信を行ってきました。
今回はウェブデザイナー、フロントエンドエンジニア向けに、PV数・SNSのシェア数・将来性の観点からおすすめの技術記事やビデオ授業を紹介します。
CSS
CSSの上下中央揃え方法はいくつもありますが、現在ではFlexboxを使った方法が最も手軽。その手法と他レイアウトの比較を行いました。はてブ440超。
ICS MEDIAにて公開したFlexboxの入門記事。基本的な使い方について解説しています。公開した当初はまだFlexboxの認知度は低かったのですが、今やウェブ制作の現場では必須の技術。はてブ940超、90,000PV。
勉強会DIST.13 「トクするCSS」にて発表したFlexboxのネタ。「知って得するFlexboxの便利機能」と題し、可変幅と固定幅の取り扱い方について解説。アンケート1位。動画もアップしてあります → https://youtu.be/moICBCi3Nyk?t=1h31m5s
老舗オンラインビデオ学習プログラムLynda.comにて、Flexboxを体系的に学べるコースを担当。Flexboxの概要や採用事例から各プロパティの使い方まで、幅広い内容をレッスンごとにコーディングをしながら学べます。
CSS Nite LP54「Coder's High 2017」にて、発表した際の動画とスライド資料。CSS Gridの基本やFlexboxとの使い分けについてステップバイステップで解説しています。アンケートで好評をいただき（13.6点／15点満点）、「CSS Niteベストセッション2017」のベスト・セッション10に選ばれました。
CSSのコードは古い仕様の表記に対応したり、ベンダープレフィックスを付与するケースがあります。自動設定できるAutoprefixerに全て任せましょう。180いいね、30,000PV超。
CSS GridをIE 11向けに対応しようとすると、span系が出力されない・grid-areasが使えないという問題がありますが、Autoprefixerを使うと解決します。100いいね。
デバイスに応じて最適な「大きさ」と「見た目」の画像を、HTMLだけで表示分けできる「レスポンシブイメージ」についての解説記事です。はてブ500超。
当たり前だと思っていたコーディング技術を今一度見直し、時代に即したコーディング技術を紹介した記事。2016年12月の記事ですが、2018年現在でも使えるものばかりです。はてブ1,000超。
JavaScript
2015年6月にECMAScript 2015がリリースされて以降、ES2016, 2017, 2018とJavaScriptは進化を続けています。2017から2018年に向けて筆者が見直したJavaScriptのプログラミング手法について紹介した記事。はてブ470超。
非同期通信のタイムアウトの話です。60,000PV、600いいね、180はてブ。
jQueryでAjaxを使うなら、Promise記法を使いましょうという話。35,000PV、380いいね。
Socket.ioを使って、PCとスマホをペアリングさせたコンテンツづくりの方法です。80はてブ。
JavaScriptのES Modulesについて、import()メソッドにより関数ライクにモジュールをインポートする方法です。
TypeScriptの型定義ファイルの記事。200いいね、18,000PV。
SVG
コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。2017年6月に開催され、250人の申込みがあった「【 ヒカ☆ラボ 】SVGアニメーションで始めるマイクロインタラクション」で扱った内容です。それぞれ80はてブ、110はてブ。
開発環境（webpack、Gulp）
今やフロントエンドでは標準のモジュールバンドラーwebpackの解説記事。190いいね、「webpack」のキーワードでGoogle検索1位。
webpackとGulpの連携方法を解説した記事。220いいね、「Gulp webpack」のキーワードでGoogle検索1位。
ビルドツールGulpの入門記事。インストール方法からSassのコンパイル方法まで紹介します。210はてブ、120,000PV。「Gulp」のキーワードでGoogle検索3位。
オンライン授業SchooでのGulp授業。Gulpの基本、各タスクの書き方、応用的な使い方まで幅広く解説しています。
Gulpの次期バージョン4についての入門記事。「Gulp 4」のキーワードでGoogle検索2位。
ゼロコンフィグ（設定ファイルなし）でのバンドルが特徴のParcelで、TypeScriptをバンドルする方法です。手軽にバンドルとローカルサーバーの起動ができるのでお勧め。
npmを使う上で覚えておきたい、init -y、i、-Dなどのショートカットコマンドの紹介です。100いいね。
ローカルのパッケージの実行に便利なnpxコマンドの紹介です。100いいね、10,000PV。
プロジェクトファイルに存在する各種設定ファイルの内容です。
iOSアプリ開発、Swift
株式会社KADOKAWAが運営するメディア「WPJ」にお声がけいただき連載したSwiftの入門記事。アプリ開発の経験がないウェブ制作者がXcodeの使い方やSwiftの書き方といったiOSアプリ開発の基礎知識を身につけ、簡単なアプリを作れるようになることを目標とします。
ICS MEDIAで公開したSwift入門記事。公開後にアクセスがじわじわ伸び、現在220,000PV（22万PV）。
ウェブ技術とSwiftを比較した記事。SpriteKitを用いてSwiftでパーティクル表現のデモもあります。はてブ470超。
ウェブエンジニアにとって実はSwiftは書きやすいもの。ウェブエンジニアの観点からSwiftのメリットを紹介する記事です。90いいね。
GitHub
GitHubのマスターブランチのみでウェブページを公開する手順です。920いいね、220はてブ、28,000PV。
GitHubで実装されたタスク管理機能（いわゆるカンバン）のProjectについての解説記事。150いいね、14,000PV。
デザイン、エディターなど
Photoshop CC 2015で実装された画像保存方法を紹介しつつ、他の方法との比較を行いました。はてブ560超。
筆者が愛用しているIDE「WebStorm」は、JavaScriptのプログラミングを大きく効率化できます。その厳選テクニックをまとめました。110はてブ。
UIフレームワーク「Bootstrap」の最新4の入門記事。160いいね、43,000PV。
昨年11月に発表されたAdobeの新フォント「貂明朝」にて、絵文字の貂を表示させる方法を紹介しました。
CSSだけでパーティクルを作った話。Compassで書いていますが、Sassのmixinで置き換えれば今でも有効な表現です。220はてブ。
他にもおすすめしたい内容がたくさん
ここに書ききれなかった記事は、こちらから参照できます。どれも全力で書いた記事なので、全ておすすめです。
また、筆者のTwitterアカウントでは、引き続きウェブやアプリの最新情報を発信していきますので、是非チェックしてください。
この記事が気に入ったらサポートをしてみませんか？