コミュニティ

expressは一体何をしとるんじゃ・・・

expressは一体何をしとるんじゃ・・・

by ganariya
1 / 2

expressをさわりはじめて

 expressの行っている動作がよくわからんのじゃあ!
 Node.jsもよくわからんのに、加えてexpressのよくわからん記法が入ってきたり、専門用語が入ってきてイミフなのじゃあ・・・
 というわけで、自分なりに不明だったところをまとめてみようと思うのじゃあ!

expressの用語

ミドルウェア

 よくexpresssの公式サイトとかで

ミドルウェアを作成します。

 とか、

サードパーティのミドルウェアを使用します。

 とかが見られるのじゃけれど、いかんせんミドルウェアがよくわからんのじゃあ・・・

 調べてみると、ミドルウェアはただの関数らしいのじゃあ・・・
 クライアント側からのHTTPリクエストを受け取ったときに、express内で共通させて行いたい処理をミドルウェアというらしいのじゃあ・・・
 例えば、HTTPリクエストを送ってきたユーザーIDをコンソールに表示したり、cookieを自動更新するなどの処理などがあるのじゃ・・・
 結局のところ、毎回行うような処理を毎回書くのがアホらしいから、面倒な処理をミドルウェア関数として、expressインスタンスに登録して自動実行させるということらしいのじゃあ!

 ・・・認識が違ったらコメントで教えてほしいのじゃ!

ルーティング

 妾は、この「ルーティング」というものを最初見て、ルーターのことなんじゃと思ったんじゃけどどうやら違うらしいのじゃ・・・

 expressで使用されるルーティングの意味としては、クライアントからのリクエストが合った際に行う処理を決めることらしいのじゃあ・・・
 例えば、クライアント側からGET要求があったらデータを返して、POST要求があったら非同期でページを更新するなどなど・・・
 ルーティングを使用することで、GET、POST、DELETE要求などの要求に対して、それぞれ適切な処理を設定できるということらしいのじゃ・・・

expressのファイル構成

 express-generatorなどを使用すると、基本的なファイル構成が生成されるのじゃ・・・
 それぞれのファイルが何を行っているのか見ていこうと思うのじゃ!

app.js

 expressを使用してWebアプリケーションなどを作る際、最初に呼び出されるスクリプトファイルなのじゃ・・・
 このファイルに基本的な設定などを記述すると思うのじゃ・・・
 妾は、C言語などのmain関数みたいなもんじゃと思っとるのじゃ・・・

binフォルダ

 binフォルダの中にはwwwファイルのみが存在するのじゃ・・・
 app.jsが最初に呼び出される基本ファイルといったのじゃが、本当に一番最初に実行するのはwwwファイルなのじゃ・・・
 ものすごく根幹的な処理を行って、app.jsを実行しているらしいのじゃ・・・
 妾は、C言語でいうプリコンパイルみたいなもんだと、思い込んどるのじゃ!

publicフォルダ

 publicフォルダの中には

  • html
  • css
  • javascript

 という3つのフォルダが存在するのじゃ・・・
 クライアント側で実行したい静的ファイルをそれぞれの名前のフォルダにぶち込むらしいのじゃ・・・
 この中においておけば、クライアント側からアクセスしやすいらしいのじゃ・・・

routeフォルダ

 routeフォルダの中には「index.js」「users.js」ファイルが入っているのじゃ・・・
 ・・・わからんのじゃ!
 ・・・さっぱりわからんのじゃ!教えてほしいのじゃ!
 妾の今のところの見解じゃと、次に述べるviewsフォルダのファイルをレンダーするときに、プロパティなどを設定するjsファイルをぶち込むものなのじゃと予想しているのじゃ・・・

viewsフォルダ

  viewsフォルダの中には、いわゆるテンプレートエンジンの拡張子が付いているファイルをぶち込むのじゃ!
 例えば、ユーザーの情報によって、表示したい内容を変えたい場合があると思うのじゃ。そういうときは、変えたい部分のみを変更して変数などを記述したhtmlファイルをこのviewsフォルダにぶち込めばいいのじゃ!
 後で、ユーザーからのリクエストがあったときに、ユーザーの情報とこのテンプレートファイルを合体させて、htmlファイルをその場で作ってユーザーに送り返すのじゃ・・・
 ユーザー一人一人のためにhtmlファイルを記述する必要がなくなるのじゃな!ありがたい話じゃ!

expressの記法

 expressでよく記述される内容とその意味について考えていこうと思うのじゃ!

const express = require('express')

 これはもう定番じゃの・・・
 expressモジュールを読み込んで、expressの恩恵を受けれるようにしているんじゃな・・・
 ありがたい話じゃ・・・

