Progate Node.js学習

<h1>Node.jsとは</h1>
**Node.js**とは、Javascriptをサーバーサイドで動かすための言語です。ProgateのNode.js学習コースでは、買い物サービスをつくる過程でNode.jsの使い方を学んでいきます。そして、Node.jsには便利な機能を簡単に使うためにまとめられている**パッケージ**というものがあり、今回は**Express**というパッケージを使います。

<h1>Node.jsの基本的な使い方</h1>
<h3>Expressの導入,サーバーの起動</h3>
まず、インターネットから自分のアプリケーションにパッケージをインストールします。そして、Expressを使うには、パッケージの読み込みと、実際に使用するための準備をする必要があります。

```app.js
const express = require("express");
const app = express();
```
サーバーを起動させるには、`listen`を用いてapp.jsファイルを実行します。

```app.js
app.listen(3000);
```

```terminal
$ node app.js
```

<h3>ページの表示の仕組み</h3>
/topのページにリクエストが来た時に、トップ画面を表示させるために以下のようにコードを書きます。このようにURLに対応する処理を実行することをルーティングと言います。ルーティングの処理では、`req`(リクエストの略)・`res`(レスポンスの略)の２つの引数を受け取ります。`req`や`res`には、リクエスト・レスポンスに関する情報が入っています。また、ルーティングの処理で`res.render`と書くことで、指定したビューファイル(今回はtop.ejs)をブラウザに表示できます。**EJS**とは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージです。

```app.js
app.get("/top" , (req,res) => {
  res.render("top.ejs");
});
```

<h3>一覧画面を表示</h3>
/indexのウェブページにアクセスしたときに、一覧が表示されるように処理をしていきます。EJS内でJavascriptを書く時には`<% %>`,`<%= >`で囲む必要があります。`<% %>`で囲んだ時にはプラウザ上では表示されませんが、`<%= >`で囲んだ時にはプラウザ上で表示させることができます。`forEach`を使って配列のオブジェクトを一覧画面に表示します。

```index.js

 <%const items =[
          {id: 1, name: 'じゃがいも'},
          {id: 2, name: 'にんじん'},
          {id: 3, name: 'たまねぎ'}
        ];%>

<ul>
 <%items.forEach((item)=>{%>
           <li>
              <span><%=item.id%></span>
              <span><%=item.name%></span>
            </li>
          <% }); %>
</ul>
```

<h3>データベース導入、表示</h3>
データベースを導入するために、**MySQL**を使います。mysqlパッケージを読みこむために、`createConnection`を用います。`createConnection`内には接続情報のコードを書きます。また、データベースに接続するための情報を定数`connection`に代入します。

```app.js
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'progate',
  password: 'password',
  database: 'list_app'
});
```

`connection.query`を用いることで、Node.jsからデータベースに対してクエリを実行することができます。クエリ実行後の処理は2つの引数を取ることができ、第1引数の`error`にはクエリが失敗したときのエラー情報が、第2引数の`results`にはクエリの実行結果（ここでは取得したメモ情報）が入ります。クエリの処理の後に`console.log`を入れとくことで処理の結果をターミナルに表示させることが出来ます。`render`の第2引数に{プロパティ : 値}と書くことで、EJS側に値を渡すことができます。

```app.js
 connection.query(
    "SELECT * FROM items",
    (error,results)=>{
      console.log(results);
      res.render('index.ejs',{items: results});
    }
  );
```

<h3>作成機能</h3>
まず、`app.post`を使ってデータベースを変更できるようにします。フォームを作るときはHTMLの`form`を用います。 `action`には送信先のURL、`method`には「post」か「get」をルーティングに合わせて指定します。

```app.js
app.post("/create",(req,res) =>{
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});
```
```new.js
<form action="/create" method="post">
        
          <input type="text" name="itemName">
          <input type="submit" value="作成する">
        
</form>
```
フォームの値を受け取るにはapp.jsで下図のソースコードを追加する必要があります。

```app.js
app.use(express.urlencoded({extended: false}));
```
`connection.query`の中に`INSERT`を書いていきます。フォームからの値をクエリに使うときは、VALUESに「?」を含めます。次に「connection.query()」の第2引数に渡したい配列を指定します。この配列の要素が「?」の部分に入り、実行されます。`res.redirect`を使って別のURLに再度リクエストさせる仕組みである**リダイレクト**を適用させます。

```app.js
app.post('/create', (req, res) => {
  connection.query(
    "INSERT INTO items(name) VALUES(?)",
    [req.body.itemName],
    (error, results) => {
      res.redirect("/index"); 
        }
      );
    });
```
<h1>最後に</h1>
洗練さんでインターンの課題(Progate 学習コース　Node.jsⅠ～Ⅳ)です。
[Progate](https://prog-8.com/languages/nodejs)

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
[洗練](https://senren.work/)