コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

どこまでできるか分からないけどもNをやってみる。2.5882

2020年 Nの旅

コロナの影響で某学習サイトが無料開放しているのでできるところまで進めていこうと思ったんでやってみることにしました。
f:id:andron:20200419085049p:plain
第3章、全部終わらせたかったんだけど終わんなかったから途中までの投稿になります。それでも前回記事よりボリューミーになったから許して。一方的に許して。


前回記事
inujini.hatenablog.com



今回やったこと!

第三章(サーバーサイドプログラミング入門)を途中まですすめました。

1. はじめに
 セキュリティが大事だよっていうお話。
 安全なウェブサイトの作り方:IPA 独立行政法人 情報処理推進機構
 全然レッスンと関係ない話んだけど、IPAのこことかが参考になりそうだと思った(小並感)。


2. Node.js
 Node.jsのインストールについてのお話。nvm*1つかうことが推奨されてた。レッスン中ではv10.14.2 でやっていくらしいですよ。
GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

んでNode.js で、1 以上の自然数の階乗を求める関数を実装してみましょう。みたいなお題があったんで似たようなお題があるここを久しぶりに触ってみた。
Train with Programming Challenges/Kata | Codewars

f:id:andron:20200420221936p:plain
話を脱線してこんなんやりました。これやっていくつかの言語はそうだこの手のやつってパターンマッチが生きるんだってのを思い出した。普段から関数型言語つかってないと忘れてしまいますね…。あとアセンブリ言語(NASM)で階乗計算解くのができてない。


3. アルゴリズムの改善
 突然のO記法の話でてきた。
 参考:ランダウの記号 - Wikipedia
アルゴリズムといえば計算量!この手のサイト絶賛している人こういう情報あるって拾わないのよね…。


4. 集計処理を行うプログラム
集計のお話。データがこっからとってくるといいらしい。
GitHub - progedu/adding-up: 入門コースの3章2節 集計処理プログラム (ISC License)
とってくるデータは変更されていないだろうとか思ってたらブランチごとにCSVの中身微妙に異なるんですね……。

f:id:andron:20200420222004p:plain
JupyterでNodeJS使えるようにしておくとこういう集計関連の内容は視覚的にいじれて楽しいです。

トップページ - RESAS 地域経済分析システム
そういうば、集計データってこういうサイトあるんですね。


5. ライブラリ
先人たちの知恵であるライブラリを使うとミスが少なるぞ!
例:
標準ビルトインオブジェクト - JavaScript | MDN
Index | Node.js v10.14.2 Documentation
んで、標準ライブラリが例ってなんだか肩透かし感ある。

そしてyarnの導入回のような気がする……。
Yarn
yarnをいれよう!yarnはいいぞロゴがにゃんこだ!こんなのyarnじゃなくてnyaaanじゃないか(?)。はい。そして練習としてaxios導入します。
GitHub - axios/axios: Promise based HTTP client for the browser and node.js

あとnpmパッケージの作り方講座とかあります。
パッケージの作成 | Yarn
公式資料だとこの辺に書いてあったりします。


6. Slackボットの開発
 ボットの開発というよりもSlackの使い方講座って感じがした。
inujini.hatenablog.com
 僕がこの辺でふざけていた内容がちゃんとした文章で説明されています。


7. HubotとSlackアダプタ
 ここからSlackボットの開発回。前回書いた記事に同じことをやります。
GitHub - Andou666/hubot-test 
前回載せてた知らないけどもGlitchで動かすサンプルに作ったやつ置いておきます。


8. モジュール化された処理
9. ボットインタフェースとの連携
11. 例外処理
f:id:andron:20200421123142p:plain
Hubot Todo Test
こんなやつをローカルで作ります。僕はGlitchで作っちゃってるんでそのままオンラインで稼働できる状態になってます。


10. 同期I/Oと非同期I/O
File System | Node.js v13.13.0 Documentation
File System | Node.js v13.13.0 Documentation
この辺りを使って同期と非同期の解説してます。



