React, Express, TypeORMでweb application. 参考サイトまとめ．

2021.01.11

React, Express, TypeORMでユーザー認証・管理，ファイルのダウンロード・アップロード機能を持ったweb applicationを作成する機会があったので参考にしたサイトをまとめた．備忘録です．

Web applicationの仕様は以下の通り．
・Frontend : React
・Backend : Express
・Database: sqlite
・ORM for databse : TypeORM
・Language : Typescript (backendもfrontendも)
・Server Proxy : Nginx
・Testing Framework : Selenium (ここだけpython)

「複合ツールでの解説」の項でのサイトたちが，コードがあって実際に動くので開発の際に参考にとてもなった．

    1. Nodeのパッケージ管理
    2. Pug, SASSについて
    3. Nginx
    4. Typescript
      1. ネストしたType宣言
      2. Style Guide
    5. Frontend, React
      1. Typescript
      2. setState, useEffect, componentDidMount
      3. Axios, Backendへのリクエストツール
      4. ファイルのアップロード
      5. React-hook-form
      6. Cookies
      7. Token
      8. Angularについて
      9. 見たけど使用しなかった
    6. Backend, Express
      1. Typescript
      2. ファイルのアップロード，ダウンロード
      3. 暗号化，BCrypt
      4. TypeORM
      5. Database関係
    7. 複合ツールでの解説
    8. 開発時の心得，Tips

Nodeのパッケージ管理

Nodeの開発環境を整えるために，NodeJSのバージョン管理，各パッケージの管理ツール(npm, nvm, yarn)について．僕は，yarnを用いた．node, npm, npx, nodebrewの役割は以下．

  • node（JavaScript 実行エンジン）
  • npm（Node.js のパッケージ管理ツール）
  • npx（Node.js のコマンド実行を補助する）
  • nodebrew (node version manager)

・NodebrewでNodeをインストールする
・Node.jsのバージョンを自動で切り替えられるnodenvが超便利
・Difference between npm and yarn
・npm -D flagはどういう意味ですか？

Pug, SASSについて

Pugはhtmlのテンプレートエンジン，htmlのマークアップ言語．SASSはcssのマークアップ言語．どちらも簡易で記載可能．ReactにPugを取り入れようとしたけど，上手く行かなかった．SASSは適用した．
JadeとPugは同じもの．著作権の関係でJadeは全面的にPugに移行した．

・Pug official site, Attributes
・JavaScriptテンプレートエンジンのPug（Jade）とEJSの比較
・A Jade Tutorial for Beginners

Sass, SASS, SCSS回り．
・Sassを@importから@useに置き換えるための手引き
・SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ
・Using Sass in Create React App v2
・Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

BootstrapはCSSのテンプレート集．
・とほほのBootstrap 4入門

フォント回りの設定について．
・Reactでイメージとウェブフォントを使う方法
・Sass(SCSS)でフォント読み込むときはmixinを使うべきと悟った話
・SASS and @font-face

Nginx

Nginxはサーバープロキシー用に使用．サーバーへのアクセスに対し，特定のドメインから来た場合に作成したweb applicationに処理を渡す．
とりあえずnginx実践入門 (WEB+DB PRESS plus) を読めばok．

・Node.js + Express + forever を構成して nginx から流す
・【入門】Nginx（エンジンエックス）とは？Apacheとの違いと初期設定
nginxの設定用に．
・node.jsアプリをLinuxサーバーで公開してみよう

Typescript

JavascriptへコンパイルしてくれるTypescript．型チェックをひたすら強要されるが，いかに適当にコードを書いているか思い知らせてくれる言語．確かに開発が頑健になることが実感できる．ただ，型の宣言に癖がある？ので慣れるのには少し大変．だがそのメリットは余りあるほど．VS codeと合わせて使うのがおすすめ．

結局，O’REILLY.　まずは読もう．話はそれから．
・プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

・Advanced TypeScript 4.0 Concepts: Classes and Types
・TypeScript introduction

ネストしたType宣言

タイプをクラスのようにまとめて宣言したい．
手前味噌だがこのコードのように宣言すれば出来る．シンプル！

以下は使えそうなサイト．
・Advanced Types, typescript
・Declaration Reference, sitepen
・typescript how to declare nested data type from interface

Style Guide

郷に入っては郷に従え．新しい言語を用いる時はどんなstyleが基本なのかチェック！
厳守する必要はない．美を追求するべし．ちなみに僕はセミコロン撲滅派です．pythonの影響ですね．

