みずまずぷろぐらみんぐ日記

日々学んだことや頭に浮かんだことを、そこはかとなく書き連ねます

Herokuを使ってみたよ

Webアプリ

こんにちはー、みずまずです。

最近競プロが楽しくてN予備の学習が停滞していたので、今週はN予備校メインで進めています。
今回の記事はほぼその進捗日記のようなものです。


Hubotを使ったSlackのタスク管理ボットの開発も終わり、ここ数日はNode.jsでhttpサーバーを立ててアンケートをとる(サーバーにデータを送る)Webページを作っています。
HTTPのGETメソッドとPOSTメソッドの練習ですね。

同じようなフォーマットの複数のアンケートページを簡単に実装するために、テンプレートエンジン(Pug)というものも初めて使いました。
可愛い名前だなぁ…。


テキスト通りに進めれば実装＆動作はすらすらいくのですが、細かい部分でたくさん疑問が湧いてしまい、それを消化するのに時間がかかった一週間でもありました。

こういうの、"これはこういうもの" "こういう書き方するの"で片付けられれば楽なんですが、気になると放っておけない&理屈なしで覚えられない性格なんですよね……。

数ヶ月後にはこんなん当たり前でしょ？と、もやもやしたことも忘れて使っているのかもしれませんが、後々自分が誰かに教える立場になれた時、かつて自分がどこでつっかかって時間を費やしたのか覚えていた方が、相手の立場に寄り添えるのかなと思うのでここに書き残しておきます。
(この記事完全に自分が振り返る用ですね。)


リクエストオブジェクトのurlにはホスト名が入らないの？

サーバー立てて最初に、GETでアクセスされたらアクセスしたURLを画面に返すだけのテストをしたのですが、ホスト名部分が入ってなくて疑問に思いました。
まぁ結果そういうものだ以外の何物でもないのですが、ファイルに追記したconsole.log(req);とリダイレクト( (実行するコマンド)>> (適当なファイル名) )でリクエストの中身をファイルに出力する方法を知れたり、リクエストの中身見れたりと発見は多かったです。
(この方法はN予備校のフォーラムで教えてもらったのですが、教えてくださった方によると正攻法はデバッガーを使うことらしいです。)
リクエストの中には想像よりずっといろんなデータが入っていて驚きました。

読み込み用のストリームをpipe関数を使ってレスポンスに流す時は.write()はいらないの？

今までレスポンスの内容はres.write('ほにゃらら～');みたいな感じで書いていたので結構困惑しました。
↑の必殺中身をログに出しちゃう法とかもやったのですが、余計わからなくなりました。
こちらもフォーラムで質問したんですが、レスポンスオブジェクト(公式リファレンス的にはhttp.ServerResponse)はストリーム形式であり、また.write()は引数に取ったものをストリームにして追加していくメソッドだよ、との回答を頂いて納得しました。
そりゃpipe関数で流すなら.write()出てきませんわ。

cloneした練習問題リポジトリのあるブランチに～～.jadeというファイルがあった。これ何？

別のブランチだとそれが～～.pugになっていたので何なんだろうと思ったら、jadeはPugの前の名前だったんですね。
拡張子まで変えちゃったんだ…当時不便なかったのかな………。まぁ今の方が名前かわいいしなぁ←

Heroku

アカウント登録をしました。
Herokuについては"AtCoder ScoresがHerokuで公開してたなー"くらいの知識しかありませんでした。
以前githubを使い始めた時に知ったgithub pagesじゃなく、わざわざこっちを使うのか？などとさえ思っていましたが、github pagesは静的なウェブサイト用のプラットフォームなんだね……。
無料で使うには制限があるとは言えHerokuしゅごい…。


N予備のテキストだけでデプロイまでできてしまったんですが、後になってアカウント登録後に出てきたチュートリア的なものを読んでみたら、凄く丁寧に書かれていてびっくりしました。
英語も読みやすく文章の量も少なく抑えらえていて、それでいて1つ1つの手順が省略されることなく説明されていました。gitコマンドとかコピペできるので初心者でもすぐ使えそう。
今日は最初の数ページ読んだだけですが、heroku logs --tailでリアルタイムにログを拾えるというN予備のテキストにない技も知れたので、時間のあるときに一度最後まで読んでみようと思います。

process.env.PORTとは？

いきなり出てきてなんやこれ～ってなったんですが、普通にprocessオブジェクトの中のenvというやつにいろんな環境変数が突っ込まれていて、その内のPORTってやつだよ、と書いてあげてるだけでした。
ちなみに実際はconst port = process.env.PORT || 8000;のように選択的代入を使って書いており、自分の環境ではPORTなんて何も設定してないので8000番ポートを使うことになり、console.log(process.env.PORT);の結果はundefinedでした。
Herokuとかで動かす時はHerokuくんが勝手にPORTにポート番号入れてくれるっぽいですね。
まぁそうじゃないとポート番号指定するとき困っちゃうか…。

snap(Snappy)って何？aptと何が違うの？自分で何か入れる時どっち使えばいいの？

これはHeroku CLIを入れる時にでてきました。sudo snap install ～～みたいな感じで。
調べたらそこそこ違いがありましたが、今回みたいに公式がsnap使ってる時はそれに従うようにして、それ以外は今のところaptで入れば基本そっちでいいかなと思いました。
そんなに古い環境使ってるわけじゃないしね(どこからが古いかと言われたらアレですが)…。


おまけ

日曜日のABC173でなんと初めてA,B,C,Dの4問を解くことができ(Dで2ペナ)"緑パフォ"というものを出しました！

みずまず　大☆成☆長

ここ2回のABCではコンテストになるとC問題がACできない状態に陥っていたのですが、こつこつ精進していて良かったです。

コンテスト終了残り7秒でD問題ACした時は心臓ばっくばくでした。
今後の人生でもそうそうないと思います……頭の中でThe Summer Wars流れてましたし(←もっと早く解け)


とは言えまだ茶色にはなれていませんし、"D解けたのまぐれだろ～"にならないように、これからも精進していきます。