20201110_アウトプット（ブラウザ表示・SQL言語）
学んだこと 4時間15分
ブラウザに表示させるための事前処理を学ぶ
ブラウザが認識して表示できる言語は、HTML, CSS, JavaScript, WebAssemblyの４つのみ（WebAssemblyは高速化手段として、JavaScriptが苦手な部分を補完してくれる言語）
より人間が理解しやすく単純な記述が可能な言語を「高級言語」といい、機械が認識できる０と１のコードに近い言語を「低級言語」「アセンブリ言語」「機械語」などという。
コンパイラ（コンパイルのプログラムのこと）が翻訳できない言語はさらに「プリコンパイル」といって事前に翻訳することが必要。（「プリコンパイル」という単語自体は、メインとなる処理に対して必要な前処理を指すこともある）
Ruby on Railsでは、「アセットパイプライン」という機能を使って、JavaScriptやCSSなどの静的ファイルを小さくまとめていたが、近年ではJavaScriptのライブラリ機能と合わせて開発することが多くなってきたので、Railsでは「アセットパイプライン」では無く、「モジュールバンドラ」を使用してプリコンパイルするようになった。
「モジュールバンドラ」とは、JavaScriptのモジュールの依存関係を考慮しながら管理するツール。「モジュールバンドラ」の中でも「webpack」が主流となっている。
| webpackの４つの基本要素 | 読み | 役割 |
|---|---|---|
| Entry | エントリー | 依存関係を解決するために、どのファイルを基準（エントリーポイント）とするかを決める |
| Output | アウトプット | エントリーポイントにされ、webpackによってまとめられたファイルを、どこへどのような名前で出力（アウトプット）するのか指定する |
| Loaders | ローダー | JavaScript以外のCSSやHTMLなどのファイルをモジュールに変換する方法を読み込み（ロード）、指定した処理を行う |
| Plugins | プラグイン | 圧縮などのファイルをまとめる以外でローダーができないタスクを導入し、拡張（プラグイン）する |
webpackをRuby on Rails仕様にしたもの（専用の設定ファイルやヘルパーメソッドを用意するGem）が、Webpacker。バージョン６系以降はデフォルトで、導入されている。
HTML・CSS・JavaScriptだけでも、ブラウザを作ることができるが、現在はいろんなモジュールを取り入れてアプリを作りたいため（依存関係や名前空間の問題を解決したいことから）「モジュールバンドラ」を使う。
yarnとnpmはJavaScriptのライブラリを管理する機能。yarnの方が後から出来たのでセキュリティが高く処理が早いが、npmが昔からあったのでnpmを使っている開発者が多い。
GemfileはRuby on RailsのGem（拡張機能）を導入するためのもので（導入するためのバンドラーもまたGemの一つ）、webpackはJavaScriptの依存関係を無くしてライブラリを導入するためのものなので、全く別物。例えば
bundle installしても、webpackに影響を及ぼしたりはしない。
データベースの操作👉SQLという言語を使う
ターミナルでの使用方法
MySQLというRDBMSを使用してSQLを実行できる。
以下のようにログインするとターミナルから操作できるよ。
（パスワードは空の設定のため今回は不要）
# ホームディレクトリに戻る % cd # MySQLに接続 % mysql -u root
（補足）Sequel Proを使用する場合も「ユーザ名」に「root」を入力して接続押せば入れる。
ルール
コマンド一覧（基本編）
| 内容 | コマンド |
|---|---|
| DB作成 | mysql> CREATE DATABASE データベース名 ; |
| DB一覧表示 | mysql> SHOW DATABASES; |
| DB削除 | mysql> DROP DATABASE データベース名; |
| DBの指定 （選択） | mysql> USE データベース名; |
| テーブルとカラムの作成 | mysql> CREATE TABLE テーブル名 (カラム名1 カラム名1の型, カラム名2 カラム名2の型); ★型は下記参照 |
| テーブル構造の確認 | mysql> SHOW columns FROM 見たいテーブル名; |
| カラムの追加 | mysql> ALTER TABLE テーブル名 ADD カラム名 カラムの型; |
| カラムの複数追加 | mysql> ALTER TABLE テーブル名 ADD (カラム名 カラムの型, カラム名 カラムの型 ); |
| カラムの変更 | mysql> ALTER TABLE テーブル名 CHANGE 古いカラム名 新しいカラム名 新しいカラムの型; |
| カラムの削除 | mysql> ALTER TABLE テーブル名 DROP カラム名; |
★型について
| 型名 | 保存できる値 |
|---|---|
| INT | 数字 |
| VARCHAR(M) | 最大M文字の文字列(255) |
コマンド一覧（データ操作編）
| 内容 | コマンド |
|---|---|
| データの取得 (取得するカラムを指定) | mysql> SELECT カラム名 FROM テーブル名; |
| データの取得 (全て) | mysql> SELECT * FROM テーブル名; |
| 全てのカラムに値をいれる | mysql> INSERT INTO テーブル名 VALUES(値1, 値2, 値3); |
| 特定のカラムに値をいれる | mysql> INSERT INTO テーブル名(カラム名1, カラム名2) VALUES(値1, 値2); |
| データを更新する | mysql> UPDATE テーブル名 SET 変更内容（例 price = 100） WHERE 条件(例 id = 2); |
| データの削除 | mysql> DELETE FROM テーブル名 WHERE 条件; |
Sequel Proでのコマンド一覧（データ検索編）👉一番使う
次は「Sequel Pro（以下、🥞）」を使って、先ほどと比べると複雑な検索をする。
Sequel ProからSQL文を実行するメリット
検索は場合によって、多くの検索結果が出てくるが、実行したSQL文が流れてしまうことがないので🥞の方が見やすい。
ここで‥クローン完了後のデータベースとテーブル作成のおさらい
% bundle install % yarn install % rails db:create % rails db:migrate % rails db:seed #アプリケーション内にすでに用意されたデータを読み込むためのコマンド（データ投入）
Sequel Proの基本の使い方
対象のデータベースを選択したら「クエリ」という黒いタブで命令文を入力・実行する
ターミナルと違って「エンター」押しても実行されない✨なので、全ての命令文を改行しながら（見やすいように）入力後、右下にある「現在を実行」を押すと、下に検索結果が表示される。
SELECT *（全ての）FROM 指定したデータベース名（指定したデータベース名から）とセットで、自分が行いたい検索をする形になる。ユーザーテーブルと、シフトテーブルの２つがあることを想定してこれから検索練習する。
Sequel Proでいざ実践！(データ検索のコマンド)
| 内容 | コマンド | ポイント |
|---|---|---|
| 条件に一致したレコードを取得 | SELECT * FROM users(※DB名) WHERE last_name(※カラム名) = "阿部"(※探したい文字) | 比較演算子とセットで使える。文字列や日付の場合には””で囲う必要あり |
| 曖昧検索 | SELECT * FROM users WHERE prefecture(※カラム名) LIKE '%都'(※曖昧) | LIKE句 |
| 複数条件合致していたらOK | SELECT * FROM users WHERE age <= 22 AND prefecture = "神奈川県" | ANDで繋げる |
| どちらか合致していたらOK | SELECT * FROM users WHERE age <= 20 OR prefecture = "東京都" | ORで繋げる |
| 条件に当てはまらなければOK | SELECT * FROM users WHERE NOT prefecture = "東京都" | 東京都ではないものを探す |
| ここからここまで当てはまるもの | SELECT * FROM users WHERE age BETWEEN 21 AND 24 | 21才以上24才以下 |
| 一つのカラムに対して指定したリストの値が当てはまればOK | SELECT * FROM users WHERE prefecture IN ("東京都", "神奈川県") | prefectureカラムが東京都もしくは神奈川ならOK |
