イイダリョウのブログ。ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと2020-02-13ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたことJSNode.jsのフレームワークExpress。存在は前から知っていたけどイマイチ何ができる物なのかわかっていなかった。APIについて調べたことをキッカケに、ExpressとJSフレームワーク(Vue、React、Angularなど)の関係についても調べました。クモのようにコツコツとExpressを習得するためにやったことまとめqiita.comこれまでのあらすじ(Node.jsは触っていた)ExpressはNode.jsのフレームワーク。Node.jsについては既に事始めていた。サーバサイドJSということでPHP、Python、Rubyに続く流れでインストール→REPL→ハローワールドしている。この時点ではNode.jsで何ができるのかあまり理解できていない。クモのようにコツコツとその後、メタ言語(テンプレートエンジン、AltCSS、AltJS)のコンパイル、Gulpのビルド、Webpackのバンドルなど、フロントエンド開発にNode環境が必要なことがわかってくる。これはどちらかというとローカル環境の話。CLIを開発するにもNode環境が必要なことがわかってくる。クモのようにコツコツとVue.jsベースのNuxt.jsはSSR(サーバサイドレンダリング)を行うため、本番環境にもNode環境である必要がありそう。APIによるバックエンドとフロントエンドの分業体制について調べた時、Node.jsの拡張機能であるExpressやJSON-Serverの存在を知る。APIが作れるのかな?ExpressとNuxt.jsの違いって何?さて、ここで疑問に思ったのはExpressとNuxt.js、Next.js、Universalなどの位置づけ。Expressが何に使える物かわかっていない状態だとこんなイメージになる。ExpressだけでWebアプリは作れるの?逆にNuxt.jsを使えばExpressは不要なの?SSRとは何かまずSSRがわかっていない。「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。これによって初期表示の際にユーザーが待たされることがなくなるなどのメリットがあります。Mediumふむふむ、Vue.jsやReactがSPA(シングルページアプリケーション)として行っている仮想DOMなどのHTMLレンダリングをクライアントサイド(ブラウザ上)ではなくサーバサイド(Node環境)で行うイメージかな。こちらの記事では静的HTMLとSPAとSSRを比較している。プリレンダリングというのもあるらしい。QiitaHTMLレンダリングをどこで行うかで変わるらしい。SSRとパフォーマンスSSRを使う理由としてパフォーマンス改善がある。サーバ上でのレンダリングはパフォーマンスにどのような影響が?HTTPとは何かHTMLレンダリングと言われてもいまいちイメージできないのは、そもそものHTTPの通信が理解できていないためだな...。ハイパーメディア文書を転送するためのアプリケーション層プロトコルです。HTMLがハイパーテキストであることはわかる。リンクを押すと別のページにジャンプできるのがハイパーなんだよね。クモのようにコツコツとではプロトコルとは何か。プロトコル(英:protocol)とはお約束事のこと。多くの場合は「通信する上でのお約束事」を意味する「通信プロトコル」の省略表現です。※参考:https://wa3.i-3-i.info/word11.html通信プロトコルはHTTP以外にもFTP(データ)、TCP/IP(通信)、SMTP(メール)などがある。※参考:https://wa3.i-3-i.info/word1254.htmlHTTPはWebページを通信するときの約束事。クライアントサイド(ブラウザ)がサーバサイド(Webサーバ)に「このページおくれ」とリクエストすると「ほら、ページだよ」とレスポンスが返ってくる。※参考:https://wa3.i-3-i.info/word165.html「このページおくれ」の部分を「HTTPリクエスト」という。リクエストラインヘッダ(空行)メッセージボディ※参考:https://wa3.i-3-i.info/word1841.html「ほら、ページだよ」の部分を「HTTPレスポンス」という。ステータスラインヘッダ(空行【CR+LF】)レスポンスボディ※参考:https://wa3.i-3-i.info/word1842.htmlHTTPリクエスト/レスポンスはターミナル(黒い画面)のcurlコマンドで見ることができる。QiitaHTTPレスポンスのステップHTTPレスポンスは何段階かステップあって、このような流れになる。Start:サーバーへリクエストします。Paint:ロケーションインジケータがぐるぐる回る段階です。Paint:意味のある情報が表示されます。Ready:画像などが読み込まれてレイアウトされます。interactive:JavaScriptがロードされ実行可能になります。Loaded:すべてが読み込まれて操作可能になります。WorkerやHTTP/2など色々な方法がある。Paint」までです。Workerを使うとかHTTP/2を使うとか、いろんなやり方があります。Performance全体の改善にはいろいろある、ということを覚えておいてください。Renderingについて知るべきこと。PublickeySSRとSEOSSRを使うもう一つの理由にSEO対策がある。GoogleはSPAのページもクロールしてくれるが100%正確に読み込まれる保証はない。QiitaまたGoogle川のクローラビリティ的にもクライアントサイドでのレンダリングは負担になっている。現在多くのサイトがJavaScriptベースになっているため、次のステップとしてはJavaScriptのレンダリングも必要となり、ページが一度レンダリングの待ち行列に追加されます。リソースが空き次第、ヘッドレスブラウザのような別サービスである「ウェブレンダリングサービス」(WRS)を使用し、JavaScriptを実行します。botのクロール用のページ情報をレンダリングする。海外SEO情報ブログSSR必要?不要?(まず体験が必要)調べるとSSR不要論も結構ある。実装するハードルの高さもあるし、WebサーバをNode環境でいけるのか?というのもある。Qiitaここら辺は自分はそもそもSSRがどんなものなのかわかっていないので比較材料がない。体験してから判断したいと思う。SPAはシングルページにあらず?さて、では他のレンダリング方式はどうなんざんしょ。SPA(シングルページアプリケーション)というと、ページ遷移しない単一ページで、ページ内の変更部分だけ非同期に通信して差分の表示を切り替えるイメージを持っていた。APIで閲覧履歴にも残る、あたかもページ遷移をしているようなUXを提供できる!※参考:SPAのルーティングの話そう考えるとSPA=シングルページというイメージは改めてる必要がある。複数ページサイト=SSR、ではなくUX(SEOやパフォーマンスの以外)だけで見るとSPAとSSRに差異はないということか。サーバサイド(Webサーバ)とクライアントサイド(ブラウザ)間での「ページ単位」でのHTTP通信は最初の一回になる。これが「シングルページ」たる所以。ちなみにSPAで行われるレンダリングを「CSR(クライアントサイドレンダリング)」といい、SSRの本来の対義語は正確にはこちらが正しいらしい。Qrunch(クランチ)プリレンダリングとは何かプリレンダリングについて調べると静的サイトジェネレータ(静的CMS)なんかがこれにあたるらしい。静的サイトジェネレーターを使えば、データベースが不要になり、一般的にページの読み込み速度も上がるとされています。静的サイトジェネレーターとは、Markdownなどで書かれたファイルをもとに、静的なコンテンツのテンプレートだけでビルドを行いサイトを作成するためのWebサイト作成用のフレームワークです。※参考:WordPressの代わりになる!2018年注目の静的サイトジェネレーター6選|ferretJS系ではReactベースの「GatsbyJS」が定番ぽい。本文の部分はマークダウンでプリレンダリングする。Markup」の3つの要素を持ちます。「Jam」の「J」が「JavaScript」、「a」が「API」、そして「m」が「Markup」です。サーバに依存しないという特徴があります。APIではない!先ほど引用したSPA、SSR、プリレンダリングの比較記事にもう一つ重要なキーワードを見つけた。実際、ここ一年で私が関わった関わった3つのプロジェクトのうち、2つでSPAによる開発とし、さらにそのうちの1つをアイソモーフィックJavaScriptで開発しましたが、バックエンドはAPIを返すだけでよくなったためロジックやパフォーマンスチューンに集中することができ、フロントエンドはバックエンドの組み込みやテンプレートの準備などを待たずに開発ができるようになりました。Medium「アイソモーフィックJavaScript」はSSRを意味する(SSRという言葉ができる前はこう呼ばれた)。SSRやSPAでサイトを作ると「バックエンドはAPIを返すだけでよくなった」と。APIによってデータをJSONを返してもらう必要はある。Railsなど)の領域になる。このAPIを作る部分をExpressが担っているらしい!ExpressはWebサーバやAPIを作れる。Node.jsにはExpressという有名なモジュールがあります。Expressを使えば、簡単にウェブサーバを立てることができます。静的ファイルを配信するだけの簡単なウェブサーバから、APIを持つような複雑なサーバまで自由自在です。APIを作ってみようNode.jsの「モジュール」とはnpmでインストールできる追加機能のこと。Expressもその中の一つ。moduleとは、Node.jsでnpmコマンドを使用してインストールすることで利用できる便利な機能が実装済みのモジュールです。TechAcademyマガジン「Webサーバ」とはHTTPリクエストに対してHTTPレスポンスを返す仕組みクライアントとサーバーの間では「リクエスト」と「レスポンス」がいったりきたりすることになる。ブラウザーが見に行っているサーバーが「Webサーバー」だ。Webに関するサービスを提供しているから、Webサーバーとなる。※参考:サーバー構築とは|パソコン教室・資格講座なら【KENスクール】Webサーバを「立てる」とはWebサーバを「構築する」こと。Exprsessのミドルウェアとはバックエンドフレームワーク(RailsやLarabelなど)はAPIからJSONを返すだけでなく、HTMLのテンプレート部分の作成も担う。Expressがこれらと同じ位置づけになるとすると、テンプレート部分はVue.js(Nuxt.js)やReact(Next.js)とかぶるのではなかろうか?という疑問。Nuxt.jsはExpressの中でミドルウェア的に使うNuxt.jsはExpressの中で、1つのmoduleとして使用します。いままでVue.jsなどでSPAを作るのに慣れていると、フレームワークをモジュールとして使うという発想はなかったかなと思います(自分はなかった)。この考え方の切替が結構大事かなと思います。Qiitaはて?ミドルウェアとはなんぞ?よくexpresssの公式サイトとかでミドルウェアを作成します。サードパーティのミドルウェアを使用します。Qiitaまさにこんな気分。(res)、およびアプリケーションのリクエストレスポンスサイクルにおける次のミドルウェア関数に対するアクセス権限を持つ関数です。いう変数で表されます。