30代中盤・未経験からGoエンジニアを目指す人のブログ

～プログラミング関連、勉強法などから雑記まで赴くままに～

【gh-pagesが超便利】作ったReactアプリをGitHub Pagesで表示しよう！！

現在Reactを勉強中。そこで簡単なTodo ListアプリをReactで作成したのでGitHub Pagesにデプロイしてみようとやってようと思ったのですが、、、

なぜか上手くいかなかったり結構つまってしまった中で、gh-pagesという便利なnpmライブラリーを使って簡単にデプロイが出来たので手順を紹介します。

(Reactアプリは完成済み、未buildを前提にしています)

大まかな流れは以下の通り

  1. あらかじめGitHub Pages用のリポジトリを作成
  2. gh-pages をインストール
  3. package.jsonに手動で追記
  4. ローカルのReactアプリをリポジトリにプッシュ
  5. npm run deployを実行

ざっくりとこれだけ！！

1. GitHub Pages用のリポジトリを作成

まずはwebよりGitHubにアクセスして新しいリポジトリを作成します
(ここでは私が作成した【* react_todo_list】を例にします。)
※GitHub無課金勢はPublicにて作成しないとGitHub Pagesで公開できません。Publicで作成しましょう。

2. gh-pagesをインストール

ターミナルから下記のコマンドを実行してインストール

npm install gh-pages --save-dev

3. package.jsonに手動で追記

その後、package.jsonにhomepageの定義を追記

{
    "name": " react_todo_list<※何でも良い>",
    "homepage": "https://<自分のGitHubユーザー名>.github.io/<最初に作ったリポジトリ名>",
}

あとも一箇所追記

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\""  ←この一行

4. ローカルのReactアプリをリポジトリにプッシュ

ここは、経験ある方が多いと思うので解説は省略、以下を一行ずつ実行しプッシュ

git init
git remote add origin https://github.com/<自分のGitHubユーザー名>/<最初に作ったリポジトリ名>.git
git add .
git commit -m "Initial commit <※自分のわかり易い言葉でOK>"
git push -u origin main

5. npm run deployを実行

npm run deploy

実行後、GitHubリポジトリの「Settings」に移動し、「Pages」セクションでデプロイされたブランチをgh-pagesに設定します
(赤丸部分をgh-pagesにする)

...数分後、

https://<自分のGitHubユーザー名>.github.io/<最初に作ったリポジトリ名>

にアクセスすると自分の作ったアプリが動いてるはずです！！

まとめ

今回、自分でも上手くいかなくて色々調べてるうちにgh-pagesという便利なnpmライブラリーでやるとデプロイの手順を一部自動化してくれる事がわかり、実際に使用して簡単にデプロイできたので紹介しました。

ぜひ、使ってみてください。

JavaScript Primer<改訂2版>、やっと読み終わりました！！

JavaScriptを学習するにあたり、
JavaScript Primer<改訂2版> 迷わないための入門書 を読んだので感想を。

良かったところ

最初から踏み込んだ説明をしてくれる

同書のHPに書いてあるが、
『プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように』
ということで、例えば序盤の型に関する章でも配列や関数、オブジェクトが絡んで説明されている。
本当の入門書だと型の章ではそれらはあまり踏み込まず、関数やオブジェクトの章に入って改めて型の説明をしたりするので二度手間になるところを教えてくれるので、他言語(私の場合はRubyなど)でそれらの概念を理解してる人にとって回りくどくなくわかりやすいと思った。

基本文法とユースケースの二部構成

付録や索引を除いてトータル 469ページのうちガッツリ360ページを基本文法に割き、残りで3つのユースケースを用いて説明してくれる構成が良いと思った。
360ページ分しっかり基本文法を解説してくれているので後々の辞書的な使い方にもピッタリだし、特にユースケースのToDoリスト作成は難しかったが為になった。

難しかったところ

ユースケース

