Web開発に携わって出てきた用語まとめ

# はじめに
今までWindowsアプリ開発をやってきましたが、Web開発をすることになりました。
Web開発に携わるにあたり覚えておきたい用語、[りあクト！](https://booth.pm/ja/items/2368045) で学んだ単語をまとめてみました。
(Web開発に限定した用語でないものもあります)

# Webアプリ/モバイルページ
## PWA
Progressive Web Appsの略。
モバイル端末でWebページを表示するときにネイティブアプリのような挙動をさせる仕組み。
ページの読み込みが早い、プッシュ通知の受信が可能などUXの向上が期待できる。
Googleが定める要素 [What makes a good Progressive Web App?](https://web.dev/pwa-checklist/) を持つWebサイトをPWAと呼ぶ。
[いまさら聞けないPWAとAMP - Qiita](https://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445)  

## AMP
Accelerated Mobile Pagesの略。
GoogleとTwitterが共同で策定したモバイルページを高速に表示させる手法。
[How AMP works - amp.dev](https://amp.dev/about/how-amp-works/?referrer=ampproject.org)に仕様に沿ってモバイルサイトを構成する。

# UIデザイン
## Material Design
Googleが提供しているアイコンデザイン。
ライセンスは、[Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) のため制限はあまりない。
Webであれば[Google Fonts  |  Google Developers](https://developers.google.com/fonts/) 経由でGoogleWebFontと同様に使用するためのCSSを追加することで簡単に使用できる。
勿論、SVGなどでダウンロードして使用することもできる。
[Icons - Material Design](https://material.io/resources/icons/?style=baseline)  
[Material Icons Guide - Google Design](https://google.github.io/material-design-icons/)  

## Atomic Design
Atoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）と5種類にUIパーツを分けて設計するUIデザイン手法。
クライアントと設計の概念を共有したり、一貫性や拡張性のあるデザインを考えやすくなる。

Atoms（原子）: フォームラベルや入力、ボタンなどのHTMLタグ。色やフォント、アニメーションも含めることが出来る。
Molecules（分子）: 原子を組み合わせて1つの処理が出来るような単位で構築する。例えば、フォームラベルや入力、ボタンを組み合わせて入力フォームにする。
Organisms（有機体）: 分子を組み合わせて形成する。例えば、類似の分子を組み合わせて製品グリッドを、異なる分子を組み合わせてマストヘッド広告を作る。
Templates（テンプレート）: 有機体をつなぎ合わせてページを形成する。デザインやレイアウトが決まる。
Pages（ページ）: テンプレートの特定のインスタンス。実際のコンテンツに置き換わってユーザーに表示するページになる。
[Atomic Design | Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/)  

## Bootstrap 
フロントエンドのコンポーネントライブラリであり、HTML、CSS、JavaScript のフレームワーク。 
特徴として、 レスポンシブデザイン対応（端末ごとの画面に合わせて最適なレイアウトで表示）であり、デザイン性に優れたコンポーネントを提供している。 
Twitter産。 
https://getbootstrap.jp/ 

# ブラウザ
## Opera(オペラ)
古参のブラウザ。
広告のブロックやブラウザでチャットできるなど独自の機能がある。
https://www.opera.com/ja

# セキュリティ
## OAuth
ユーザーの権限の認可を行うための仕組みで、具体的にはユーザーの認証情報であるアクセストークンの要求・応答方法を指す。
データのやり取りをするためのインターフェースであるAPIを守る技術である。

1. クライアントアプリは、認可サーバーへアクセストークンの取得を要求する
2. 認可サーバーは、アクセストークンを作り、クライアントアプリへ渡す
3. クライアントアプリは、認可サーバーから受け取ったアクセストークンを添えてAPIを通してリソースサーバーへデータを要求する
4. リソースサーバーは、受け取ったアクセストークンを検証して権限がある場合のみデータをクライアントアプリへ渡す

読み方は、オーオース。
[一番分かりやすい OAuth の説明 - Qiita](https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be)  
[OAuth 2.0 全フローの図解と動画 - Qiita](https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f)  

## JSON Web Token (JWT)
2者間の属性情報(Claim)のやり取りを目的としたJSONデータ構造で表現したトークン。
特徴は、URL-safe(URLで利用可能な文字のみで構成)であり、署名・暗号化が可能である。
仕様は[RFC 7519 - JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519) に記載されている。  

署名と検証を行う時、HS256で行う場合は、共通の(秘密)鍵を用いて行い、RS256で行う場合は、公開鍵と秘密鍵のペアを用いて行う。

[JSON Web Token（JWT）の紹介とYahoo! JAPANにおけるJWTの活用 - Yahoo! JAPAN Tech Blog](https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/)
[JWT(JSON Web Token)の仕組みと使い方まとめ │ Web備忘録](https://webbibouroku.com/Blog/Article/jwt)
[JSON Web Tokenを完全に理解する - Qiita](https://qiita.com/katamotokosuke/items/0c97f42ecb8207767db2)
[RS256 と HS256 ってなにが違うの - Qiita](https://qiita.com/satour/items/e68afe3de6267cebcfea)  

# JavaScript
## ECMAScript
JavaScriptの標準仕様。
Ecma Internationalという業界団体が定めている。
ES5は、2020/9現在もっとも使われている版。
読み方は、エクマスクリプト。

## Babel
JavaScriptのトランスパイラ。
新しい仕様でJavaScriptやTypeScriptを古い仕様のJavaScriptに変換できる。そのため古いブラウザでも実行可能になる。
JSXではECMAScript2015以降の新しい構文をECMAScript2015構文に変換するのに利用されたりする。
[Babel · The compiler for next generation JavaScript](https://babeljs.io/)  

# npm
JavaScriptのパッケージマネージャー。
npmの公式リポジトリ(npmjs.com)にあるパッケージの管理をする。
バージョン間のバージョン整合も行う。

# yarn
JavaScriptのパッケージマネージャー。
npmよりインストール速度が速く厳密にバージョンを固定出来るのが特徴。
バージョンはyarn.lockファイルに記録されてインストール時に同じバージョンがインストールされる。

以下のコマンドは、yarn installと同意。

```
> yarn
```

npmからyarnへのコマンドの変換はいつも下記のサイト見てます。
[npmとyarnのコマンド早見表 - Qiita](https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8)  


# HTML
HTMLはWebページを記述するマークアップ言語。一方でXMLはデータを記述するマークアップ言語。

## サーバーサイドレンダリング(Sever Side Rendering)
ブラウザとサーバーで共通のロジックを使ってHTMLを構築する方法。
[Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 － Publickey](https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html)  

## DOM
Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイス。
DOM はページをノードとオブジェクトで表現する。そうすることで、プログラミング言語をページに接続することができ、プログラムから文書構造、スタイル、内容を変更することができる。 

DOMは複数のAPIによって構成されている。
今のDOMは特定の言語に依存しないように設計されており、下記のように表現している。
> API = DOM + JavaScript

[DOM の紹介 - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)  

## iframe
HTML のインラインフレーム要素。
現在の HTMLページに別のHTMLを入れ子にすることで他のページを埋め込むことができる。
[<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe)  

# 静的解析/コードフォーマッター
## linter
コードを静的解析してコンパイルではじかれないバグ(構文など)を警告する。
言語によって別々のツールになっている。

### ESLint
JavaScriptやTypeScriptのlinterの1つ。コードフォーマッター機能も備えている。
開発者が独自ルールを作成できるのが特徴。
JavaScriptやTypeScriptのlinterでは、ESLintが最も普及している (2020/10)。
[eslint/eslint: Find and fix problems in your JavaScript code.](https://github.com/eslint/eslint)  

### stylelint
CSSのlinterの1つ。
CSSののlinterでは、最も普及している (2020/10)。
[stylelint/stylelint](https://github.com/stylelint/stylelint)  

## Prettier
フロントエンドのメジャーなコードに対応しているコードフォーマッター。
JavaScriptやTypeScript、HTMLやCSSの他にJSX、FlowなどReact開発やVue、Angularにも対応している。
ESLintと使う場合はプラグインや共有設定などを入れて調整が必要。
ESLintとPrettierの設定が衝突していないかチェックするコマンドがある。
[prettier/prettier: Prettier is an opinionated code formatter.](https://github.com/prettier/prettier)  

# テスト
## E2Eテスト
ユーザーと同じようにブラウザを操作して挙動が期待通りかチェックする。
End to Endテストの略。
UIのテストになるため、テストの実行時間が長い、テストコードが壊れやすい、フィールドバックが遅れがちといった特徴がある。
どのシナリオをテスト対象にするか？フィールドバック方法をどうするか？など検討が必要。
[E2Eテストの導入から学んだこと - Qiita](https://qiita.com/mt0m/items/7e18d8802843d9f60d28)  
### Selenium
Webアプリやブラウザを自動化するUIテストツール。
複数のブラウザ、クラスプラットフォームでテストが出来る。
[SeleniumHQ Browser Automation](https://www.selenium.dev/)  
[WebのUIテスト自動化 - Seleniumを使ってみる - Qiita](https://qiita.com/edo_m18/items/ba7d8a95818e9c0552d9)  

### Puppeteer
DevToolsプロトコルを介してChromeまたはChromiumを制御するための高レベルAPIを提供するNode.jsライブラリ。
と公式にある。
HeadlessでChromeまたはChromiumを動かすことが出来、Webアプリの自動テストが可能。
[puppeteer/puppeteer: Headless Chrome Node.js API](https://github.com/puppeteer/puppeteer)  

ReactでPuppeteerを実行するなら、Justと組み合わせて使う。

## Just
JavaScriptのテスティングフレームワーク。ユニットテストの記述
ReactだけでなくAngularやVueでも動作する。
[Jest · 🃏 Delightful JavaScript Testing](https://jestjs.io/)  
[Testing React Apps · Jest](https://jestjs.io/docs/ja/tutorial-react)  
下記のような便利なオープンソースプロジェクトもある。
[smooth-code/jest-puppeteer: Run your tests using Jest & Puppeteer 🎪✨](https://github.com/smooth-code/jest-puppeteer)  

## スモークテスト
きちんとしたテストが開始する前にソースコードの追加や修正を行ったソフトウェアの基本的な動作を簡易的に確認するテスト。

# バージョン管理
## セマンティックバージョン
>　バージョンナンバーをメジャー/マイナー/パッチと分けるバージョン指定の方針。
以下の場合分けに従って決まったバージョンを上げます。
- APIの変更に互換性のない場合はメジャーバージョン
- 後方互換性があり機能性を追加した場合はマイナーバージョン
- 後方互換性を伴うバグ修正をした場合はパッチバージョン
通常のバージョンナンバーは、X.Y.Zの形式にしなければならない。Xはメジャーバージョン、Yはマイナーバージョン、Zはパッチバージョンを表します。

他の仕様については、 
[セマンティック バージョニング 2.0.0 | Semantic Versioning](https://semver.org/lang/ja/) を参照。