フルスタックWeb開発 part3 内容

※“Full Stack Open 2019” by Matti Luukkainen, contributers,Houston inc,Ava Heinonen, Ilkka Kuisma, Harri Mehtälä and Jesper Pettersson is licensed under CC BY-NC-SA 3.0

見出し文（In this part …）

この部分では、バックエンド、つまり、スタックのサーバー側に機能を実装することに焦点を合わせます。Expressライブラリを使用してNode.jsに簡単なREST APIを実装し、アプリケーションのデータをMongoDBデータベースに保存します。このパートの最後で、アプリケーションをインターネットに展開します。

Node.js and Express

このPart3から、バックエンドの実装に入っていく。

Node.jsで凄くシンプルなWebサーバーを作ってから、徐々に拡張していく流れ。
（“Hello World”を返すだけのサーバーから作っていく）

• index.js

  const http = require('http')

const app = http.createServer((req, res) => { res.writeHead(200, { ‘Content-Type’: ‘text/plain’ }) res.end(‘Hello World’) })

const port = 3001 app.listen(port) console.log(Server running on port ${port})

次に、ExpressというAPIサーバーのライブラリを使い実装していく。

- index.js
```Javascript
  const express = require('express')
  const app = express()
  // root
  app.get('', (req, res) => {
     res.send('<h1>Hello!</h1>')
  })
  // /notes
  app.get('/notes', (req, res) => {
     res.json(notes)
  })
  
  // serverのリッスン開始
  const PORT = 3001
　app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`)
　})

nodemon

開発時にサーバー側のコードを変更してすぐ反映されないので、解消するためのライブラリー(nodemon)を導入。

$ yarn add nodemon --dev

※以後、nodemonコマンドで、index.jsを叩くようにする。 以下のように、起動スクリプトを定義して使う。

1. nodemon起動スクリプトを、package.jsonに定義する
2. • “watch”: “nodemon index.js”,
3. 使うときは、 yarn run watch で、OK

body-parser

requestのbodyから、jsonを簡単に取得するための設定（body-parser を使う）

  const express = require('express')
  const app = express()
  const bodyParser = require('body-parser')
  app.use(bodyParser.json())

とすることで、

  const json = request.body 

というように変換を自動してくれるため、アクセスが簡単にできる。

あとは、RESTの基本的な説明があった。 Node.js × Expreess で、サクッと簡単なAPIサーバーを実装できることがわかった。

Deployiing app to internet

フロントとバックエンドを組み合わせて動くようにしてから、Herokuというサービスを使って、作ったアプリを公開していく。

cors

フロントエンドとバックエンドをフォルダ分けして、両方起動して、フロントからバックエンドにアクセスしてコードが動くことを確認する。

フロントからバックエンドのGETリクエストが、CORSポリシー（Same Origin Policy）なるエラーで、404エラーを出す。
（※基本的、別ドメインのurlと通信できないようにする制限のエラー）

その解消のために、ライブラリ（cors）を導入・設定した。

$ yarn add cors を使う
  バックエンドのコードで、express で、 app.use(cors()) を設定する。

アプリの公開

Herokuを使ってアプリを公開する。 （自分はここはやってないです。）

proxy

[proxy]の利用と設定
urlを相対パスで指定した場合に、別ドメインのアドレスにリダイレクトしたい場合に利用。

packgage.json に、 “proxy”: “http:localhost:3001”

と追記することで、localhost:3000 で、動いているアプリが、相対パスの /notes にアクセスするとき、localhost:3000/notes にアクセスする。
バックエンドは、localhost:3001 で起動している状態。
なので、3000/notes は見つからなかったので、proxyに設定してあるurl（3001/notes）を見に行くようになる。

Saving data to MongoDB

バックエンドのデバック方法を、ChromeのDevToolで確認した後、MongoDBの実装に入っていく。
データ保存を、NoSqlのをMongoDB（クラウド）を使って実装。
MongoDBAtlsという、クラウドサービスの無料プランに登録して、urlを叩いて、データ保存するような実装。
データ保存する際の処理も、MongooseというMongoDB用のライブラリを使って実装してので、特に難しいことはなかった。
あと、環境変数定義して使う方法も学んだ（Libraryのdotenvの導入）
基本的に、すでに作成していた front -> backend(Express)　で、ローカル変数に保存していた実装を、クラウドのMongoDBに保存（読み書き）するよう対応。
MongooseというLibraryの使い方を多く学んだ（errorハンドリングの実装、CRUDの実装）

MongoDB Atlas

• MongoDB Atlas
  これのアカウントを作成して、freeプランで、MongoDBを使って実装する。

Mongoose

MongoDBの操作用のライブラリ（Mongoose）を導入。

Mongooseの基本操作の確認 → ターミナルで叩いて確認 → Mongooseの処理をモジュール化 → 既存の電話帳のアプリに組み込み対応

というちょっとずつステップを踏むので、すごく丁寧でわかりやすい。

Validation and ESLint

バリデーション

バリデーションと静的解析（ESLint）の使い方を学ぶ。
バリデーションの実装は、MongooseのScheme定義に追記するような形で、Railsと同じような印象。
ユニークかのチェックのバリデーションは、別途、Libraryを追加した。（mongoose-unique-validator）

基本的なValidationルールを、Scheme定義に追加 （型の指定、最小文字数、必須かどうか など）

const noteSchema = new mongoose.Schema({
  content: {
    type: String,
    minlength: 5,
    required: true
  },
  date: { 
    type: Date,
    required: true
  },
  important: Boolean
})

重複チェック（ユニークかどうか）は、別途ライブラリを追加する必要があった。

$ yarn add mongoose-unique-validatpr 

// Scheme定義時に使う

// 読み込む
const uniqueValidator = require('mongoose-unique-validator');
// SchemeのValidationに、unique: true をつける
const personSchema = new mongoose.Schema({
　　　name: { type: String, unique: true },
　　　number: String,
})

// 作成したSchemeに、読み込んだプラグインを設定する　　　　　
personSchema.plugin(uniqueValidator)

ESLint

　ESLintを導入し、自身の書いたコードを機械的にチェックする機能を導入。
使う際の設定ファイル、除外ディレクトリの設定、ルールの追加、無効などの設定方法を学ぶ。
SwiftでSwiftLintを使っているので、特に、新しい概念はなくスムーズにできた。
JS界隈では、AirbnbのESLintの設定が人気らしい。

AirbnbのJavascriptのコード規約

やってみて

自分で作ったフロントエンドのアプリから、自分で作ったバックエンドのアプリを使ったので、webアプリを自分で広範囲に作った感が味わえた。
フロントもサーバーも自分で動くものを作りながら実装しているので、web開発の知識・経験を包括的に学べた実感がある。
Railsをやりたい！という願望であれば、RailsTutorialがおすすめだけど、言語こだわりがなく、フロント・バックエンドを学びたいのであれば、Full Stack Open 2019 をおすすめしたい。 　すごく丁寧でわかりやすい。。。