ホーム / Test /

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

2020年7月22日水曜日

Accessibility Design Front-end Developer Handbook Programming Test

t f B! P L

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

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


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

どのタイプのフロントエンドデベロッパーでも、基礎～上級レベルのHTML、CSS、DOM、JavaScript、HTTP/URL、ブラウザ開発のスキルを持っていることが想定されます。

それらのスキルに加えて、以下に挙げるスキルの内1つ以上に熟練していている可能性があります。


全般系


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


アクセシビリティ系


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

テスト系


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

QooQ