見出し画像

３５歳から始めるアプリ開発日記　＃７

Takaoka_-_

TODOリスト

  1. progateにアカウント登録

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

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

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

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

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

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



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


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

が

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

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


（わくわく）




世界中で多く使われている
サーバーサイドで動くJavaScript

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) => {
      ~処理記述~
    }
  );





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

progate引用


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

いいなと思ったら応援しよう！