12. HTTPサーバー
ここからボットの話でなくてWebサービスを作ってみようとかそんなお話。
Node.jsでサーバを立てる
とりあえずまだフレームワークをつかわずにNode.jsでサーバを立てる話。作るものはこんな感じの作ります。最終的にはHeroku使うことになるんですけどDB使うまでの間しばらくはGlitch使ってなんやかんやできそう。

ところでテンプレートリテラルって${}で展開できたと思うんですけどなんかうまくいかない……。なんでなんだろ。


13. ログ
ログってタイトルついているからログファイルの掃き出しまでやるのかと思っていたけどもログレベルの確認までだった。
f:id:andron:20200421065744p:plain
エラーログの確認:ソース
ファイル貯めこまないならGlitchでもこんな感じで確認できる。


14. HTTPのメソッド
15. HTMLのフォーム
GET、POSTを使ってフォームを作ってみようみたいな話。Node.JSでやります。
どちらが食べたいですかアンケート
んで、こんなん作ります。


16. テンプレートエンジン
なんか知りませんがPug(旧Jade)使って書き替えます。
Pug公式:Getting Started – Pug
レッスンに使ったであろう古いリポジトリ漁っているとJade表記のものがあったりなかたりします。僕の記憶では互換あったと思うんだけどなんかjadeだとうまくいかないことあったんで素直に新しいpugでやるといいと思う。
f:id:andron:20200420024259p:plain
テンプレートで遊ぶ場合はCodePen辺りがPug対応しているんで練習に何か作るにはそこがちょうどいい気がします。

何食べたいかアンケート
別にやる必要はないですがGlitchでも確認したかったのんで上のやつのpugバージョン置いておきます。実際の画面に書かずにREADME(画面下部分)の方に動くもの載っていますんで中身を見る場合はご注意ください。


17. HerokuでWebサービスを公開
ここでHeroku使うかGlitch使うかちょっと悩んでいたりする。Herokuへのサービスデプロイの仕方についてのお話。
inujini.hatenablog.com
僕はかたくなにHeokuとかいうサービスを使わないんだけど、過去記事漁ってったら以前に触ったことあったわw。


18. 認証で利用者を制限する
BASIC認証の話をするっぽいのでGlitchでいけると思うのでここもGlitchでやっていこうと思う。
BASIC認証
実際に例として作るとこんなんなるです。

使うパッケージはコレの@3.2.3……。
http-auth - npm
最新版にするとなんかうまく動かないんだけど、どのあたりバージョンアップで変更されてんですかね……(バージョンに起因する問題までわかっているのに解決策を調べない人間の屑発言)。


19. Cookieを使った秘密の匿名掲示
ここから掲示アプリ開発についてのお話。初回はCookieについての話。

Cookie
なんでGlitchでまとめちゃった。Cookieがどういうものかはリンク先にも雑にまとめたけど、深く知りたい場合ググろうね!


20. UI、URI、モジュールの開発
掲示板のお話つづき。掲示板をどう構成していくかの話になります。

実践の説明がリダイレクトについてになります。

const server = http.createServer((req, res) => {
  res.writeHead(302, {
    'Location': 'https://www.google.co.jp/'
  });
  res.end();
});

またGlitchで作ったやつ投げるでもいいんですが、さすがにこの実装はローカルで確認するにとどめたいかなってなったのでコードだけ晒す。上の例だとそこにアクセスするとGoogleに飛ばされます。つまり、Glitchに公開するとアクセスしたとたん問答無用でGoogleに飛ばすサイトになります。


といったところまででいったん区切ろうかと思います。ここ(19回)から終わりまで掲示板アプリを作ろう回になってしまって途中で区切るには都合悪いので……。今回は長いね……。ここら辺からお題通りにまじめにやるとGitHubリポジトリをものすごい作ることになるのでGitHubリポジトリを充実させたいって人にはオススメ(?)。

余談

f:id:andron:20200421153132p:plain
今回は著作権とライセンスについて学んでしまった。だけど読みものコンテンツなんで特にいうことは……。そういえばWebデザインやってないね……。

つづく

*1:Node.jsのバージョンを管理してくれるやつ