文系エンジニアの学習日記

プログラミング未経験からIT業界に飛び込んだエンジニアの勉強日記

Node.jsの欠点（アプリケーションを作成するうえで）と解決策

学習日記

※attention!!
このブログは学習日記というタイトル通り、個人の備忘録です。間違っていたらコメント欄でいろいろお申し付けください。
極力回答いたします。

 

前回の更新では生のNode.jsを使ったチュートリアルを行いました。
これでもアプリケーションは構築できますが、さらに便利な機能が存在します。

まだあるの？と思うかもしれません。
しかし、このような機能ができた理由もちゃんと存在しています。
今回は、その理由について、書こうと思います。


★Contents

・Node.jsの課題、
・それを克服するためのFW
・expressを使ったアプリ作成の手順

 

●Node.jsの課題

 


結論から言うとコードを書くのがめんどくさいです。
どういうことかといいますと、サーバープログラムから作らないといけない。

なぜこれが面倒なの？という話になるかと思いますので以下

◆理由

 

Node.jsの場合、各コード（書くもの）が他のサーバー言語に比べて圧倒的に多いです。
Java等ほかのサーバー言語の場合サーバープログラムが別に用意されています。しかし、Node.jsはサーバープログラムを0から作る必要があります。

どうしてなのか、これをカレーを作るときとして考えてみます。
インドではそう作っているらしいですが、カレーをスパイスから作るのと、市販のカレールーが用意してあり、そこから作るのとどちらが楽でしょうか？
という話です。


●それを克服するためのFW

 

先ほどの見出しから、

そりゃあ楽なのは市販のカレールーから作ることでしょうという声が聞こえてきます。

じゃあカレールー作りましょうということでそれらを克服するためのライブラリ、フレームワークが開発されています。
一番有名なものはexpressというフレームワーク（以下FWと書きます）ですね。

いきなりFWとか出てきて何？なので、定義を書いている検索記事を紹介しときます。

https://wa3.i-3-i.info/word12470.html

このサイトのタイトルは

「分かりそう」で「わからない」でも「わかった」気になれるIT用語辞典

このサイトの説明方法本当堅苦しくない解説だから、用語を知るとっかかりとしてはいいサイトです。


その理由として、生身のNode.jsに比較的近い書きこごちで記述されているからであるということがあげられます。
FWというものはカスタマイズしすぎるとデフォルトの言語とは全く異なるものになってしまうため、0から覚えなおさないといけないのです。
また、料理で例えてしまいますが、チキンカレーのルーのパッケージにもかかわらず、中身がグリーンカレーのルーだったら、何？と思いますよね。
これと同じような現象がFWにも起こるのです。
そうなると、大元の言語で学んだ知識を比較的応用できるexpressは比較的学びやすいという理由で、人気のFWになったと考えています。

 

●expressを使ったアプリ作成の手順

そんなわけで、expressをどう使うとアプリケーションができるの？という話に進んでいきます。
ざっくりこんな順番で進めていきます。

１アプリ作成の手順（環境を作る）
２アプリ作成の手順（チュートリアルレベルの物が完成するまで）

1と2も結構工程あるため小目次つけときますね。

 

１アプリ作成の手順（環境を作る）

1-1アプリケーションのフォルダを作成する。

1-2コマンドを使い、npmの初期化をする。

1-3expressをアプリケーションにインストールする

1-4プログラムのファイルを作成してソースコードを書く

２アプリ作成の手順（実際にコードを書いてチュートリアルレベルの物が完成するまで）

2-1テンプレートエンジンの導入

2-2テンプレートの作成

2-3テンプレートがスタイルシートを読み込むようにする

2-4表示するページの追加するには

2-5データのやり取りができる

2-6フォームの作成

 

 

 

１アプリ作成の手順（環境を作る）

アプリ作成するための場所づくりのことですね。ざっくりとはこの4つを行います。

1アプリケーションのフォルダを作成する。

2コマンドを使い、npmの初期化をする。

3expressをアプリケーションにインストールする

4プログラムのファイルを作成してソースコードを書く

 


1アプリケーションのフォルダを作成する。

f:id:yume100kairi:20190114172552p:plain

mkdir フォルダ名でアプリを作成するフォルダを作ります。

2コマンドを使い、npmの初期化をする。

f:id:yume100kairi:20190114172731p:plain

npm  init

その結果は以下

f:id:yume100kairi:20190114172826p:plain

このまま、enterを押していきます。

f:id:yume100kairi:20190114172912p:plain

今回このような表示が出てきました。これは新しいバージョンが出たから、更新してくださいというメッセージです。
今回は、更新します。
※ものによっては、闇雲に更新をしてしまうと、使い方が大きく変わってしまうものもあります。サポートされていないこともあるため一旦調べてから入れることをお勧めします。
筆者は闇雲に最新版突っ込んだら調べることができなくて......となった経験があります......
npm install -g npm＋enterで更新が完了しました。

3expressをアプリケーションにインストールする

f:id:yume100kairi:20190114172958p:plain

npm install --save express

これでアプリ作成する場所は完成されました。

4プログラムのファイルを作成してソースコードを書く
ここからは大項目2で書いていきます。


２アプリ作成の手順（実際にコードを書いてチュートリアルレベルの物が完成するまで）

アプリ作成の手順と行きたいところですが、ここでどんなものができたのか全体を簡単に紹介します。

一言で言うなら、文字入力→画面に文字が表示されるということですね。

これにいろいろ手を加えていくと、検索サイトやショッピングサイトになっていくという

出来上がったものの簡単な紹介

・画面に何か入力してから送信ボタンを押すと、遷移先で文字が表示される。