良かったところでも書いたがユースケースのToDoリストは結構難しかったが、途中途中にここまでで作成したToDoアプリをそれぞれURLにて公開してくれているので自分で作ったものと比べたりしながら進められたのはよかった。

学んだところ

前回、チェリー本を読んだ時に、
「頭の中にインデックスだけ作ってどんどん読み進める」
と学んだつもりだったが、今回のこの本でもっとこれを徹底したほうが良いと痛感した。
読むのにかなりの時間を使ったし、やはり性格的に一個一個理解して進みたいとこだわってしまう自分を矯正しなければならないと再確認させてもらいました。

終わりに

基本文法だけで、360ページもあり細かいことまで書き記してくれているので全部覚えようなんて無理。
今後JSを使っていく中で辞書的に使い何度もすり込みすり込みを繰り返して身につけていきたい。
と再度気付かせてくれた良い本でした。

ありがとうございました。

初学者がREST APIについて学んだのでまとめ

REST APIを勉強したてホヤホヤの私がどういった物かを説明するブログです。

そもそもAPIって何？

APIとは、
Application Programming Interface
の頭文字を取ったもので、機能やデータを外部から呼び出して利用できるよう定めた規約です

ではWeb APIとは？

Web APIとは、インターネット上、Webサービスで提供されている機能やデータを外からプログラムが読み取りやすい形で利用できるよう定めた規約またはその実装、になります。

REST API

そして登場するのがRESTです。
RESTとは、
REpresentational State Transfer
です。
日本語に直すと、『分散型システムにおける設計原則郡』
つまり、設計ルールになります。

この設計ルールはREST原則といい、REST原則には大きく6種類あります。

  • クライアント / サーバー
    クライアント側は画面(UI)をサーバー側はデータ処理、と分離させる 上記を分けることにより、クライアント側がトリガー、サーバー側はあくまで受け身の姿勢、となる

  • ステートレス
    各リクエストのやり取りに独立性(状態保存を敢えてしない)を持たせる事で、リクエスト単体を見るだけでどんな内容のやり取りか理解できる。
    つまり、サーバーはリクエスト単一だけでコンテキストを理解できる。
    これにより、単一のリクエスト以外見なくて良いため監視が容易、障害発生時にリクエストだけ回復すれば良いので障害復旧が容易になるというメリット。

  • キャッシュ制御
    クライアントはレスポンスをキャッシュできる。
    これにより、ユーザー体験・リソース効率・拡張性の向上が見込める。

  • 統一インターフェース
    標準的なHTTPメソッドを用いてリソースを操作する。
    システムアーキテクチャ全体が簡素化されてわかりやすくなり、異なるブラウザでも同じような画面を表示できる。

  • 階層化システム
    Web → AP → DBといった多層アーキテクチャ構成。
    実際にはWeb, AP, DBそれぞれが何台もありそれぞれ複雑に組み合わさっており、その一つ一つをコンポーネントという。
    このように各コンポーネントをカプセル化させることにより、進化と再利用が可能になる。

  • コードオンデマンド
    サーバー側を更新することでクライアントが自動的に新しい環境をダウンロードして実行できるといった特徴。
    リリース済みのクライアントに対して機能追加ができたり、クライアントに処理を譲渡出来るためサーバーの負担が下がるというメリットがある。

これらのREST原則に基づいて実装されたAPIを REST API といいます。

REST API 設計の一例

ここでは例として映画情報の一覧がまとまっているmovieリソースというものを想定し、
それに対しての操作(読み取り・作成・更新・削除)の関係を表にまとめてみました。
表内のURI欄は『http://api.example.com/』までを省略し、それ以降のURIを記述しています。

操作 URI HTTPメソッド
映画情報一覧の取得 /movies GET
特定の映画情報の取得 /movies/123456 GET
映画の新規登録 /movies POST
特定の映画情報の更新 /movies/123456 PUT
特定の映画情報の削除 /movies/123456 DELETE

