Web系エンジニアとしてのスキルポートフォリオをWeb Developer Roadmap2019でチェックしてみる【フロントエンド編】

はじめに

最近、日々の学習の成果や転職の際の履歴書代わりにポートフォリオを作るのが流行っていますね。

今現在自分が保持するスキルセットを明確に把握するのは安心感や向上心に繋がり、今後やるべきことが見えて来たりします。

ただざっくばらんに状況把握をし始めると、もっと細かい技術要素レベルで自分が時代にキャッチアップ出来てるのか知りたくなってきますよね。

「Web開発者ロードマップ2019」という素晴らしい資料をKamran Ahmedさんという方が作成してgithubに上げてくれているので、これに沿って自分の保持スキルや学習すべきことを確認していきたいと思います。

Thank you for making a gread roadmap, Mr. Kamran.

ロードマップ

青い実線に沿って進んでいき、破線から技術をチョイスする形式になっています。

チェック時のルール

• 青い実線に沿って進んでいき、破線の選択肢から経験済みのものに〇を付ける。
• 仕事で使ったことがなくても勉強してある程度理解しているものは〇してOK。
• 載っている技術要素だけを対象にする。

チェック開始

１．HTML、CSS、Basics of JavaScript

HTML

• 〇 基礎学習
• 〇 セマンティックHTML
• 〇 基礎SEO
• 〇 アクセシビリティ

CSS

• 〇 基礎学習
• 〇 レイアウト作成（Floots、Positioning、Display、Box Model、CSS Grid、Flex Box）
• 　 メディアクエリ
• 　 CSS3仕様学習

Javascript

• 〇 シンタックス、基礎構造
• 〇 DOM操作学習
• 〇 Fetch API、Ajax（XHR）
• 〇 ES6 + Javascriptモジュール
• 〇 ホスティング、イベントバブリング、スコープ、prototype、Shadow DOM、strict、ブラウザ挙動、DNS、HTTP

２．Package Manager

• 〇 npm
• 　 yarn

npmが弱点補強してくれたのでyarnは使わなくなりました。

３．CSS Pre-processors

• 〇 SASS
• 　 PostCSS
• 　 Less

SCSSしか使ったことがありません。CSSは最低限のことだけ知っておくスタイルで知識を付けています。

４．CSS Framework

• 〇 Bootstrap
• 　 Materialize CSS
• 　 Bulma
• 　 Semantic UI

もっぱらAngulrar MaterialかIonicを使っていますがリストに無いです。

５．CSS Architecture

• 　 BEM
• 　 OOCSS
• 　 SMACSS

全滅。今現在はCSSの設計概念まで勉強したことが無いです。CSSフレームワークか、デザイナさん任せな感じです。

６．Build Tools

Linter and Formatters

• 〇 Prettier
• 〇 ESLint
• 〇 JSHint
• 〇 JSLint
• 　 JSCS

JSCS以外は普段使いをしています。というか初見でした、JSCS。

Task Runners

• 〇 npm scripts
• 〇 gulp

gulpは最近めっきり使わなくなり、npmスクリプトオンリーになっています。

Module Bundlers

• 〇 Webpack
• 　 Parcel
• 　 Rollup

Webpack一択です。Parcelの追撃をWebpackが振り切った印象を持ってます。

７．Pick a Framework

• 〇 Angular
• 〇 React.js
• 〇 Vue.js

AngularとVueは仕事ユースです。この三つ巴はいつまで続くんでしょうね。

８．CSS in JS

• 　 Styled Components
• 　 CSS Modules
• 　 Emotion
• 　 Glamorous

またもや全滅・・・。リストされているものは全部初見でした。専業デザイナーさんだったら使うんでしょうか。存在を知れただけで良しとします。

９．Testing your Apps

• 〇 Jest
• 　 Enzyme
• 　 Cypress
• 　 Mocha
• 　 Chai
• 　 Ava
• 〇 Jasmine
• 〇 Karma
• 〇 Protractor

Jasmineで書いてKarmaで回す派でしたが最近Jestに手を付けました。

１０．Progressive Web App

• 〇 Storage
• 〇 Web Sockets
• 〇 Service Workers
• 〇 Locations
• 〇 Notifications
• 〇 Device Orientation
• 〇 Payments
• 　 Credentials

PWAの中で使うW3C標準技術。リスト内のCredential Management APIはSafari12ではまだ未実装で実戦投入が厳しい印象です。

１１．Type Checkers

• 〇 TypeScript
• 　 Flow

世の中の流れ的にも選択の余地無しでしょうか。

１２．Server Side Rendering

• 　 Next.js
• 　 After.js
• 〇 Angular Universal
• 〇 Nuxt.js

ReactよりもAngular、Vueの方が使う機会が多いです。好みの問題ですね。

１３．Static Site Generators

• 〇 GatsbyJS

ただNetlifyと共に使い場所が無いんですよね・・・ブログ代替？

１４．Desktop Application

• 〇 Electron
• 　 Proton Native
• 　 Carlo

最近SwingやC#でGUIアプリを作ることがめっきり無くなりました。Webに技術が集約されるあおりはDesktopアプリが最も喰らっていますね。Swingは昔よく使って好きだったので頑張って欲しいです。

１５．Web Assembly

• 〇 （Goで試しに動かしたくらい）

時勢が来たら本気出す感じで。

まとめ

やってみて初見の技術要素名を知るだけで知見がありました。

個人的には普段デザイン関係に力を入れていないのでCSS関連がキャッチアップ以前に基礎が甘いなぁという感じで補強するモチベーションになりました。

2020年版のロードマップはどうなっているんでしょうね。Payment Request API、Web Share API他、HTML5仕様が来年も続々実戦投入されてそれにつれて重要視される技術ファクタも変わってくると思います。今から楽しみです。

karmanさん素晴らしいロードマップをありがとう。次回はサーバサイド編です。