var app = express()

 読み込んだexpressモジュールを実体化してインスタンスにしているのじゃ・・・
appという変数名にするのが慣例らしいのじゃ!

app.set(何か)

 app.set関数は、このexpressのインスタンス全体の設定を行っているんじゃな・・・
 例えば、とあるディレクトリをカレントディレクトリにしたりじゃとか、拡張子の省略を行えるようにするじゃとか・・・
 ・・・よくわからんのじゃ
 ・・・まあ、システム全体の設定を行うと思えばいいのじゃろうか!

app.set('view engine', 'hbs')

 これは先程述べたapp.setの具体例じゃな・・・
 viewsフォルダのテンプレートファイルを使用する際に、拡張子を省略して記述できるようにするのじゃ!
 妾がHandlebarsというテンプレートエンジンを使用しているから'hbs'と記述しているのじゃ・・・
 ejsなどの違うテンプレートエンジンを使用する際は、'ejs'などと記述すれば拡張子が省略できるようになるのじゃ!

app.use( [パス]ミドルウェア関数)

 app.useは、先程だいぶ前に述べたんじゃが、ミドルウェア関数を使用できるようにしてるのじゃな・・・
 [パス]は省略可能で、省略すると、クライアントからのリクエストがあったときに、すべてのリクエストでミドルウェア関数が必ず実行されるのじゃな・・・
 [パス]に'/about'などが記述されておると、'/about'のリクエストが合った際に実行されるミドルウェア関数を設定できるというわけじゃな・・・
 注意点として、app.useで設定した順でミドルウェア関数が実行されるのじゃ・・・
 app.useを書く順番によっては、なんかよくわからん結果になりそうなので気をつけようと思うのじゃ・・・

app.use(express.static(__dirname + '/public'))

 これはクライアントにアクセスさせたい静的ファイルが格納されているフォルダを設定しているのじゃ・・・
 まず__dirnameはプロジェクト全体のファイルのリンクなのじゃ・・・
 そして'/public'は静的ファイルが格納されているフォルダ名なのじゃ・・・
 そして、express.static関数は、そのフォルダへのリンクを保存するわけじゃな・・・
 おまじないとして妾は考えていこうと思うのじゃが・・・

app.get('パス', ミドルウェア関数)

これは、クライアントから'パス'へのGET要求があったときに実行する処理をミドルウェア関数記述することで、設定しているわけじゃな・・・
 このapp.getのミドルウェア関数の中でres.renderを使用して、htmlファイルを生成したりするのじゃがそれは次に書こうと思うのじゃ・・・

(req, res, next ) => {行いたい処理}

 ・・・これがよく、app.getやapp.postなどに記述されるミドルウェア関数なのじゃあ!

app.get('/', (req, res, next) => {
    res.render('home.hbs',{
        pageTitle:'Welcome to My ホームページ',
        titleName:'タイトルなんやで'
    })
})

 上記のような感じで、出て来るはずなのじゃあ・・・
 reqは「request」の略で、クライアントからのHTTPリクエストに関する情報が格納されているのじゃあ・・・
 resは「response」の略で、クライアントに送り返すHTTPの情報が格納されているのじゃあ・・・
 nextは、このミドルウェア関数の次に実行したいコールバック関数が入っているのじゃあ!これはapp.useで設定した関数が格納されているらしいのじゃ・・・

  注意点としては、app.useで設定したミドルウェア関数をどんどん連続で実行させたいときは、そのミドルウェア関数の中で必ずnext();と、next関数を実行しないといけないのじゃ!
 この記述がないとコールバックが実行されないので、途中で処理が止まってしまうらしいのじゃ・・・

あとがき

 まだまだexpressの中身が理解できておらず、妾自身もjavascript・node.jsともに初心者のため多分expressに対する認識があっていないのじゃあ・・・
 間違っているところが合ったら教えたいただけるとありがたいですのじゃ!

参考文献

Express公式
逆引きメモ:expressの使い方

ganariya
(伸び代しかありません)
https://github.com/Ganariya/Ganariya
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
この記事は以下の記事からリンクされています
oekaki-hoho-ronWhat's "Express.js" ?からリンク
コメント

おもしろいんじゃ

おもろすぎて内容が全く頭に入ってこんのじゃ

@otagaisama-1 ありがとうございます!

細かいですが... by otagaisama-1 2019/09/11 20:02

@OldBigBuddha ありがとうございます!!

スペルミスがあったので細かいですが修正 by OldBigBuddha 2020/01/31 11:27

(編集済み)

今知りたいこと全部書いてあって超助かりました!!
面白くて読むの時間かかっちゃいましたよ笑

忍!?

あなたもコメントしてみませんか :)
すでにアカウントを持っている方は
ユーザーは見つかりませんでした