フロントエンド技術を学ぼう 1-3.フロントエンド開発スキル

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第3回はPart I. The Front-End Practiceから、
3項のFront-End Dev Skillsを紹介します。

フロントエンド開発スキルについての説明です。

フロントエンド開発スキル

どのタイプのフロントエンドデベロッパーでも、基礎~上級レベルのHTML、CSS、DOM、JavaScript、HTTP/URL、ブラウザ開発のスキルを持っていることが想定されます。
それらのスキルに加えて、以下に挙げるスキルの内1つ以上に熟練していている可能性があります。

全般系

スキル 説明
Content Management Systems (CMS) コンテンツ管理システムのこと。WordpressDrupalが有名。
Search Engine Optimization (SEO) 検索エンジン最適化のこと。主にGoogle検索で上位表示される為に取る対策のことを指す。
Eコマースシステム ネット上でモノやサービスの販売を行う為のシステムのこと。Amazon楽天などが有名なEコマースサイト。
ポータルサイト インターネットの入り口/玄関となるWEBサイトのこと。GoogleYahoo! JAPANなどが有名。
コンテントストラテジー コンテンツを用いてマーケティングのゴールを達成するための戦略のこと。コンテンツを送り届けるための戦略とも言い換えられる。

アクセシビリティ系

スキル 説明
アクセシビリティ/WAI-ARIA Web Accessibility Initiativeが策定した、Accessible Rich Internet Applicationsに関する仕様のこと。(W3Cの中で、Webアクセシビリティに関する仕様を検討する部会が策定した、アクセシブルなリッチインターネットアプリケーション)
インタラクション or ユーザインターフェースデザイン 論理的な動作と振るまいを備えた、Webインターフェースのこと。
ユーザエクスペリエンス ユーザーがシステムを使ったときに得られる経験や満足などのこと。
ユーザビリティ 使いやすさのこと。Webにおいては売上や成果などビジネスを左右する。
Progressive Enhancement / Graceful Degradation あらゆるユーザーに対して、基本的な体験ができるようにすること。
セマンティック HTML スクリーンリーダーが認識できるHTMLのこと。ユーザに音声で伝えられる。

デザイン系

スキル 説明
ワイヤーフレーム Webページのレイアウトを定めた、サイト設計図のこと。
CSS レイアウト/グリッド 画面をグリッド(方眼)状に分割し、これを組み合わせて内部の要素の大きさや配置を決定するレイアウトのこと。
レスポンシブWebデザイン 様々なデバイスに対し、外観や操作方法が最適化されたサイトを制作するためのWebデザインのこと。
Scalable Vector Graphics (SVG) XMLベースの2次元ベクターイメージ用の画像形式のこと。XMLベースの為、テキストエディタ等で編集でき、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript等と連携させることもできる。
UIウィジェット GUIのインタフェース部品(UIパーツ)のこと。日時選択用のカレンダーやテキストボックスなど。
チャート/グラフ WebではJavaScriptを使用して、動的にチャート/グラフを生成することができる。
Webフォント Webサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術のこと。
CSSアニメーション サイドからナビゲーションメニューをスライドさせたり、ツールチップを表示したりする場合はCSSを使用する。
JavaScriptアニメーション アニメーションを細かく制御する必要がある場合は、JavaScriptを使用する。

プログラミング系

スキル 説明
関数型プログラミング 複数の式を関数の適用によって組み合わせていくプログラミングスタイルのこと。同じプログラムを一時変数を使わずに関数の再帰呼出しを使い、全体として一つの式として書くことが多い。
オブジェクト指向プログラミング プログラムを手順ではなくて、モノの作成と操作として見る考え方のこと。以下の幾つかの特徴を持つ。
・カプセル化
・継承(クラスベース)
・多態性、多相性
・動的型付け
データフォーマット JSON, XMLなど、データをプログラムが扱いやすいように整形した記述方法のこと。
Node.js JavaScriptをサーバ上で動作させる為のランタイムのこと。
パッケージ管理 npmなど。プログラムを書く時に利用できる便利なパッケージを管理するソフトウェアのこと。
依存管理 PHPのComposerなど。ライブラリの依存関係を解決してくれるソフトウェアのこと。
バージョン管理 GITなど。プログラムのバージョンを管理するアプリケーションのこと。
データAPI Restful APIなど。データを外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。
DOM操作 jQueryなど。ライブラリもしくはJavaScriptのみでDOMを操作すること。
コマンドライン操作/CLI Bashなど。シェルを使用したコマンドライン操作のこと。
シングルページアプリケーション(SPA) 以下の特徴を持つアプリケーションのこと。
・単一ページによるWebアプリケーション
・ページはハッシュの変更や DOM の操作によって切り替わる
・サーバとの通信は Ajax や WebSocket などで行う
タスクランナー、ビルドツール、プロセスオートメーションツール webpack, gulp, gruntなど。Web制作の作業を効率化するための自動化ツールのこと。
XMLHttpRequest(AJAX) Webブラウザ内で非同期通信を行いながらインターフェイスの構築を行う手法のこと。例:スクロールすると自動的に次の画像が読み込まれる。
MVC / MVVM / MVP MV* フレームワークともよばれ、M(モデル)と言う仕組みの部分とV(ビュー)と言う見た目の部分を分けて作成する為のフレームワークのこと。
正規表現 特定の文字列を検索/置換する為に使用できる、文字列のパターンを指定する記法のこと。
Microdata)/マイクロフォーマット HTMLだけでは記述出来ないメタ情報を追記するための記法のこと。アプリケーションから使える意味ある情報をもたらすことが出来る。
アプリケーション・アーキテクチャ アプリケーションにおける、設計思想やシステムの構造のこと。
Modules プログラムをモジュールと呼ばれる単位に分割すること。モジュールの入れ替え、除去、追加を行ってもシステムを崩壊させない設計を意識する。
テンプレート化 HTML、CSS、JavaScript、ディレクトリ構成などを流用できるようにテンプレートに落とし込むこと。
テンプレートエンジン ectなど。HTMLのページテンプレートを作成する為のアプリケーションのこと。
ブラウザDeveloper Tools Chromeデベロッパーツールなど。ブラウザ上で使用できる開発ツールのこと。
ウェブ/ブラウザ セキュリティ Webサイトへの攻撃やブラウザの脆弱性についての知識とその対策のこと。

テスト系

スキル 説明
クロスブラウザテスト 動作対象のブラウザで表示や動作が一定か確認すること。
クロスプラットフォームテスト iOS,Androidなど、対象のプラットフォームで表示や動作が一定か確認すること。
クロスデバイステスト デスクトップ、モバイル、タブレットなど、対象のデバイスで表示や動作が一定か確認すること。
ロードテスト 様々な状況で動作させて期待したとおりに動作するか確認すること。
モバイルWebパフォーマンス モバイルでの使いやすさ、モバイルでの速度などのパフォーマンスを確認すること。
パフォーマンステスト 使いやすさ、速度などのパフォーマンスを確認すること。
コード品質レビュー 仕様に対しどう実現しているかをレビューすること。
コードカバレッジ コード網羅率とも言う。プログラムの全てのコードがテストされた割合のこと。
循環的複雑度 プログラムの複雑度を測るのに使われる測定法のこと。
ユニットテスト 単体テストとも言う。プログラムをユニットという最小限の単位に分割して行う動作確認のこと。
結合テスト 複数のモジュールを組み合わせて行うテストのこと。ユニットテスト後に行う。