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

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)

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

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図に関するサイト.
手プログラマー必読!5分で理解できるER図の書き方5ステップ

複合ツールでの解説

統合して解説してくれてるサイトたち.ここに上がっているプログラムは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をコピーしました