上記、/moviesは映画情報の一覧(リソース)を表し、/123456はその映画情報一覧の中の特定の映画情報(リソース)を表すパスパラメータになります。

URI設計のポイント

  • 短く入力しやすい、冗長なパスを含まない
    悪い例：GET http://api.example.com/service/api/search (apiが重複してる、/serviceが無駄)
    良い例：GET http://api.example.com/search (このように短くシンプルに)

  • 人が読んで理解できる
    悪い例：GET http://api.example.com/sv/u (利用者がsvやuを読んでも理解し難い)
    良い例：GET http://api.example.com/users (初見でも読んで理解できるURIに)

  • 大文字小文字が混在していない(すべて小文字)
    ※例省略

  • 単語は複数形を利用する
    例：先程の表でmovieリソースとは映画情報というリソースが集合しているもののため『/movie』ではなく、複数形の『/movies』としています。

  • エンコードを必要とする文字を使わない(日本語などを使わない)
    悪い例：以下は『ムービー』と日本語で書いた場合のエンコードした文字が含まれるバッドパターンなURIです
    GET http://api.example.com/%E3%83%A0%E3%83%BC%E3%83%93%E3%83%BC (人が読んで理解できない)

まとめ

REST API設計の一例でまとめたようにREST原則に基づいてシンプルに設計することが重要になります。
私もまだ勉強したばかりなので実際にRESTに基づいてAPIを設計するときは漏れがないよう気をつけたいと思います。

「達人に学ぶ DB設計 徹底指南書」を読んでの感想を。

SQLに続き、DB設計をということで、 達人に学ぶ DB設計 徹底指南書を読みました。

良かったところ

バッドノウハウ、グレーノウハウ(筆者の造語)が豊富

構成としては9章あり、そのうちの6章まででデータベースが如何にシステム開発において重要なのかから、
論理設計と物理設計(それぞれの理想とトレードオフに関しても)、
正規化と非正規化とパフォーマンスについてまで理論的なところを学べますが、
この本の特徴になる筆者の実体験にも基づいたバッドノウハウを7章、グレーノウハウ(違法スレスレのグレーゾーン)を8章で学べ、
全体として上手くまとまってるのがこの本が評価されている点だと思い、良かったと思ったところでした。

章末に練習問題

各章末に演習問題があり、前回のSQLと同様であるが単純に問題を解くようなものだけでなく、
「〇〇について情報を調べてください」や、「考えてください」「例を上げてください」
と、能動的に考えて解くような問題も多くて身になる良い演習問題ばかりでした。

学んだところ

DB設計の基本から応用まではもちろんのこと、特に印象に残っているのが、

です。
論理設計における理想は知識としてインプット出来ますが、実際にはその理想だけでなくパフォーマンスについても考えなくてはいけなくそこにはトレードオフがありしっかりそこも踏まえることの重要性、
グレーノウハウに関してはちゃんとグレーゾーンということを認識したうえでトレードオフを踏まえて使用を検討すべきというスタンスを学べました。

終わりに

DB設計をする上での論理的な理想だけでなく、現実における設計の難しさを学べます。
実際にDB設計をすることになったときには改めて片手に持ちながら設計することになると思います。

スッキリわかるSQL入門を読みました。

Rubyの勉強は一段落、次はSQL,DBを学ぶにあたり、
スッキリわかるSQL入門 第3版 ドリル256問付き！を読みました。
なかなかわかりやすくて良い本でしたので感想を。

良かったところ

最初にロードマップを提示してくれる点

この本の構成とロードマップを最初にしっかり説明してくれるし、読み進めた途中途中でも図解を使って全体像を元に、
ここまで勉強したこと、今から勉強すること、この先勉強すること
をしっかり示してくれるので漠然とせず今やっている事を理解できて読み進めやすい。
具体的には、
第1部 SQLを始めよう
第2部 SQLを使いこなそう
第3部 データベースの知識を深めよう
第4部 データベースで実現しよう
この4部構成となっており、その中で何章かに分かれているといった感じ。
これがわかりやすかった。