・13 Noteworthy Points from Google’s JavaScript Style Guide
・TypeScript Style Guideまとめ
・microsocft, Coding guidelines
・shri / JSDoc-Style-Guide
・Platypi / style_typescript (Good comment example)

Frontend, React

Reactはフロントエンド，すなわち，ユーザーに渡すhtmlやjavascriptの部分の構築用．ユーザーがみる画面を作成する担当．Facebookさんが構築した言語で，javascriptを拡張して禁忌と言われていたhtmlとjavascriptの混在を行ったもの．pythonメインで使用してた僕としては親和性が高く感じた．the object related programming って感じ．まずは，officialのtutorialから手を出そう．React, Tutorial: Intro to React．

以下は基礎．

・Reactの環境構築
・How to create multiple page app using react
・React-router: How to manually invoke Link?

早く知りたかったReact Fragment.
・React, Fragment

ReactでのDecoratorとHOCについて．
・TypeScript の Decorator (HOC も)を使って、React の部品を使い回したい！

Typescript

ReactをTypescriptで書くときに関する説明を行ってくれているサイトたち．

・How to build a type-safe React Redux app
・any型で諦めない React.EventCallback
・React Router with TypeScriptでちゃんと型をつける
・How to Use React Router in Typescript
・ReactのプロジェクトにTypeScriptを導入する〜npm installからコンパイルまで〜

setState, useEffect, componentDidMount

Backendからデータを取ってくる際に理解しなければいけない項目．componentDidMountはクラス用．setState, useEffect二つは関数のhookでcomponentDidMountと同じ働きをさせることが可能．関数型の方がシンプルになるので，setState, useEffectを乱用していたらclassがほとんどなくなった．

・React.Component
・Updating an object with setState in React
・Updating and merging state object using React useState() hook
・Change useState’s from remote component

Axios, Backendへのリクエストツール

AxiosはバックエンドへのAPIリクエストを送信するツール．Fronetend側からBackendに問い合わせる際に使う．

Redux(State管理パッケージ)の使い方は分からなかったけど，やり取りがどうなってるか分かりやすく説明してくれてるサイト．
・React Redux: Token Authentication example with JWT & Axios

・axios、async/awaitを使ったHTTPリクエスト(Web APIを実行)

出逢うであろうCORS error.
・Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response
・Axios Post Request is Not Working in React JS

ファイルのアップロード

inputを使った方法はデザイン調整しようとすると癖があるし，drag and dropが出来ない．
drag and dropで処理するには，divを使う必要あり．このサイト準拠．
・Create a drag-and-drop component with the HTML Drag and Drop API

またbackendを正しく実装しないとファイルがアップロードされた状態にならない．複合ツールでの解説の項を参照すること．

多分，React-hook-formでinputを用いたファイルアップロードは出来るけどdivは分からない．僕は其のファイルアップロードの部分だけ別で処理した．
・Support for input type=”file” #127, react-hook-form

他にも．
・React Hook Formで画像アップロードを実装する
・react open file browser on click a div

ダウンロードに関しては，
・how to download file in react js
・ReactJS download file from Express Server

React-hook-form

フォーム作成部分はReact-hook-formで行ったのでこれに関する内容を記述．

・React-hook-formで簡単にバリデーションフォーム作る
・React Hook Form で超簡単にバリデーションする方法
・React-hook-form and redux
・Typescript input onchange event.target.value

Cookies

react-cookieかuniversal-cookieがある．後者の方がコードは書きやすいが挙動を制御しづらい．

・How to set a cookie in React

Token

Access Tokenに関しては，JWTを用いた．

・Authentication and Authorization with JWTs in Express.js

Angularについて

React比較してAngularについても調べたのでメモ．Angularはhtmlのページ構造を保って開発可能．学習コストが高いが書くコード量は少なくて済む．
Reactはjavascriptを拡張して，html部分も処理するようにしたもの．scratchから書くのが好きな人におすすめ．ファイルにjavascriptの構造，htmlの記法全てが詰め込まれるので，思わぬバグの落とし穴とかには陥りにくい，多分．

・Angular入門
・開発者はReactとAngularのどちらを選ぶべきか？
・ExpressとJSフレームワーク（React、Vue、Angularなど）との関係について調べたこと
・脱create-react-app ~ 真面目に express × react 環境を構築する~

見たけど使用しなかった

ReactのJSXをPugに置換する解説サイト．挫折しました．

・【React + TypeScript + Pug】JSXをPugに置き換える際のワークアラウンド
・create-react-appからpugまで（その1）
・how to use pug templating engine with reactjs

