TODOリスト

1. progateにアカウント登録

2. JS(ES6)の確認（ES5とのギャップがないか確認しようかな）

3. jQueryの確認（シッタカブリな部分がないか確認しようかな）

4. Gitの確認（シッタカブリな部分がないか確認しようかな）

5. Sassの学習（中身知らないので）

6. Reactの学習（中身知らないので）
   残ってた知らないことについて

7. Node.jsの学習（雰囲気は知ってるけど詳しくないから）

さて次はNode.jsﾉｰﾄﾞｼﾞｪｲｴｽについて学びます
安定の「progateﾌﾟﾛｹﾞｰﾄ」様

今回はちらほら仕事上耳にする情報があるので
まったく知らないというわけではないです

が

毎度ながら
知らないことってワクワクします

最高ですね
このワクワクを常に感じ続けたい

（わくわく）

個人的になんですが
JavaScriptって今見ているブラウザ側だけで完結する
「クライアントサイドプログラム」と認識しているので
「サーバーサイド」という部分に凄く違和感を覚えてます
そこを解消することが初めのゴールかなぁ

実際の学習時間
1日目：2時間（1章～4章）
2日目：

知らなかったことだけピックアップ

1. Expressフレームワークを使う

2. npmを用いたパッケージ取得

3. app.jsへのexpress読み込み

4. app.jsでリクエストコントロールをする感じ
   （ルーティングというらしい）
   ※ネットワーク知識が少しあるのでちょっと違和感
   URL指定時に正規表現できるのかな？
   「app.get('/top.*', ～　」みたいな

5. ルーティングでリクエストとレスポンスを引数で受け取れる
   （これはSpringと似てるから違和感はない）

6. 表示関連は「EJS拡張子」のファイルを使う
   HTML≒EJSと思ってていいらしい

7. 静的コンテンツ(CSS/image)を利用する際は参照先をapp.jsで指定する
   publicフォルダが静的コンテンツの保管場所となる場合
   「app.use(express.static('public');」

8. EJSにはJavaScriptを埋め込める
   これ言い回しがややこしいですね
   サーバーサイドで動くJavaScriptを埋め込めるが正しいかなと解釈
   HTMLでも埋め込めるからね（クライアント側起動なら）

9. EJSでJavaScriptを使う場合は「<% ～ %>」「<%=  %>」を利用する
   （JSPと同じだろうな）

10. 【ここから2章】データベースと連結するにはデータベース用のパッケージをインストールする
    ※ここから下については
    　無料で公開しているサンプル処理のコードを見て判断してます

11. MySQLを使う場合の定義方法
    ※詳細は下部に転記

12. SELECT文を使う場合の定義方法
    ※詳細は下部に転記

13. EJSへ値を渡す方法
    ※詳細は下部に転記

14. formからPOSTメソッドで送信したinput値の取得方法
    req.body.<name属性の値>

15. formから値を取得する際は「app.js」にエンコード指定を入れる
    app.use(express.urlencoded({extended: false}));

16. リダイレクトの書き方はrenderではなくredirectになるだけ

17. INSERT文を使う場合の定義方法
    ※詳細は下部に転記

18. 【ここから3章】URLにパラメータ付けることをルートパラメータという
    削除と編集でルートパラメータを使っているが
    これは学習用だからだろうな
    ルートパラメータの受け取り方
    「app.post('/delete/:id', (req, res) => {」の:idの部分
    ※"id"は任意の名称
    　ルートパラメータ名に該当する

19. ルートパラメータは「req.params.<ルートパラメータ名>」で利用できる

MySQLを使う場合の定義方法

MySQL利用時の定義例

[app.js]
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',    // サーバー名
  user: 'progate',      // 接続ユーザー名
  password: 'password', // 接続ユーザーパスワード
  database: 'list_app'  // 接続先DB名
});

SELECT文を使う場合の定義方法

基本構文

  connection.query(
    'SELECT ～',
    () => {
      ~処理記述~
    }
  );

() =>の()では「error」と「results」の2つ引数指定でき
SQLの実行結果を取得できる

上ではqueryの第二引数が「()=>{}」だが
第二引数に「[]」配列オブジェクトを指定すると
？の置換処理になるみた

引数が3つになるパターンは「INSERT文を使う場合の定義方法」に記載

EJSへ値を渡す方法

res.renderの第二引数を使う

app.get('/index', (req, res) => {
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});

EJS側は<% items %>で参照可能
※itemsは任意の文字列であり　renderの第二引数と合わせる必要あり

INSERT文を使う場合の定義方法

基本構文

  connection.query(
    'INSERT INTO items (name) VALUES (?)',
    [<?を置き換える値>],
    (error, results) => {
      ~処理記述~
    }
  );

冒頭で書いた「サーバーサイドでの処理を理解」という部分ですが
わかりませんでした
ん～スクリプト言語をどうやってサーバー側で動かすようになってるのか
考え過ぎかな
気になってしまうと　より気になる
とりあえずこの曖昧さで進めます

長くなってきたから
続きは次回へ