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

学んだことを以下にまとめております。

ライブラリ

ライブラリとは

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

ライブラリAを使いたいとなれば、それに伴いライブラリBとライブラリCが必要になります。
さらに、ライブラリBはライブラリD（v1.1）とライブラリEが必要で・・・

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

パッケージ管理システム

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

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

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

package.json

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

yarn.lock

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

node_modules

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

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

.gitignore

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

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

Gitの監視下に置かないディレクトリの例

• node_modules
• .DS_Store（Mac）
• .env（環境設定ファイル） 主に、認証情報などのユーザ情報から、環境による設定など

SPA（Single Page Application）

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

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

API（Application Programming Interface）

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

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

フォーマッター

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

Lint

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

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

三項演算子

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

let hoge = ""
if (true) {
    hoge = "a"
} else {
    hoge = "b"
}

上記のコード（sample01）と下記のコード（sample02）は同一の結果となる。

const hoge = true ? "a" : "b"

Laravel

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

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

セキュリティ

• SQLインジェクション

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

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

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

などがある。

composer.json

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

composer.lock

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

モノリシック

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

ユニットテスト

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

※テストの自動化コードを作成しておくことは非常に重要。

スコープ

宣言した変数・定数などの有効範囲のこと。

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

上記の例であれば、正常に値が返ってくるのはfooだけ。

ブロックスコープ

{　}（中括弧）に囲まれた中で宣言された変数・定数などは、
{　}の中がスコープとなる。

ファンクションスコープ

functionの中で宣言された変数・定数などは、
functionの中がスコープとなる。

グローバルスコープ

グローバルで宣言された変数・定数などは、
ファイル内すべてがスコープとなる。

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

補足

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