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

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

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

学習サイト
2020年 Nの旅

コロナの影響で某学習サイトが無料開放しているのでできるところまで進めていこうと思ったんでやってみることにしました。
f:id:andron:20200419085049p:plain
また中途半端にやって終わらなかったよ……。


前回記事
inujini.hatenablog.com
ブログなんかに余計なこと書いてまとめなければ中途半端にならなかったのに余計なことするから……。


今回やったこと！

1. はじめに
フレームワークを使おうという呼びかけ回。あと最終作品の「予定調整くん」の準備。


2. Web フレームワーク
Expressを使ってみよう回。
Expressの例
GlitchのデフォルトがExpressでこんなの作れるよってあったんでそれをそのままペタリ。とりあえずDBつなぐとかないんでGlitchで動作確認させます。デフォルトのまま使うと色々と機能が足りなくてレッスン内容がうまく落とし込めない。

'use strict';

const debug = require('debug');
const debugInfo = debug('module:info');
setInterval(() => {
  debugInfo('some information.');
}, 1000);
const debugError = debug('module:error');
setInterval(() => {
  debugError('some error.');
}, 1000);

const createError = require('http-errors');
const express = require('express');
const path = require('path');

ただ例としてあがっているのがこういう１秒ごとにログを垂れ流すやつなんで確認つくらなくてもいいかなとも思ったり……。


3. ExpressのAPI
ヘルメットを使うと安全にできるって。
GitHub - helmetjs/helmet: Help secure Express apps with various HTTP headers

const express = require('express'); // express
const helmet = require('helmet');
const app = express(); 
app.use(helmet());
// ---

僕これよく知らないんだけど、これだけでなんとかしてくれるらしい。楽だね。まあ詳しいことは公式見よう。

あとはルーティングの話がちょろっと……。
Express
そんでなんやかんやして作ったやつがこれになります。ソースのREADMEに書いてますが/usersと/photosに飛べます。

Booming Carnation E9h2u6u6fd
んでソースがこんな感じになります。Glitchで動かすのに手間取ってしまった……。

f:id:andron:20200424172215p:plain
この画面だとなぜか表示されない……。接続先がずれるんかな……。


4. GitHubを使った外部認証
これを使ってGitHubと連携させてみようっていうお話。
Sign in to GitHub · GitHub
本文読んでて上のリンクいきなり貼られてて何やっているか追えなくてつらかった。

f:id:andron:20200424233017p:plainf:id:andron:20200424233020p:plainf:id:andron:20200424233011p:plainf:id:andron:20200424233014p:plain
こういうの欲しかったな……。

それでなんやかんやして動かすとログイン・ログアウトの確認ができるようになります。
f:id:andron:20200425011357p:plain
Verbose Materialistic Mustang
んで、Glitchでもいけるのかと試してみたら動いてしまった。.envファイルの中身（登録した Client ID、Client Secretなど）は全消ししているので確認の際はお手数ですがご自身のテストデータをご用意してください。



5. テスティングフレームワーク
jestを使ってテストをしてみようてきなやつ
Jest · 🃏 Delightful JavaScript Testing

Damage Calc Jest N
お試しでGlitchに載せてみたやつ。

PASS test/test.js
#effectiveDamage()
✓ 正常なダメージ計算ができる
✓ 負の異常値におけるダメージ計算が出来る
✓ 2000より大きい異常値におけるダメージ計算ができる
✓ 実効防御力は0未満にならない
✓ ダメージは小数点以下を四捨五入して整数にする
Test Suites: 1 passed, 1 total
Tests: 5 passed, 5 total

こんな感じのテストをパスできるようにコードを修正していきます。

f:id:andron:20200425015833p:plain
作成者はここのログから確認できるんだけど外部からだと見えないのよね……。元のコードを大きく変えず見える形にするにはどうしたもんか……。


6. 継続的インテグレーション
CIツールを使おうな話。GitHubもCIツール会ったような気がしたけどもここで使うのはCircle CIです。
Continuous Integration and Delivery - CircleCI

Jest設定：Collecting Test Metadata - CircleCI
バッジ：Adding Status Badges - CircleCI
以上リンクを参考にCIツールを使ってみような話。「予定調整くん」で使うための説明回的な内容な気がする。


7. クライアントのフレームワーク
Webpackな話。僕の中ではnpx webpackでJSファイルまとめてくれるやつって認識だったりする。そしてそれは今も変わらない……。

{
  "dependencies": {
    "package-name": "git+https://github.com/<user>/<repo>.git"
  }  
}

ところでnpmにないリポジトリってこうやって引っ張ってくることできるんですね…。オープンで公開されているんで申し訳ないけども某学習サイトさんのリポジトリ使わせていただいてます。

つくったもの
Express
ソース
Broadleaf Pine Whistle



8. DOM 操作のフレームワーク
jQuery使います。それ以上のことを特にいうことがない。ところでjQueryってフレームワークなんですかね…。いつもあれの分け方に悩む。
jQuery
内容はこんな感じ。Webpack使ってるんでソースコードの方はすっきりしてます。書く内容はいつものjQuery。