Stateを管理してくれるRedux．今回のweb applicationではState管理ほぼいらなので，使用を断念，シンプルさを優先．

・Usage with TypeScript, redux
・You Might Not Need Redux
・Getting Started with Redux

AuthenticationはBCryptでカスタムに作成したので，ここらへんは使用せず．
・The Complete Guide to React User Authentication with Auth0

Backend, Express

ExpressはNodejsで動くbackendのフレームワーク．

・What is the different between express and express-generator
・Express Generator を使った Node.js + Express.js の環境構築手順
・Express4.17.1Fast, unopinionated, minimalist web framework for Node.js

Expressのミドルウェアのお話．
・【NodeでWebアプリ】(5) Expressミドルウェア
・Express アプリケーションで使用するミドルウェアの作成

Typescript

Backened, FrontendそれぞれでTypescriptの環境構築が必要になるので．．．
Typescriptでの環境構築はこのサイト！
・TypeScript+Expressの快適な開発環境を作ってみた
これで構築し終わった後の設定は，ここからclone可能．
・https://github.com/toshiakiasakura/express-with-typescript

・Express with TypeScript’s application generator
・Setup Express with typescript

ファイルのアップロード，ダウンロード

アップロードに関してはmulter使って上手くいった．
・express-fileupload
・Download a file from NodeJS Server using Express

暗号化，BCrypt

パスワードの暗号化にはBCryptを使用．BCryptはパスワードのハッシュ化をわざと計算量多くして，辞書攻撃を防ぐ暗号化手法．ユーザーパスワードの保管には必要．

・node.bcrypt.js
・node.js(express)でパスワードのハッシュ化 〜bcryptモジュールの使い方〜
・Bcrypt is not supported in Reactjs
・dcodeIO / bcrypt.js

TypeORM

Databaseの操作用．Typescriptと親和性が非常に高い．
が，SyncError地獄にハマる可能性あり．僕はこれで解決．[typeORM] NOT NULL constraint Failedなどのsynchronize回りのエラーの解決方法．

これもまずは，official pageを読もう．一番分かりやすい．
・TypeORM(official)

・TypeORMはNode.js開発のスタンダードになるか？
・Cannot create a new connection named “default”, because connection with such name already exist and it now has an active connection session.
・Using CLI

Database関係

ER図に関するサイト．
・手プログラマー必読！５分で理解できるER図の書き方５ステップ

複合ツールでの解説

統合して解説してくれてるサイトたち．ここに上がっているプログラムはfrontend, backend共にめちゃくちゃ参考にした．幾つか既にアクセス出来なくなってしまったけど．．．

初心者はまずこのサイト！Frontend, Backend, Databaseでのやり取りがシンプルにまとまっている．(確かどこかコードが壊れていたはず．)
・課題管理表をNode.jsとSQLiteで作る①
上記サイトをtypescriptとpugで書いたもの．手前味噌ですが．nginxの設定が色々書いてあるけどご愛嬌．
・https://github.com/toshiakiasakura/task_manager

Backendで参考になった．
・Building a RESTful CRUD API with Node.js, JWT, Bcrypt, Express and MongoDB
・Build a Nodejs Restful API with Express and MongoDB

こちらはAxiosの項目でも紹介したけど，Frontendでとても参考にしたので，ここでも紹介．
・React Redux: Token Authentication example with JWT & Axios

Web ApplicationのOverviewはどうなるか端的に書かれていた．
・Full-stack Boilerplate – React, Express, Node, TypeORM

ファイルアップロードに関してはこのサイト．
・React file upload: proper and easy way, with NodeJS!
・Uploading files with React.js and Node.js

e-mail activationに関して，コードはないけど，アーキテクチャについて分かりやすく書かれている．
・How to verify your users’ email addresses | Node.js/Express

他にも．
・初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)
・Deploying a React app with React-Router and an Express Backend
・React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる
・【初心者向け】非同期にCRUDするReactアプリケーションを作る
・Deployment, create-react-app

開発時の心得，Tips

開発する際に心がける点や注意点について教えてくれたサイトたち．

・なぜ default export を使うべきではないのか？
・HTML5のLocal Storageを使ってはいけない（翻訳）

groupbyのアルゴリズムが必要なったので，これ．
・Most efficient method to groupby on an array of objects in Javascrip

———-雑感(｀・ω・´)———-
無理やりまとめた！　
いっぱい抜けてるところあるけどごめんなさい！　
開発の際の全体像が掴めてくれるとありがたいです！

コメント

タイトルとURLをコピーしました