章末に章で学んだまとめと練習問題

各部の中の章が終わる毎に、
- この章で学習した内容
として要点をまとめてくれたり、学んだSQL文の使用例などを完結に書いてくれているので後々このページを復習するだけでも確認用として便利。

さらにその次に、
- 練習問題
として文章の虫食い問題やSQL文を答える問題などが用意されているので、章ごとに復習ができて便利。

そして何より、巻末にどっさりとドリル256問がついてくるのでしっかり反復練習できる。

学んだところ

主にSQL入門ということで、
- DML (Data Manupulation Language)
- DDL (Data Definition Language)
- TCL (Transaction Control Language)
- DCL (Data Control Language)
を学べます。
あとは後半にDB設計の事にも触れていますが、あくまでSQL入門なのでDB設計は別途違う教材で勉強する必要があると思った。

終わりに

良かったところでも書きましたが、各章ごとに要点をまとめてくれているのでそこを読み返すだけでも辞書的に使えるしより深く復習したいときには本編を読むという使い方で一度読むだけでなく、長く使える良い本だと感じました。
またSQLの特性上、そこまで複雑というよりは反復して覚えるような感じなのでドリル問題がたくさん用意されているのは理にかなってるし実際身につく要素になりました。

おすすめです。
ありがとうございました。

『プロを目指す人のためのRuby入門』を読んだので感想を

久しぶりの更新になってしまいました。
一時的に学習から離れてしまっていましたが現在復帰して励んでいます。

タイトルの通り、Rubyを学習するにあたりプロを目指す人のためのRuby入門<改訂2版>を読んだので感想を。

良かったところ

初心者から中級者以上までカバー

対象者としては、『Ruby初心者』から『Rubyでご飯を食べているが自信を持ってプロと呼べないと考えてる人』まで幅広く、そのため内容もしっかり網羅されている用に感じた。

過去の章に出てきた内容へのリンク

例えば5章を読んでる際、これ前に出てきたけど何だっけ？と思うようなところに「〇〇については3.5.5(3章の5.5番目のタイトル)をお読みください」と書いてあるので簡単にその箇所を読み返せるので復習が可能。
また過去だけでなく、「〇〇については第9章で説明します」とも書いてくれるので今はここに書いてあることに集中しよう、とも思わせてくれる。

難しかったところ

完全初心者にはちょっと難しい

良かったところで書いたように、中級者以上までカバーしているような内容なので逆に言えば完全な初心者にとってはキツイ時間が続くと思う。
とはいえ、現在プログラミングを学ぼうと思うとまずProgateなどそういったサービスから入ってより深く学ぶ時に書籍を使う、という流れが一般的なように感じるのでそこまで問題ない、むしろちょうどいいターゲット設定だとも言える。

学んだところ

私は今回で初めてプログラミング言語の書籍を読みましたが、読み始めて本で学ぶのはちょっと苦手かもと感じていました。
本書の第1章に本書を読み切るコツとして書かれていたのが、

難しく感じたときは「これ全部理解しなきゃいけないのか」、
と考えるのではなく「頭の中にインデックスだけ作ってどんどん読み進める」

でした。
こういう方法を学んだところが一番大きかったです。

性格上、変なところが几帳面で一個一個理解して進みたいというこだわりをもっていたため本で学ぶのは苦手なのでは？と気付かされました。
内容はもちろんタメになったのですが、インデックスを作るというマインドは今後他の技術書を使って勉強していく上で一番の収穫だったのではと思っています。

終わりに

Rubyを学び使っていく上で中級者以上のことまで書いているので「これなんだっけ」「これどう書くんだっけ」に対して長く使うことの出来る良い書籍だと思っています。

俗に言う『チェリー本』ですが、流石といった内容でした。
ありがとうございました。

Webアプリ (rails) をDockerとDocker ComposeでDocker化する方法