・リンクページを押すと、別のページに移動する。

f:id:yume100kairi:20190114174747p:plain

top画面

f:id:yume100kairi:20190114174948p:plain

入力値の送信

f:id:yume100kairi:20190114174802p:plain

送信後

f:id:yume100kairi:20190114175103p:plain

画面遷移前

f:id:yume100kairi:20190114175122p:plain

画面遷移後


ここからは、実際に作ったアプリのサンプルコードに基づいて手順を簡単に紹介していきます。
ざっくりとした手順は下記の通り

1テンプレートエンジンの導入

2テンプレートの作成

3テンプレートがスタイルシートを読み込むようにする

4表示するページの追加するには

5データのやり取りができる

6フォームの作成


1テンプレートエンジンの導入と2テンプレートの作成
アプリケーションを作るフォルダの中にテンプレートエンジンのEJSをインストールします。インストールに使うコマンドは下記の通り

npm install --save ejs

以下のようにコードを書いてみてください

まずは、画面から、何表示するの？という部分です。

f:id:yume100kairi:20190114180719p:plain

次にプログラムの部分です。実際に動く部分ですね。

f:id:yume100kairi:20190114181213p:plain

f:id:yume100kairi:20190114181220p:plain

f:id:yume100kairi:20190114181231p:plain

このコードとっても長いですが、詳しいことはまた後の項目で紹介していきます。


3テンプレートがスタイルシートを読み込むようにする

f:id:yume100kairi:20190114181538p:plain

先ほどのhtmlのソースにこのような表記があったと思います。

ここでスタイルシートを読み込んで画面上の見た目をいろいろ設定しています。

じゃそれはどこに入っているの？というと

f:id:yume100kairi:20190114182057p:plain

node_modulesというアプリのメインディレクトリ直下のpublicディレクトリに入っています。

そして、プログラム側では下記のコードが描かれていたと思います。

app.use(express.static('public'));

これは、publicディレクトリの内容を読み込みます。という意味ですね。

これで、htmlページがpublicディレクトリ内のスタイルシートを読み込んだ状態で画面表示をします。

4表示するページの追加方法5データのやり取りができる
先ほどのindex.jsには、

var url = '/other?name=taro&pass=yamada';

//トップページ
app.get("/", (req, res) => {
var msg = 'This is Index Page!<br>'
+ 'これはトップページです。<br>データを表示します';
 
res.render('index.ejs', {
title: 'Index',
content: msg,
data:data,
link:{ href:url, text:'※別のページに移動'}

});
});

なコードがあったと思いますこれでほかのページにリンクを飛ばすことができます。

urlで飛ばす先のURLを設定しています。
urlにvar url = '/other?name=taro&pass=yamada';

という項目があったと思います。/other?がURLを示していて、そこに遷移するようになっています。

otherページのコードはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title><%=title %></title>
<link type="text/css" href="./style.css" rel="stylesheet">
</head>
<body>
<head>
<h1><%=title %></h1>
</head>
<div role="main">
<p><%-content %></p>
</div>
</body>

この/other?の後ろにあるname=taro&pass=yamada

がクエリパラメータというもので、指定したURLに遷移するときにこれを表示してくださいという意味を示しています。

で、otherページって何表示するの？というのは

//otherページ

app.get("/other", (req, res) => {
var name = req.query.name;
var pass = req.query.pass;
var msg = 'あなたの名前は「' + name + '」<br>パスワードは「'+ pass +'」です。';
res.render('other.ejs',
{
title:'other',
content:msg,
link:{href:'/', text:'※トップに戻る'}
});
});

これらの項目を表示して下さいという意味ですね。

title: 'Index',
content: msg,
link:{href:'/', text:'※トップに戻る'}

res.render('other.ejs',

''の中身が表示するときに使うファイル名になっています。そのため、renderで使っている値と、’’で使っている値に齟齬があると、値の定義がされていませんというエラーが出ます。

f:id:yume100kairi:20190114184322p:plain



.index.ejsを使おうとしていたな.....そっちには、table定義していたな、そういえばないな......！！という過程で気づきました。

これはちょっと詰まった部分.....

6フォームの作成

<form action="/" method="post">
<p><input type="text" name="message">
<input type="submit" value="送信"></p>
</form>
 

index.jsのソースです。これは抜粋版

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.post('/', (req, res) => {
var msg = 'This is Posted Page!<br>' +
'あなたは「<b>' + req.body.message +
'</b>」と送信しました。';
res.render('index.ejs',
{
title:'Posted',
content: msg,
data:data,
link:{ href:url, text:'※別のページに移動'}
});
});
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));

bodyParserがいろいろやってくれるため
expressのフォーム送信ってこれだけ書けば完成です。

 

●終わりに

 

expressのフォーム送信ってこれだけなんです。
生身のNode.jsのフォーム送信方法はメソッド用意して、データ受信の処理書いて、データの中身をプログラム内で使えるように書き換えて、という多くの段階を踏んでいました。

正直これだけ書くととっても大変......

確かに、楽な方法だけでもよくね!?という考え方も一理あるとは思っています。

しかし、統計学的な現象として平均への回帰という言葉があります。

この言葉でググったら一発目にwikiが出てきたためちょいと引用

ja.wikipedia.org

楽が先に来るのか後に来るのかの違いということですね。

それならば、先に面倒なことしておいて後の理解をスムーズにしたほうがいいよねというのが個人的な感想です。
というわけで、次回は生身のNode.jsのフォーム送信方法も紹介していきます。

※閑話休題として、こういうネタをもう少しまとめた形で書くかも、←さっきの書き方は割と個人の所見バリバリで書いてしまったから。