9. AJAX
これ。

Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。

DOM操作フレームワークでjQuery使っていたからjQueryでajaxなやつ書いて練習おしまいとか思ってたら読みもの回だった。そしてサンプルコードはAJAX使ってロードアベレージ調べるやつだった。


10. Websocket
これ。
Socket.IO

WebサーバとWebブラウザの間で双方向通信できるようにする技術仕様。サーバ側から任意のタイミングで送信を開始でき、プッシュ型の情報配信アプリケーションを手軽に実装できる。

これもサンプル例がロードアベレージ調べるやつなんですよね。AJAX同様に動かすのにいい案思いつかないのでとりあえずこんなのやりすよって言う報告だけ……。


11. RDBMSとSQL
ここからRDBMSの話に入ります。まずは以下文法の確認

  • INSERT
  • SELECT
  • DELETE
  • UPDATE
  • WHERE 句

僕はコンソール（黒い画面）からデータをいじるでもいいんだけど、こういったのいじるのこれつかっちゃう……。
A5:SQL Mk-2 - フリーの汎用SQL開発ツール/ER図ツール .. 松原正和
なんかこのツール、フリーソフトだけども普通に企業やなんかで何食わぬ感じでみんな使っている印象ある。


12. データモデリング
RDBの設計のお話です。

  1. データベース管理したい対象（エンティティ）を決める
  2. それらの関わりを考える
  3. データとして持つ項目をまとめる

色んなところで言わているこれを体験してみようとかの話。でも完走している人この辺りの話している人いない。

さて、いい機会なのでVSCodeにPlantUML導入してER図描くなどを試してみようと思った。
f:id:andron:20200424180253p:plain
レッスンではこんな感じのを例として挙げているんだと思ってる。僕が勝手にやっているので正解とかは知らない。

f:id:andron:20200424172010p:plain
ところで拡張機能の「PlantUML」だけだとこれ（下のやつ）ないって言われるんね……。
Graphviz - Graph Visualization Software
あ、ちなみに今回確認する文法の方はALTER TABLEです。


13. テーブルの結合
テーブル結合のお話。前のレッスンでテーブルを分けたので見やすく加工するために結合などをしてみようとかそんな感じ。内部結合と外部結合について書かれてます。


14. インデックス
インデックスをつけて高速化しよう的話。CREATE INDEX ON table_name (column_name)こんなん。となんで高速化できるかの解説についてのお話。特にコード書くことがない……。

#!/bin/sh
PG_USER='***'
DB_NAME='***'
GH_PAGES="***"
SQL_DUMP="dump_${DB_NAME}.sql"

if [ $USER = $PG_USER ]
then
  SUDO=""
else
  SUDO="sudo -u $PG_USER"
fi

$SUDO dropdb --if-exists "$DB_NAME"
$SUDO createdb -T template0 "$DB_NAME"

curl -o- "${GH_PAGES}${SQL_DUMP}" | $SUDO psql "$DB_NAME"

ところで、ここまでのレッスンこういう感じのシェルを使うんですよ。練習用の仮想環境使うってのが前提だから問題ないと思いますが、僕みたいにいい加減なことやっていると既存のDB消失*1する可能性あるんで消したくないDBがある場合は注意してください。


15. 集計とソート
集計に使える関数の確認。
9.20. 集約関数

あとは

  • GROUP BY 句
  • HAVING 句

とかの構文確認。



16. 「予定調整くん」の設計
謎のアプリ「予定調整くん」の設計のお話*2。


そんな感じでこれから作るアプリで使うツールを個々に確認していきます。

時に、僕はまだこれやっとけば将来安泰みたいな情報に懐疑的なのよね。情報商材系のやつに触れすぎてしまったせいでそうなっているってのもあるんだろうけど……。どうにかなっている人、運がよかったとか生存者バイアスじゃないかな。

さて、僕がなんでGlitch使って細かくこんなことやっているのかといったら、企業に就職できる技術がつくのはまやかしだと思っているけども単純に「動くもの作れるのは楽しいよ」ってのが根底にあるからだったりします。だから実際に動いているものみて興味もってもらいたいなってのがあるんですよ。これ続けている理由はそれだけです。

プログラミングも、教育も今の時代は弱者を騙す情報商材でしかないから無料でできるうちにやっていきたいなってのもあったりｗ。まあ、僕はこのカリキュラムをやれって言う気はないです（おい）。



まあいいや。次回謎のアプリ予定調整くん完成させて4章終わらせてからちゃんとした感想を書いていこうと思います。


つづく

*1:$SUDO dropdb --if-exists "$DB_NAME" ここでDB名が一致するものを作っていると消えます。

*2:ごめんなさい。ふざけました。次回ちゃんとしたやつできるはずなんでそれで勘弁してください。何でもしますから。

[トップへ]