フロントエンドスキル一覧
フロントエンド開発をする上で必要な基本的なスキル一覧です。
HTMLの基本的なタグ
| スキル | 説明 |
|---|
| html | 文章のルート |
| head | 文章のヘッダ |
| meta | 文章の情報 |
| meta charset | 文章の文字コード |
| meta viewport | 文章の表示領域 |
| title | 文章のタイトル |
| link | スタイルシートなどを読み込む |
| script | JavaScriptなどを読み込む |
| body | 文章の本体 |
| h1 - h6 | 見出し |
| div | ブロック要素 |
| span | インライン要素 |
| p | 段落 |
| br | 改行 |
| ol, ul, li | リスト |
| table, tr, th, td | 表 |
| img | 画像表示 |
| a | リンク |
| form, input | フォーム |
| button | ボタン |
| select, option | 選択 |
| textarea | 複数行の入力 |
| pre | 整形済みテキスト |
| code | ソースコード |
CSSの基本的なプロパティ
| スキル | 説明 |
|---|
| CSS selector | HTMLの要素を選択する |
| position | 配置方法 |
| top, left, bottom, right | 配置位置 |
| margin, padding | 余白 |
| height, width | 要素の大きさ |
| display | 要素の表示形式 |
| border | 枠 |
| border-radius | 四隅の丸み |
| color, font-size, font-weight | フォント |
| background-color | 背景色 |
| opacity | 透明度 |
| flexbox | フレックスボックス |
| box-sizing: border-box | 要素のサイズの計算方法 |
| box-shadow | 影 |
| filter | グラフィック効果 |
| transition | アニメーション |
| animation | アニメーション |
| media query | 画面サイズによって処理を変更 |
| custom property | 変数定義 |
| calc | プロパティ値を計算 |
Sass
| スキル | 説明 |
|---|
| sassのインストール | sassを使えるようにする |
| scssファイルをコンパイル | scssファイルをcssに変換する |
| ネスト | |
| 変数 | |
| use | |
| mixin | |
| extends | |
| 演算子 | |
| 条件分岐 | |
| ループ | |
JSの基本文法
| スキル | 説明 |
|---|
| 型 | データの種類 |
| 変数 | データを格納 |
| 文 | 値を返さない |
| 式 | 値を返す |
| 演算子 | データに処理を施す |
| 配列 | データの集まり |
| オブジェクト | ラベル付きデータの集まり |
| 参照 | データの別名 |
| 条件分岐 | 処理を分岐する |
ループ(for, for of, for in) | 繰り返し処理 |
| 関数、クロージャ | 処理のまとまり |
ループ(map, filter, flatMap, reduce) | 繰り返し処理 |
| ループ(再帰) | 繰り返し処理 |
| 例外処理 | エラー時の処理 |
| オブジェクト指向(クラス、継承等) | プログラミング手法 |
| Date | 日付クラス |
| Map/Set | データの集まりを扱うクラス |
| JSON | JSONの処理 |
| 非同期処理 | 主にIO処理 |
| 正規表現 | 文字列処理 |
JSのその他のスキル
| スキル | 説明 |
|---|
| DOM操作 | 要素を操作するAPI |
| イベント処理 | イベントを処理するAPI |
| Local Storage | ブラウザにデータを保存する |
| REST API | HTTP経由でデータを取得するAPI |
| node/npm | JSの実行環境 |
| webpack | バンドラー |
| React | UIライブラリ |
| ユニットテスト | 単体テスト |
TypeScript
| スキル | 説明 |
|---|
| tscのインストール | TSのコンパイラを使えるようにする |
| TSファイルをコンパイルする | TSファイルをJSファイルに変換する |
| primitive型 | primitive型の表現 |
| 配列型 | 配列型の表現 |
| オブジェクト型 | オブジェクト型の表現 |
| any, unknown型 | 任意、不明な型の表現 |
| 変数の型 | 変数に型を付ける |
| ジェネリクス | 型パラメータ |
| 関数の型 | 関数の型の表現 |
| 型エイリアス | 型の別名 |
| union型 | 型の和 |
| interface | データの雛形 |
| class | クラスの表現 |
| リテラル型 | primitiveより具体的な型 |
| 条件付き型 | 条件によって型を変える |
Linuxの基本コマンド
| スキル | 説明 |
|---|
| pwd | 現在地を表示 |
| ls | ファイル一覧 |
| mkdir | ディレクトリ作成 |
| cd | ディレクトリ変更 |
| mv | ファイル移動 |
| cp | ファイルコピー |
| rm | ファイル削除 |
| touch | ファイル作成 |
| sudo | 管理者権限で実行 |
| which | コマンドのパスを表示 |
| cat | ファイルの中身を出力 |
| more/less | ファイルの中身を見る |
| head, tail | ファイルの一部を出力 |
| grep | ファイル内を検索 |
| sed | ファイル編集 |
| awk | 行単位のテキスト処理 |
| wget, curl | HTTP経由でデータ取得 |
| ln | シンボリックリンク作成 |
| find | ファイル検索 |
| jq | JSON処理 |
| 環境変数 | シェルの変数 |
| パイプ | コマンドを繋げる |
| レダイレクト | 入出力の向きを変更する |
| ループ | 処理を繰り返す |
HTTPプロトコル
| スキル | 説明 |
|---|
| HTTPサーバー | クライアントからリクエストを受け取りレスポンスを返す |
| HTTPクライアント | サーバにリクエストを送りレスポンスを受け取る |
| HTTPステータスコード | レスポンスの状態 |
| HTTPヘッダー | HTTP通信のメタデータ |
| HTTPメソッド | HTTP通信の種類 |
| HTTPボディ | HTTP通信のデータ |
| クエリストリング | リクエストパラメータ |
| クッキー | ブラウザに保存する情報 |
セキュリティ
| スキル | 説明 |
|---|
| CORS | ドメイン間データ共有 |
| HTTPS | 暗号化されたHTTP通信 |
| 証明書 | サーバの身元を証明する |
| 公開鍵暗号 | 暗号化の種類 |
| Basic認証 | 簡易認証 |
| セッション | リクエスト間のデータ共有 |
| OAuth2 | 認可手法 |
| Open ID Connect | トークンによる認証方式 |
ネットワーク
| スキル | 説明 |
|---|
| TCP通信 | 通信プロトコルの一種 |
| DNS | ドメイン管理システム |
| ssh, scp | リモート通信 |
Git/GitHub
| スキル | 説明 |
|---|
| init | リポジトリを新規作成する |
| clone | リモートリポジトリを取得する |
| add | リポジトリにステージする |
| commit | リポジトリに変更を適用する |
| push | リモートリポジトリに変更を適用する |
| pull | リモートリポジトリから変更を取得する |
| merge | 別のブランチを統合する |
| branch | ブランチを操作する |
| checkout | ブランチを切り替える |
| プルリクエスト | リポジトリの変更を通知する |
Dockerの基本コマンド
| スキル | 説明 |
|---|
| build | イメージを作成する |
| run | イメージからコンテナを起動する |
| exec | 起動中のコンテナのコマンドを実行する |
| ps | コンテナの状態を確認する |
| rm | コンテナを削除する |
| rmi | イメージを削除する |