Dockerはアプリケーションを軽量なコンテナとしてパッケージ化し、どこでも動作させることができる便利なツールです。
　
この記事では、まだまだ初学者ではある私ですが既存のwebアプリを任意のlocal環境で動作させる為のdocker化を覚えましたので、他者様が作った既に完成しているwebアプリをDockerとDocker Composeを使用してDocker化してlocalで起動する手順を解説したいと思います。
　
今回は railsアプリ、またdbはPostgreSQLを使用します。　
　

追加で必要なファイルは2つ、修正するファイルは1つ　

既存webアプリのdocker化の大まかな流れ
　
1. Dockerfileの作成
2. docker-compose.ymlの作成
3. database.ymlファイルの一部修正
4. Dockerイメージのビルド
5. データベースのセットアップ
6. アプリケーションの起動
7. localhost:3000にアクセス
　 　
まず手順だけ先に書き、その下に各解説を書いていきます。　
　

1. Dockerfileの作成

まず、railsアプリのルートディレクトリ(README.mdやGemfileがあるディレクトリ)にDockerfileを作成、中身は下記の通り。
# 以下、[app_name]はご自身で用意したアプリのルートディレクトリ名に変えて記入してください
# インデントが大事なので十分注意してください

FROM ruby:3.2.2 #任意のバージョンを指定してください
RUN apt-get update -qq && apt-get install -y \  
  build-essential \
  libpq-dev \
  node.js

WORKDIR /app_name
COPY Gemfile Gemfile.lock /app_name/

RUN gem install bundler && bundle install

COPY . /rails-docker/

　

2. docker-compose.ymlの作成

docker-compose.ymlファイルをアプリのルートディレクトリ(先程作ったDockerfileと同じディレクトリ)に作成し、中身は下記の通り。
# 以下、[app_name]はご自身で用意したアプリのルートディレクトリ名に変えて記入してください
# インデントが大事なので十分注意してください

version: "3"

volumes:
  postgresql-data:

services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    tty: true
    stdin_open: true
    volumes:
      - .:/app_name
    ports:
      - "3000:3000"
    depends_on:
      - db

  db:
    image: postgres:12 #任意のバージョンを指定してください
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    ports:
      - "5432:5432"
    volumes:
      - postgresql-data:/var/lib/postgresql/data

　

3. database.ymlファイルの一部修正

/app_name(用意したアプリ)/config/databse.ymlの中の
一部記述(default: &defaultから下部の数行)を以下のように変更します。

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: postgres
  port: 5432
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

　

4. Dockerイメージのビルド

Dockerfileが正しく設定されたら、次のコマンドでDockerイメージをビルドします。

$ docker-compose build

※初回はビルドもするので処理が終わるまで数分かかります。
また、途中でダウンロードが失敗しエラーが出ることもあります(私も一度なりました)が、
再度$ docker-compose buildを行うことでダウンロード含め、処理は成功します。 　
　

5. データベースのセットアップ

$ docker-compose run --rm web rails db:create

　

6. アプリケーションの起動

$ docker-compose up

次回以降は5.のデータベースのセットアップは必要なくこの$ docker-compose up1行を実行するだけでアプリケーションを起動できます。 　
　

7. localhost:3000にアクセス

$ docker-compose up後、シェルはそのままの状態(アプリケーションが起動している状態)で、http://localhost:3000にてアプリケーションが動作しているはずですので、
http://localhost:3000にアクセスするとwebアプリケーションとして使用開始できます。
　
終了方法は$ docker-compose upを行ったシェルに戻り、cmd + c (ctrl + c)を押すと終了します。
再度起動するときはシェルで$ docker-compose upを実行するだけ。

　
以上が流れです。

解説はこちら↓

Dockerfile

FROM ruby:3.2.2 #任意のrubyバージョンを選択
RUN apt-get update -qq && apt-get install -y \ 
  build-essential \ 
  libpq-dev \ 
  node.js 
