Microsoft Azureの無料アカウントの作成
Microsoft Azureの無料アカウント作成方法
Node.jsで作成したアプリをデプロイするためにAzureのアカウントを作成しました。
Azureの使い方はこれからいろいろ調べたいですがとりあえず作成→デプロイがうまくいったので手順まとめておきます。
Azureを始める前に
Azureを使うにはMicrosoftアカウントとクレジットカードの登録が必要になります。
今回のように無料アカウントを作成する場合でも本人確認のために必要です。
手順
まずMicrosoft Azureのサイトトップで「無料で始める」クリック
次の画面も同じ
Microsoftアカウントにログインするように言われる（持ってなかったらここで作成）
ログインすると個人情報入力画面に進みます。 個人情報入力画面。入力したら次へ。
（ちなみに既にAzureアカウントを持っている場合はこの画面が表示されます）
確認コード入力画面。電話かメッセージか選べるので自分はメッセージを選択。 送られてきたコードを入力します。入力したらコードの確認へ。
カード情報入力して次へ
これまでの入力情報に間違いなければサインアップ
アンケートに答えて送信
以上で登録完了です。
以下がAzureアプリのトップ画面です。ここでVMを作成してデプロイする流れになります。
vueはじめましたその１
はじめてのvue
仕事でvueを使うことになったので遅ればせながらvueを勉強し始めました！
仕事で使うからにはしっかり覚えたい！ということで、ここでは勉強したことをアウトプットして脳みそに定着させることを目標にしています。
とはいえNode.jsのほうも勉強したいし更新もしていきたいので、当面はvueとnodeを4:6くらいで更新していけたらいいなーと思っております。
素人Web屋の解説なので同じ初心者の方に向けて説明できたらって感じです。
まずは環境構築
自分はnpm+gulp+browserifyで環境構築しました。
今はwebpackのほうが主流だと思いますがbrowserify使い慣れていたので。
Node.jsをインストールしていることが前提です。（Nodeをインストールするとnpmもインストールされます）
まずはpakage.jsonとgulpfile.jsを作ることから始めます。
npm initはnpmを初期化してpackage.jsonを作るコマンドです。
package.jsonはnpmでインストールしたパッケージをリスト化したものでjson形式で記述されています。
npm init touch gulpfile.js
あとはvueを使えるgulpfile.jsを書いていけば環境構築は完了です。 長いのでgithubに上げておきます。とりあえずvueを動かすことが目標のディレクトリ構成なのでだいぶ散らかってます。（実際のプロジェクトには使えないと思います笑） https://github.com/tomoyukionodera/vue_test
ちなみにこちらのgithubに上がっているソースを参考にさせていただきました！ありがとうございます！
FAST Browserify + Reactify + Babelify
vueをはじめる前に
vueを簡単にまとめると柔軟に設計できるjsフレームワーク。
再利用可能なコンポーネントごとに分けて記述できるので柔軟性が高い。
使い方にはざっくり以下の使い方がある。
cdnを読ませて使う方法
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
npmでvueをインストールして使う方法（こっちでやります）
npm install vue
そして
コンポーネントを使わない方法 （今回はこっちについて） コンポーネントを使う方法
※あと大規模な開発になるとvuexというVue.jsアプリケーションのためのフレームワークを使うことになると思います。
こちらは学習コストがvueより高いので自分もまだ勉強始めてません。始めたらこちらについても書こうと思います。
使い方
vueをはじめるときにまずやることは2つあります。
1 vueインスタンスを作成すること
2 データをマウントする箇所にidを振ること
です。
main.jsでvueインスタンスを作成します。
const Vue = require('vue')
const vue = new Vue({
el: '#app',
data: {
text: "hello vue.js"
}
})
index.htmlでマウントしたい要素にvueインスタンスに対応したidを振ります。
<body>
<div id="app">{{text}}</div>
</body>
これでブラウザにはhello vue.jsと表示されます。
vueインスタンスの説明
vueインスタンスを作成するときはまずvueのモジュールをrequire()して用意します。
newしてvueインスタンスを作成します。vueインスタンスは基本的に以下のオプションを指定します。
el: マウントポイントを指定。既存のDOM要素にvueインスタンスを与える。 data: vueインスタンスのためのデータオブジェクト。関数を入れることもできる。
このほかにも代表的なオプションとして以下がある。
methods, computed, props, そしてライフサイクルである。
ライフサイクルとは
methods, computed, propsについては実際に使うときに説明しようと思うがライフサイクルはここで説明しておきます。
ライフサイクルは簡単にいうとインスタンスができる前～破壊された後までを8ステージに分割して、そのステージごとオプションとして指定できるよってことです。
ステージごとにフックが用意されているので好きな処理を割り込ませることができます。
ステージは、beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed です。
順番に、インスタンスができる前、できた後、マウントされる前、された後、データが更新される前、された後、インスタンスが削除される前、された後です。
分かりやすい例としてはインスタンスを作成して初期値を持たせておきたいときです。
上のソースと結果は同じですが、以下の書き方でブラウザにテキストを表示させることもできます。
const Vue = require('vue')
const vue = new Vue({
el: '#app',
data: {
text: ""
},
created: function(){
this.text = "hello vue.js"
}
})
マウントポイントを設定したHTMLの説明
マウントポイントになる箇所にidを振りますが、インスタンスのdataオブジェクトのtextにアクセスするためには{{}}を使います。
これはマスタッシュ構文というもので、vueをコンポーネント化しない場合、これを使うことが基本的な形になります。
<div id="app">{{text}}</div>
読んでいただいてありがとうございました！素人Web屋の解説なのでご指摘大歓迎！！
次回はディレクティブというvueで使用する特殊なHTML属性とmethodsについて書きたいと思います！
Node.jsのストリームAPIについて
Node.jsのストリームAPIについて
Nodeの勉強をしてストリームAPIを扱う処理がよくわからなかったので調べました。今日はストリームAPIについて書こうと思います。
Node.jsには大きいデータを扱うとき、ストリームAPIを利用することでメモリの消費を抑えることができます。
ストリームAPIは、データを少しずつ読み込んだり、書き込んだり、変換したりできます。
ストリームAPIをざっくり言うと、
・「データの流れ」を抽象化するためのインターフェース
・ストリームはオブジェクト
・すべてのストリームはEventEmitterのインスタンス
・ストリームの内部データはバッファ。（内部バッファにデータを格納していく。）
ストリームを理解するまえにEventEmitterとバッファについて整理する必要があったのでまとめました。
EventEmitter
EventEmitterはオブジェクトに関数をアタッチすることができるオブジェクト。（イベントを発火させることができる機能）
EventEmitterはNode.jsのeventモジュールの中に入っているオブジェクトなので以下で呼び出せる。
var EventEmitter = require('event').EventEmitter;
EventEmitterはイベントを発行する使い方(emit)とイベントを受け付ける使い方(on)の2通りの使い方がある。 例えば以下のソース
var EventEmitter = require('event').EventEmitter;
function hogeFunc() { //イベントを受け取る
var ev = new EventEmitter;
ev.on('data', function(data) {
console.log('on', data)
});
}
ev.emit('data', 1); //イベントを発行する。dataイベントを発行して１を渡す
// => on 1
EventEmitterを継承することでemitやonを使えるようになる。
Node.jsではイベントを生成するすべてのオブジェクトはEventEmitterのインスタンスである。
そして重要ポイントとして、streamはEventEmitterを継承している！！
一瞬ストリームの話に戻りますが、ストリームには
ReadableStreamとWritebleStreamがある。
そしてReadableStreamによるファイル読み込み処理は次のように書く。
EventEmitterのインスタンスなのでonをつかってイベントを受け取れる。
そして'data'イベントで少しずつデータが流れてくるのが特徴！'data'イベントはデータ読み込み時に発生して、発生するごとにデータの破片がコールバックに渡されます。この破片をchunkという。
chunkについて、こちらも少しまとめる必要があったので詳しくはバッファを解説するときに書きます。
var readableStream = fs.createReadStream('filename');
readableStream.on('data', function(chunk) {
console.log(chunk);
});
ここで以下のソースを例としてあげる。
これは'data'イベントで少しずつデータが流れてくるときに、データを結合する処理である。詳しくはバッファの解説で説明します。
onはEventEmitterのインスタンスでしか使えないはずなのに、
reqがonを使ってイベントを受け取っているのはなぜ可能か。
req.on("data", function(chunk) {
data += chunk;
});
reqはhttp.IncomingMassageクラスのインスタンスであり、ReadableStreamインターフェースを持っている。
ReadableStreamインタフェースを持つので情報を取得する場合は'data'イベントを追加すれば取得できる。
したがってここではonと'data'イベントを使っている。
バッファについて
EventEmitterのreadableStreamを使って情報を取得するために'data'イベントを使うが、そのときにバッファのことも理解する必要があるので合わせてこちらにまとめました。
・バッファとはメモリ上に確保されるバイナリデータを格納するための変数
・Node.jsではBufferクラスとして提供されている
・バッファに一時的に情報を保存することをバッファリングという
・内部バッファにデータを格納していく
例として上の説明にも出てきた以下のソースを解説していく。
req.on("data", function(chunk) {
data += chunk;
});
まず'data'イベントが発生するごとにデータの破片であるchunkがコールバックに渡されます。
このchunkは'data'イベントがデフォルトで提供するBuffer型オブジェクト(bufferクラスのコンストラクタ)になります。
確認方法は以下
console.log('typeof chunk:', typeof chunk); //typeof chunk: object
console.log(Buffer.isBuffer(chunk)); //true
そしてBuffer型オブジェクトをconsole.logで確認すると、そのオブジェクトに格納されたバイナリ列が16進数で表示されます。
console.log('chunk:', chunk);
//chunk: <Buffer 6e 61 6d 65 3d 25 45 33 25 38 33 25 38 30 25 45 33 25 38 33 25 39 46 25 45 33 25 38 33 25 42 43 25 45 33 25 38 33 25 38 36 25 45 33 25 38 32 25 41 44 ... >
これらを踏まえたうえで以下のソースを説明します。
var data = ""; //文字列型変数として定義
var posts[]; //後ほど使います
req.on("data", function(chunk) {
data += chunk; //バイナリ列が格納されているBufferオブジェクトのchunkをdataに格納していく。こうすることでBufferを文字列にキャストして結合されていく。
console.log('data:', data); //data: name=%E3%83%80%E3%83%9F%E3%83%BC%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88
});
バイナリデータが無事にキャストされて文字列としてdataに格納されました。
ここまでだとデータの扱いが難しいのでさらに以下の処理でデータを扱いやすくします。
req.on("end", function(){
var query = qs.parse(data); //queryStringを使ってdataをオブジェクト形式にパースします。
console.log(query); //query: { name: 'ダミーテキスト' }
posts.push(query.name); //これで投稿データをposts配列に格納できる
renderForm(posts, res); //postsに格納されたデータをrenderFormメソッドに渡してejsでレンダリング
});
Buuferからstringへのキャスト、パースしてオブジェクト形式に変換するあたりは理解するためにtetatailで質問しました。
https://teratail.com/questions/126265
以下は参考サイト
https://www.tutorialspoint.com/nodejs/nodejs_event_emitter.htm
はじめてのNode.js：Node.jsのイベントシステムを知る 3ページ | OSDN Magazine
[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET
http://info-i.net/node-js-stream
Node.jsの標準モジュールquerystringについて
Node.jsの標準モジュールquerystringについて
Node.jsを勉強する中で理解が追い付かないところがあったので整理してみたいと思います。
querystringの使い方
querystringはクエリ文字列をオブジェクト形式に変換してくれるNode.jsの標準モジュールの一つです。
※標準モジュールとはNode.jsとともに標準でインストールされているもの。つまりnpmインストールしなくても使えます。
標準モジュールには他にもEvents,stream,buffer,httpなどいろいろあります。種類は以下参照。
https://nodejs.org/api/index.html
querystring単体は以下参照
https://nodejs.org/api/querystring.html#querystring_querystring_parse_str_sep_eq_options
var qs = require('querystring');
//デフォルトでは = を割り当て文字として認識するので以下は変換失敗になる
console.log(qs.parse("name>tom")); // { 'name>tom': '' } parse失敗
//以下は変換成功
console.log(qs.parse("name=tom")); // { name: 'tom' } parse成功
上のソース例はシンプルにパースした例だけど実際もっといろいろできます。
例えば複数のクエリが来てもデフォルトで対応できます。セパレータはデフォルトでは & 。parseメソッド実行時に引数を与えることで好きなセパレータに指定可能。
さらにオプションを使えば複数のクエリの中から任意の個数だけをオブジェクト形式にしたり、デコードしたり色々できます。
以下に詳しくまとまっています！とても参考になりました！
https://qiita.com/chuck0523/items/d8cff2ecfd208e8e513c
いったんここまで！疑問点は明日以降も追記していきます！
Node.jsでEJSを使う方法を追記しました！
Node.jsでEJSを使う！
Node.jsでEJSを扱う一例を以下にあげます。
書き方はいろいろあるかと思いますが、ドットインストールのNode.js入門を参考にしました！
まずEJSを読み込むためにfsモジュールとejsモジュールをrequireします。
fs.readFileSyncでEJSを読み込みます。readFileではなくreadFileSyncを使うのが大事です！（非同期ではなく同期処理をする！）
EJSをレンダリングするときに色々と処理をする場合は、レンダリングする処理を関数にしておくとスッキリ書けてわかりやすい！
下のソースでは、変数postsにデータが入っているとして、それを変数内のデータをEJSに渡してレンダリングさせる流れ。
function renderForm()を定義して、引数に変数postsとreqオブジェクトをとります。
reqオブジェクトはブラウザにレンダリングするために必要です。
var fs = require('fs);
var ejs = require('ejs');
var template = fs.readFileSync(__dirname + '/hoge.ejs', 'utf-8');
function renderForm(posts, res) {
var data = ejs.render(template, {
posts: posts
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
}
server.on('request', (req, res) => {
if(req.method == "POST") {
//処理書く
}else {
renderForm(posts, res);
}
});
server.listen(3000, '127.0.0.1');
console.log("server listening...");
Node.jsでファイルを読む
Node.jsでファイルを読む
今回はNode.jsで自分が指定したファイルを読み込む方法について書くよ！
手順としてはファイルを読み込むために必要なfs関数を使います。
fsはファイルを操作するために用意されているモジュールです。
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.on('request', function(req, res) {
fs.readFile(__dirname + '/test/index.html', 'utf-8', function(err, data) {
if(err) {
res.writeHead(404, {'Content-Type': 'text/plain'});
res.write("not found!!!");
return res.end();
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
});
server.listen(3000, '127.0.0.1');
console.log("server listening...");
fs.readFileでファイルを読み込んだ後の処理をコールバックで定義しているので、エラー処理のハンドリングとそうでない場合を条件式で出しわけします。
コールバック関数は第一引数にエラーオブジェクト、第二引数に読み込んだファイルデータが渡されます。
次回は今回使用したreadFile()と、次回以降登場するreadFileSync()の違いについて説明しようと思います。
ご指摘や訂正あれば大歓迎です！！！！！
Node.js+Expressでpostを使う！
Node.js+Expressでpostを使う！
前回やったこと
・Node.jsでgetを扱う。（クエリによってページ内の文言出しわけ）
今回はExpressでのpostについて書いていきたいと思います。
POST送信について
postはHTTPメソッドのうちの一つで、HTTPメソッドにはほかにもget,put,deleteとかあります。
HTTPメソッドっていうのは、ブラウザからサーバーに送るリクエストの種類のことです。
postだとHTTPリクエストボディに値を入れてサーバに送る。
以下の例はresultページにformからアクセスしたときに、formの値を取ってresultページに表示しています。
result.js
router.post('/', function(req, res, next) {
var name = req.body.name;
var age = req.body.age;
res.render('result', {
title: "結果！",
name: name,
age: age
});
});
req.bodyでHttpレスポンスボディから値を取得しています。.nameや.ageは値を取り出すためのキーです。
app.js
var resultRouter = require('./routes/result');
app.use('/result',resultRouter);
index.ejs
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form action="./result" method="post">
<input type="text" name="name" placeholder="name">
<input type="text" name="age" placeholder="age">
<input type="submit" value="送信！">
</form>
result.ejs
<body>
<h1このページのタイトルは><%= title %>です！</h1>
<ul>
<li>名前：<%= name %></li>
<li>年齢：<%= age %></li>
</ul>
</body>
これでlocalhost:3000/にアクセスしてform入力から送信ボタンを押すとresultページにpost通信されます！
あとはresult.jsのミドルウェア関数で処理してあげる感じです。
resultページに入力した名前と年齢が表示されるかと思います。
以上がpostの基本的な使い方でした！
Node.js+Expressでgetを使う！
Node.js+Expressでgetを使う！
Node.jsを触ってみた話4の続き。
前回やったこと
・複数のミドルウェアの処理をnext();でつなげる
今回はExpressでのgetについて書いていきたいと思います。
GET送信について
getはHTTPメソッドのうちの一つで、HTTPメソッドにはほかにもpost,put,deleteとかあります。
HTTPメソッドっていうのは、ブラウザからサーバーに送るリクエストの種類のことです。
getだとページをリクエストしていることになるんだけど、それと一緒にURLにパラメータをくっつけてサーバーに送ることができるよ。
以下の例はresultページにクエリを指定してアクセスしたときに、クエリの値によって画面の表示を出しわけるってことやってます。
result.js
router.get('/', function(req, res, next) {
var data = {
p01 : {
pageNum: 01,
author: "aaa"
},
p02 : {
pageNum: 02,
author: "bbb"
}
};
var query = req.query.p;
res.render('result', {
title: "結果",
pageNum: data[query].pageNum,
author: data[query].author
});
});
app.js
var resultRouter = require('./routes/result');
app.use('/result',resultRouter);
result.ejs
<body>
<h1このページのタイトルは><%= title %>です！</h1>
<ul>
<li>ページ数：<%= pageNum %></li>
<li>著者：<%= author %></li>
</ul>
</body>
これでlocalhost:3000/result/?p=p01でアクセスするとPageNumは01、authorはaaaが出力されます。
次回はpost通信について書きます！
