ライブラリ/SPA/Laravel/フォーマッター/スコープについて

# ライブラリ/SPA/Laravel/フォーマッター/スコープについて
学んだことを以下にまとめております。

## ライブラリ
### ライブラリとは
ある機能を持った汎用性の高いプログラムを他のプログラムから利用できるようにした ___プログラムの集合___ のこと。

ライブラリAを使いたいとなれば、それに伴いライブラリBとライブラリCが必要になります。
さらに、ライブラリBはライブラリD（v1.1）とライブラリEが必要で・・・
![library_how_to_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/8b9d2195-e38b-aedf-7dcd-146dea95dac6.png)

というように、際限なくライブラリが紐づいてきたり、バージョンに指定があったり、
<font color="Red">手動ですべてを管理することは不可能に近い。</font>


### パッケージ管理システム

OSというひとつの環境で、各種のソフトウェアの導入と削除、
そしてソフトウェア同士やライブラリとの依存関係を管理するシステム。
管理を自動化し、一括インストールして運用を行うことができる。

このシステム自体は、言語によって異なる。
代表的なものは以下の表の通り。

|言語|システム名|
|:--:|:--:|
|PHP|composer|
|Python|pip|
|java|gradle|
|Node.js|npm、yarn|

Node.jsの管理システムとして、___npmはセット___ でインストールが行われる。
しかし、特に指定がないのであれば、<font color="Red">yarnを使用する方が ___パフォーマンスが高い___ ことが多い。</font>

### package.json

一括でインストールしたいパッケージ一覧を設定する。
おおまかなバージョンの指定などは、このファイルで行う。

### yarn.lock

一括でインストールが行われた後、
どこからどのバージョンをインストールしてきたかを記載されている。

### node_modules

インストールしてきたパッケージがあくまで ___仮置場として___ 格納されているディレクトリ。
膨大なデータであり、<font color="Red">___Gitの監視下から外すのが定石___</font>である。

※その代わりに、yarn.lockを監視することで、把握することができる。

### .gitignore

.（ドット）で始まるファイルは基本的に ___何かの設定ファイル___ であることが多く、
隠しファイルとなっている。

ここに指定することで、指定にパターンマッチングするものをGitの監視下から外すことができる。

#### Gitの監視下に置かないディレクトリの例
- node_modules
- .DS_Store（Mac）
- .env（環境設定ファイル）
主に、認証情報などのユーザ情報から、環境による設定など

## SPA（Single Page Application）
通常であれば、リクエストの度にすべてのHTMLをレスポンスし、ページ遷移が発生する。
この場合、一部を変化させたいだけであれば、___非常に無駄が多くなる。___

この無駄を減らし、<font color="Red">ページ遷移を行わずに変更箇所だけに変化を起こして表示する</font>のが、
SPAで最近の主流になってきている。

### API（Application Programming Interface）

ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用するインタフェースの仕様のこと。

SPAは、基本APIを利用して作成する。

## フォーマッター
ソースコードを ___自動で整形してくれる機能___ をもつもの。
インデントを揃える、言語によっては文末の；（セミコロン）の挿入などを補完してくれる。

### Lint

主にC言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムのこと。

通常のフォーマッターに比べて、高度な機能がある。
<font color="Red">プログラム上のおかしい部分を訂正したり、
if文を三項演算子に置換してくれるなどの機能がある。</font>

### 三項演算子

if文をifを用いずにまとめて書くことができる。

```js:sample01
let hoge = ""
if (true) {
    hoge = "a"
} else {
    hoge = "b"
}
```
上記のコード（sample01）と下記のコード（sample02）は同一の結果となる。

```js:sample02
const hoge = true ? "a" : "b"
```

## Laravel
PHPで使われているサーバーサイドの ___フレームワーク___ 。

手順に則り作成することで、比較的セキュリティホールを作りにくくすることができる。

### セキュリティ

- SQLインジェクション

    アプリケーションのセキュリティ上の不備を意図的に利用し、
    アプリケーションが想定しないSQL文を実行させることにより、データベースシステムを不正に操作する攻撃方法のこと。

- XSS（クロスサイトスクリプティング）

    Webアプリケーションの脆弱性もしくはそれを利用した攻撃のこと。

などがある。

### composer.json

一括でインストールしたいパッケージ一覧を設定する。
おおまかなバージョンの指定などは、このファイルで行う。

### composer.lock

一括でインストールが行われた後、
どこからどのバージョンをインストールしてきたかを記載されている。

### モノリシック

___『一枚板』___ という意味で、ソフトウェア的には、全体が1つのモジュールでできていて、分割されていないこと。

### ユニットテスト

単体テストともいい、ソースコードの個々のユニット、
すなわち、1つ以上のコンピュータプログラムモジュールが使用に適しているかどうかを決定するために、
関連する制御データ、使用手順、操作手順とともにテストする手法のこと。

<font color="Red">※テストの自動化コードを作成しておくことは非常に重要。</font>

## スコープ
宣言した変数・定数などの有効範囲のこと。

```js:sample03
const foo = 200

function sampleFunc () {
    const hoge = 0

    if (true) {
        const fuga = 10
    }

    console.log(fuga) // undefined
    console.log(foo) // 200
}

console.log(hoge) // undefined
```
上記の例であれば、正常に値が返ってくるのは<font color="green">__foo__</font>だけ。

### ブロックスコープ

{　}（中括弧）に囲まれた中で宣言された変数・定数などは、
{　}の中がスコープとなる。
![scope_how_to_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/1b572570-4540-252c-4d47-383988441da1.png)

### ファンクションスコープ

functionの中で宣言された変数・定数などは、
functionの中がスコープとなる。
![scope_how_to_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/c0c1a7c6-e1fd-79be-80fa-46020bda297f.png)

### グローバルスコープ

グローバルで宣言された変数・定数などは、
ファイル内すべてがスコープとなる。
![scope_how_to_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/27fd23ae-2c4b-a6e5-d039-6a8dd137ed67.png)

可能な限り、スコープを絞ることで
<font color="Red">想定外の変数・定数などの生き死に</font>を発生させないようにする。

## 補足
- IE（Internet Explorer）は更新が進んでおらず、足を引っ張っている存在で有名。
- CSSはそのまま作成するのではなく、まずSASSで作成した後にCSSにコンパイルする。
- プロジェクトによって、命名規則やフォーマットは異なるので
しっかりと把握してから作業に入ることが重要。
- コードの書き方は、書きやすさより読みやすさを優先すること。場合によりけりなので、一概にこの書き方が正しいとは言えない。