# イメージのビルド時にOSのパッケージリストを更新と下記パッケージ郡をインストール
# build-essential: コンパイラやライブラリなどの開発に必要な基本的なパッケージ群
# libpq-dev: PostgreSQLデータベースを扱うためのライブラリ
# node.js: JavaScriptのランタイム環境であるNode.js


WORKDIR /app_name 
#以降のコマンドは、/app_nameディレクトリ内(アプリのルートディレクトリ内)で実行
COPY Gemfile Gemfile.lock /app_name/ 
# ホストのGemfileとGemfile.lockをコンテナの/app_nameディレクトリにコピー
# 複数のファイルをコピーする際はapp_nameの後ろに`/`が必要

RUN gem install bundler && bundle install 
# 最新のbundlerをインストールした後、コピーしたGemfileとGemfile.lockをもとに必要なRubyのライブラリをインストール

COPY . /rails-docker/
# ホストの現在のディレクトリ全内容をコンテナの/app_name/にコピー

　
docker-compose.yml

version: "3"
# 使用するDocker Composeのファイル形式のバージョン(ほとんど3なのでこう書くものだと思ってオッケー)

volumes:
  postgresql-data:
# postgresql-dataという名前のボリュームを定義

services:
# このComposeファイルで定義するサービス群を示します。具体的には次のインデントのwebとdb。
# この2つがそれぞれコンテナ化されて相互に利用される。
  web:
  webという名前のサービスを定義(アプリ側)
    build: .
    # webサービスのDockerイメージを、現在のディレクトリ( . )にあるDockerfileを使用してビルド
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    # webサービスを起動する際のコマンドを指定。railsサーバーを起動、ポートは3000(railsのデフォルト)
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    # 環境変数を設定。PostgreSQLのユーザ名とパスワードを指定
    tty: true
    # ttyを有効にします。これにより、コンテナ内でのインタラクティブな操作が可能に
    stdin_open: true
    # 標準入力をオープンします。これもインタラクティブな操作のため
    volumes:
      - .:/app_name
    # ホストの現在のディレクトリ( . )と、コンテナの/app_nameディレクトリをマウント(同期)する
    ports:
      - "3000:3000"
    # ホストの3000番ポートと、コンテナの3000番ポートを紐づけし、
    # localhost:3000にアクセスした時にコンテナにアクセス
    depends_on:
      - db
    # webサービスはdbサービスに依存しているため、dbサービスが先に起動するように指定
    # これにより、dbが起動してからrailsサーバーを起動するコマンドを行うようにする

  db:
    image: postgres:12 #任意のバージョンを指定してください
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    ports:
      - "5432:5432"
    # ホストの5432番ポートと、コンテナの5432番ポートを紐づけ。これはPostgreSQLのデフォルトのポート番号
    volumes:
      - postgresql-data:/var/lib/postgresql/data
    # 先に定義したpostgresql-dataボリュームとコンテナ内のPostgreSQLのデータディレクトリ/var/lib/postgresql/dataをマウント
    # これにより、データベースのデータが永続化可能に

　　
docker-composeコマンド

$ docker-compose build

# Dockerfileを元にdocker imageをビルド

　 　
データベースの設定

docker-compose run --rm web rails db:create
# 初回アプリ起動前にデータベースの作成が必要(コマンド`$ rails db:create`)、このコマンドをwebコンテナのrailsに対して指示するコマンドの書き方が上記になる  
また、--rmオプションをつけることで、コマンドが終わりコンテナからexitされたらこのコンテナが自動で削除されるように設定。

　
アプリケーションの起動

`docker-compose.yml`内のコマンド`bundle exec rails s -p 3000 -b '0.0.0.0'`でrails serverの起動も行っているため、  
`$ docker-compose up`1行で完結するようになっている

　

まとめ

DockerとDocker Composeを使用してWebアプリをDocker化する方法を解説しました。この手順を参考にあなたもrailsアプリをDocker環境での動作確認をしてみてください。