動画もあります〜操作系はこれをみると一発!

TypeScript は完全に理解しているが PosgresDB, RDB がほぼわからんあなたへ!

本コースは「TypeScript は完全に理解しているが PosgresDB, RDB がほぼわからん」あなたのためにあります!つまり私です!

ただ安心して欲しいのは、どちらもプログラミングである以上、PosgresDB について学習した結果形成される「メンタルモデル」ほぼ同じです。つまり、PosgresDB に対する操作のほとんどは、TypeScript + React の世界でも概念的には同じようなことを実行しているということです。

だとすれば、最初から TypeScript を使って PostgresDB のことを説明してしまえば、TypeScript エンジニアの我々の学習速度が高速になるのではないか。というのが本コースの基本コンセプトです。

基本的に全ての概念を TypeScript で補足します。もちろん完全にそれを実行できる式というわけにはいかないですが、何をしようとしているのか、どんな値が帰ってくるのか、何をすることが規約違反なのか、といったことを理解するためのメンタルモデルが形成されます。

課題図書:『SQL 第2版 ゼロからはじめるデータベース操作』

本講座の対象となるエンジニアには、以下の書籍を購入ください。この書籍は、本当に初心者のためのもので、プログラミングを全く経験したかたでも理解できる丁寧に書かれています。しかし、初心者向けといっても、実務で書いていないかたであればこのレベルを飛ばして高度な書籍にいくと、とつまづくと思います。(私がそうでした)焦らずここから始めていただければ確実にステップアップ可能です。

Screen Shot 2020-08-01 at 13.40.19

もしこの講座が簡単だと感じたら?

上記の書籍の作者と同じミックさんが書いている『達人に学ぶSQL徹底指南書 第2版 初級者で終わりたくないあなたへ』がおすすめです。こちらの本では、さらに Window 関数やテーブル結合といった、パワフルだが理解が難しい機能について深掘りをしています。ここまでマスターすると、実務で必要な実装の大半はクリアーできるようになっていることでしょう!

Screen Shot 2020-08-01 at 16.03.22

PostgresDB を Docker で立ち上げる

では早速ですが PosgresDB を Docker で立ち上げましょう。この DB に対して操作をしていきます。

  • docker-compose.yaml を作成する
  • 以下を記入
  • docker-compose up --build で Postgres を立ち上げる(ついでに Hasura も立ち上がります)
docker-compose.yaml
# 立ち上げる
# docker-compose up --build

# container を落とすと Metadata は消去される
# docker-compose down

version: "3.6"
services:
  postgres: # 必須
    ports:
      - 5432:5432
    volumes:
      - ./postgres-data:/var/lib/postgresql/data
    image: postgres:12
    restart: always
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine: # postgres を立ち上げるだけなら、なくてもいい
    image: hasura/graphql-engine:latest
    ports:
      - "8080:8080"
    depends_on:
      - "postgres"
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log

docker-compose.yaml の解説

hasura/graphql-engine って何?

そもそも services.graphql-engine にある hasura/graphql-engine はなんなんだ?と思われたと思います。これは我々が猛プッシュしている GraphQL ベースのアプリケーション開発ツールです。

Hasura は PostgresDB と連携した GraphQL API を自動的に生成してくれます。つまり、本コースで SQL を PostgresDB に発行して作ったテーブルや row を処理するための GraphQL API Server が勝手に作られるのです。

ということはあとは React + TypeScript + Apollo Client から Hasura に query を飛ばすだけで、アプリケーション全体が完成します。

実は本コースの真の目的は、Hausra のコアである PostgresDB をより高度に使いこなすためにあります。

とはいえ、Hausura を使ったことがない方、使う予定のない方でも理解できるように進めていきます。

volumes:

以下の定義によって、docker-compose.yaml がある同階層に postgres-data というフォルダを作り、ここに PostgresDB のデータを保存する、ということを定義しています。

volumes:
      - ./postgres-data:/var/lib/postgresql/data

注意して欲しいのは ./postgres-datapostgres-data では効果が異なる点です。前者は、docker-compose.yaml がある同階層に ディレクトリを作りますが、後者は docker 全体で共有するディレクトリを作成します。

つまり postgres-data:/var/lib/postgresql/data と書いた場合には、docker-compose 内の他のインスタンスからも、さらにいえば全く違う docker-compose のグループからも postgres-data を参照できるということです。

これが必要な場合もありますが、困ることもあります。例えば別の開発ディレクトリで同じように postgres-data:/var/lib/postgresql/data を参照してしまうと、こちらでも PostgresDB の内容が同じなってしまって困る、というケースがあります。とにかく名前が同じだったら別の開発ディレクトリでも同じものを参照してしまうからです。よくあるケースとしては、Todo アプリをある開発ディレクトリで作った後に、別のアプリを作成しようと思って別の開発ディレクトリを作って docker-compose を書いたが、どちらも postgres-data を参照した結果「あれ、おかしいぞ、始めて立ち上げた DB なのにさっきと同じデータが入っている。とりあえず消しておこう。」と消すと、Todo アプリ側も消えてしまった、というようなことが起きます。

そうならないためには ./postgres-data と冒頭に ./ をつけることで開発ディレクトにデータを保持すればいいのです。

ports:

ports:
      - 5432:5432
  • 左側: 自分のマシンの port 5432
  • 右側: docker 内の posgres が立ち上がっているインスタンスの port 5432

上記の定義によって「自分のマシンの port 5432」と「docker 内の posgres が立ち上がっているインスタンスの port 5432」をつなぎます。

つまり結果として、例えばターミナルやブラウザから localhost:5432 にアクセスすれば、docker の posgres につながるというわけです。

左と右がのどちらがどちらを指定するか結構忘れるのですが、自分は「早く出てくる左側」が「自分に近い方」つまりブラウザ等からアクセスできる側だと覚えています。

ですので、例えば Mac の localhost:5432 が埋まっていて使えない場合には、以下のように指定すれば mac から localhost:9999 で docker 内の PosgresDB につなげることができます。

ports:
      - 9999:5432

PosgresDB に接続する

DB が立ち上がったので接続しましょう。接続情報は docker-compose に記入しましたね。上記のファイルのままであれば password は postgrespassword で、user と database はそれぞれデフォルトの postgres になっています。パスワードだけは安全なものに変更しましょう。特に本番では当然絶対に変えましょう。

接続するには何を使ってもいいですが、Hasura が立ち上がっているのでこれを活用しましょう。

  • http://localhost:8080/console にアクセス
  • Data タブ => 左真ん中あたりにある SQL をクリック
  • あとはここに SQL 文を書いて RUN を押すだけで SQL 実行できます。

もちろん他のツールでもかまいません。

私は JetBrains 社が出している DataGrip というデーターベース関連専門の IDE を使っています。また DataGrip を所有していれば WebStorm にある Database Tools and SQL というプラグインをインストールすることで、同等を機能を WebStorm から実行することも可能です。

接続できればこっちのもの!!!

プログラミングなんていうのは、環境構築が一番難しく、接続してしまえばこっちのもんですよ!笑

がんばってやっていきましょう!