ITエンジニアの雑談@rascalroom

インフラからフロントまで。若輩エンジニアの勉強まとめ。

アプリ製作 #Sails.js &ルーティング

 

 

今回は、"ルーティング" について紹介していきます。

 

 

軽く雑談

ルーティングとは

なぜ必要なのか

いわゆる "URLルーティング" ってやつですね。

 

ネットワークやってる方は、一瞬「ん?」ってなるのかな。

僕はなりましたが、まぁいいや。

 

 

なぜ必要なのか。。。

答えは簡単!そう!

「これをしないとページが見られないから」です。

 

せっかく作ったのに見ることできないなんて嫌ですよね。

だから覚えないきゃいけないんです。

 

と、言っても基礎的な設定だけなら大したことないですよ。

 

 

従来の仕組みは

一般的なWebサーバーだと、

"apache (httpd)" とか "nginx" とかの仕組みとしては、

"DocumentRoot" がありますね。

 

DocumentRoot は、あるディレクトリを指定すると、

そのディレクトリ配下の階層構造がそのままURLパスとなるわけです。

 

何を言っているかというと、

 

"DocumentRoot  /var/www/html" と指定したとしましょう。

 

①メインページは、"/var/www/html/index.html" で、

②管理者ページは、"/var/www/html/admin/index.php" にして、

③商品紹介ページは、"/var/www/html/info/index.html" がいいな、

④詳細な商品紹介は、"/var/www/html/info/verbose/index.php" とかにしよう。

みたいにしたとします。

 

そうすると、URLはそれぞれこうなります。

①https://{ FQDN or IP }/index.html

②https://{ FQDN or IP }/admin/index.php

③https://{ FQDN or IP }/info/index.html

④https://{ FQDN or IP }/info/verbose/index.php

 

(DirectoryIndex とか URLパラメータ とか、ここで気にすることではない。)

 

これはわかりやすいですね。

DocumentRoot を基点にして、

ディレクトリ階層が、URLパスにくっついているだけですからね。

 

 

これの何が問題なのか。。

そんなことは知りません。。。

「そんなこと、知ってどうする、そんなこと」

 

そっちの道に走りたいなら、Apacheプロジェクトに参加すればいいと思います。

 

 

ここで感じ取って頂きたいのは、

「ページファイルの置き場所(ディレクトリ階層)がそのまま、URLに紐づく」

ということですね。

 

では、次。

 

 

ルーティングの雰囲気をとらえる

従来の説明をしたので察しが付くと思いますが。

 

そうです。

"URLパス" と "ページ(ディレクトリ階層)" を切り離すような感覚です。

 

極端な例ですと、

URLは、"https://{ ~~~ }/banana" にして、

ページの置き場は、"/var/www/html/apple/index.html" とかにもできます。

(こんなことする人とは一緒に仕事しませんけどね。)

 

なぜ、こんなことをしても許されるのか?というと、

"ルーティング" によって、URLとページの紐づけを定義するから。

 

ルーティングで、

"https://{ ~~~ }/banana" がリクエストされたら、"/var/www/html/apple/index.html" につないであげて。

としているのですね。

 

 

他にも、HTTPメソッド(GET、POST)とかでページ分けたり、コントローラを介してアクションにつなげたりとかします。

 

 

(なんか、"alias" に似てるなとか思ったり思わなかったり。)

 

 

... 雰囲気はこんな感じでしょうかね。

伝わるのかな、この説明。。

 

僕にとって大事なのは、「仕組みより、概念」、

「どう動いてるのかより、どう使っていくのか」ですわ。

 

 

書き方

雑談が長いですよね。。

 

 

設定ファイル

config/routes.js

 

 

説明

書式
'[URLパス]': { view: '[ページ]' }
'[URLパス]': { action: '[アクション名]', controller: '[コントローラー名]' }

 

 

 

 

viewに紐づける

viewに直接つなぎたい場合は、

'/homepage': { view: 'pages/homepage' },

こう。

 

「 "https://{ ~=-^\@ }/homepage" がリクエストされたら、

"views/pages/homepage.ejs" を見せてあげて。」

ってことを定義してます。

 

拡張子に ".ejs" がついているのは、Sails.jsのデフォルトのテンプレートエンジンが "ejs" だからです。

 

routes.js に書くときは、拡張子は書かないように。

怒られますので。(エラー出る)

 

実際のファイルには拡張子をつけましょう。 

 

 

controllerでアクション処理させる

controllerにつないで、アクション処理をさせたいときは、

'/news': { action: 'news', controller: 'Main' },

こう。

 

 これで、

「 "https://{ ~=-^\@ }/news" がリクエストされたら、

"Main" コントローラーの "news" アクションを実行してあげて。」

となります。

 

コントローラーでできることも追々書きますね。

 

 

参考書式

/**
 * Route Mappings
 * (sails.config.routes)
 *
 * Your routes tell Sails what to do each time it receives a request.
 *
 * For more information on configuring custom routes, check out:
 * https://sailsjs.com/anatomy/config/routes-js
 */

module.exports.routes = {

  /***************************************************************************
  *                                                                          *
  * Make the view located at `views/homepage.ejs` your home page.            *
  *                                                                          *
  * (Alternatively, remove this and add an `index.html` file in your         *
  * `assets` directory)                                                      *
  *                                                                          *
  ***************************************************************************/

  '/homepage': { view: 'pages/homepage' },

  '/': { action: 'top', controller: 'Main' },
  '/qa': { action: 'qa', controller: 'Main' },
  '/news': { action: 'news', controller: 'Main' },

  /***************************************************************************
  *                                                                          *
  * More custom routes here...                                               *
  * (See https://sailsjs.com/config/routes for examples.)                    *
  *                                                                          *
  * If a request to a URL doesn't match any of the routes in this file, it   *
  * is matched against "shadow routes" (e.g. blueprint routes).  If it does  *
  * not match any of those, it is matched against static assets.             *
  *                                                                          *
  ***************************************************************************/


};

 

 

まとめ

ルーティングは、URLパスと、ページやアクションとのマッピング(関連付け)です。

 

SEO的にも大事らしいので、結構重要ですよね。

 

深く勉強された方は、どうか僕にも教えてください。

何卒、宜しくお願い致します。