ごまごま

これは「フィヨルドブートキャンプ Advent Calendar 2022 Part1」の14日目の記事です。

外貨の報酬がある人のためのかんたん給料計算ツールペイレコをリリースしました！

フィヨルドブートキャンプのプラクティスの感想を書いていきます。

fly.ioでデプロイ

スクールの卒業課題として自作サービスを作成しておりデプロイ先を探していました。 fly.ioというサービスに無料枠があって気軽に利用できそうだったので試しに使ってみることにしました。

今回のブログ記事はデプロイ時の手順メモとなります。

私の環境

WSL(Debian)

RailsアプリはAPIモード

まずはインストール

手順は全て公式サイトに書いてあるのでまずはそちらを確認してください。

最初にflyctlをインストールします。

$ curl -L https://fly.io/install.sh | sh

インストールすると以下のメッセージが表示されました。

# 省略 flyctl was installed successfully to /home/kazumi/.fly/bin/flyctl Manually add the directory to your $HOME/.bash_profile (or similar) export FLYCTL_INSTALL="/home/kazumi/.fly" export PATH="$FLYCTL_INSTALL/bin:$PATH" Run '/home/kazumi/.fly/bin/flyctl --help' to get started

上記案内の通りexport FLYCTL_INSTALL="/home/kazumi/.fly" export PATH="$FLYCTL_INSTALL/bin:$PATH"を.bash_profileに記述するとパスが通りました。

次にサインアップ

サインアップコマンドを実行します。

$ flyctl auth signup

するとブラウザが立ち上がり登録画面が表示されます。 EmailまたはGithubアカウントを使って登録しましょう。 クレジットカードの登録は必須ではなく、カード情報の記入無しでfreeプランを開始できます。

サインアップすると以下のメッセージが表示されました。

Waiting for session... Done successfully logged in as （自分のメールアドレス）

ログインコマンドはflyctl auth loginです。

起動前の設定を行う

lauchコマンドを使って設定ファイルを生成していきます。 質問がいくつか出てくるので回答します。

$ flyctl launch # 質問が出てくるので答える ? App Name (leave blank to use an auto-generated name): アプリ名を入力 ? Select region: nrt (Tokyo, Japan) ? Would you like to set up a Postgresql database now? Yes ? Select configuration: Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk Monitoring Deployment 1 desired, 1 placed, 0 healthy, 0 unhealthy

無料枠で使えるリソースの説明

Our pricing is designed to let you run small applications for free, and scale costs affordably as your needs grow. Fly.io services are billed per organization. Billing is based on the resources provisioned for your app, prorated for the time they are up. Each organization includes enough usage to run small apps. Resources included for free: * Up to 3 shared-cpu-1x 256mb VMs * 3GB persistent volume storage (total) * 160GB outbound data transfer

引用元はこちら。

無料枠に収めるのであれば4番目の質問はSingle node, 1x shared CPU, 256MB RAM, 1GB diskを選ぶことになると思います。

DBが作成されるとDB情報が表示されます。

Creating postgres cluster {アプリ名}-db in organization personal Postgres cluster {アプリ名}-db created Username: postgres Password: {パスワード} Hostname: {アプリ名}-db.internal Proxy Port: {ポート番号} PG Port: {ポート番号} Save your credentials in a secure place -- you won't be able to see them again!

you won't be able to see them again! (この情報はもう二度と見られんぜよ)と、怖いことが書いてあるのでこの情報はどこか安全な場所に保存しておきましょう。

launchコマンドで生成されたファイルは以下の4つです。

.dockerignore

Dockerfile

fly.toml

fly.rake

デプロイコマンドを実行する

deployコマンドを実行します。

$ fly deploy

以上の手順でデプロイは完了です！ アプリをブラウザで確認する時はこちらのコマンドになります。

$ flyctl open

エラーにハマった

RailsはAPIモードでの利用だったため、lib/tasks/fly.rakeの7行目task :build => 'assets:precompile'の=> 'assets:precompile'部分を消さないとデプロイができませんでした。

# ここを task :build => 'assets:precompile' # こうした task :build #=> 'assets:precompile'

APIモードの場合必要ないはずのassets:precompileがbuild時に実行を試みるためエラーになっていたようです。 この点に関してはネットに全く情報がないので正しい解決策かどうかは分かりかねます。

プログラミングスクール フィヨルドブートキャンプの卒業課題として自作サービスを作ります。出来上がるまでの過程をちょこちょこブログで報告していこうと思います。

自作npm mojicolorを作りました

ターミナルのコマンドライン（CLI）で気軽に使えるnpm mojicolorを作りました。 こちらは24-bitカラーコードを色別でグラデーション表示してくれるツールです。

利用方法

以下のURLにインストール方法を書いているので是非ご覧ください。

npm https://www.npmjs.com/package/mojicolor

github https://github.com/kazumi3858/mojicolor

注意事項

24-bitカラーコードとは言っても、ターミナルで実際に利用できる色は限られている場合が多いです。 （そのため多くのグラデーションを再現することはできませんでした。悔しいけど。） もしご利用のターミナルでそのカラーコードが見つからない場合は似た色が表示されるようになります。

なぜこのnpmを作ろうと思ったのか

以前からコマンドラインプロンプトの文字色が可愛くないから変えたいな～と思っていました。 ですがターミナルのカラーコードをネットで検索しても一般的な8色、または256色の情報しか出てきませんでした。

特に気に入った色が見つからないのでコマンドラインプロンプトの文字色変更も諦めていました。

しかししばらくして、 私が入会しているプログラミングスクール（フィヨルドブートキャンプ）の課題で自作npmを作ることになりました。

そこで「そういえばコマンドラインプロンプトの色変えたいんだった！そのために自分で24-bitカラーコードを簡単に確認できるnpmを作ろう！」と思い立ったわけです。

JavaScript Standard Styleとは？

JavaScript Standard StyleはJavascriptで書いたコードを綺麗に整形したりエラーを発見してくれるツールのことです。

詳しくは公式サイトをご覧ください。

インストール手順メモ

私の環境

WSL2 (Debian) テキストエディタにVS code使用

グローバルにインストールしてみた

公式サイトにも書いてあるように、JavaScript Standard Styleはグローバルにインストールするかローカルにインストールするかを選べます。

私はグローバルにインストールすることにしました。 以下のコマンドを打ち込みます。

$ npm install standard --global

これだけでインストールか完了しました！ standardコマンドでプログラムをチェックしてくれるようになります。

試しに事前に作ったFizzBuzzプログラムでstandardを使ってみました。

$ standard fizzbuzz.js standard: Use JavaScript Standard Style (https://standardjs.com) standard: Run `standard --fix` to automatically fix some problems. /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:2:19: Expected '===' and instead saw '=='. (eqeqeq) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:3:28: Extra semicolon. (semi) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:4:25: Expected '===' and instead saw '=='. (eqeqeq) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:5:24: Extra semicolon. (semi) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:6:25: Expected '===' and instead saw '=='. (eqeqeq) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:7:24: Extra semicolon. (semi) /work/js/js-practices/01.fizzbuzz/fizzbuzz.js:9:24: Extra semicolon. (semi)

ちゃんと問題点を指摘したコメントが表示されました！

VS codeでも使えるようにする

Visual Studio Code上でもJavaScript Standard Styleを使ってプログラムをチェックしてくれるようにします。

まずはVS codeを起動してctrl + Pを押し、以下をコピーして貼り付けます。

ext install standard.vscode-standard

これで拡張機能がインストールされました。

デフォルト設定はローカル環境でインストールされた状態で動作するようになっています。 私のようにグローバルにインストールした場合はsetting.jsonに追記します。

"standard.usePackageJson": false, // プロジェクトのpackage.jsonの設定を使う場合はtrueにする "standard.enableGlobally": true

WSLでシステムテストができない

私の環境

Windows11 WSL2 Debian

rails test:systemを実行するとエラーに

rails test:systemを実行すると以下のエラーが出ます。

rails aborted! Webdrivers::BrowserNotFound: Failed to find Chrome binary. （中略） Tasks: TOP => test:system (See full trace by running task with --trace)

解決方法

Chromeをインストールします。

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo apt install ./google-chrome-stable_current_amd64.deb

application_system_test_case.rbファイルを以下のように編集します。

（:selenium_chrome_headlessが重要です）

require 'test_helper' class ApplicationSystemTestCase < ActionDispatch::SystemTestCase driven_by :selenium_chrome_headless end

これでrails test:systemが実行できるようになりました！

railsの学習中に「ポリモーフィック関連はSQLアンチパターンである」ということを知りました。

学習から70日以上が経過

プログラミングスクール フィヨルドブートキャンプに2022年1月中旬に入会し、学習開始から70日以上経ちました。

全くのプログラミング初心者だった私がこの70日でできるようになったことはこんな感じです。

Linuxの操作（CUI）ができるようになった

WindowsにWSLをインストールし、仮想のLinux環境で学習をしています。 最初はコマンドもcdやpwdくらいしか覚えられなかったのですが、最近はちょっと便利なtreeなども使うようになりました。

「このコマンド本当に実行していいのかな？」「これインストールするの怖い」といった不安も徐々になくなってきました。

rubyで簡単なプログラムを書けるようになった

フィヨルドブートキャンプの課題をこなしていただけですがrubyで簡単なプログラムを作れるようになりました。 自分で1番よくできたな～と思うのはrubyでwcコマンドを実装する課題でしょうか。

メソッドの作り方とかクラス分けとかはまだあまり理解できていませんが、ロジックを考えるのは以前より上手くなった気がします。

Gitのことが少し分かった

正直Gitの操作は怖いですｗｗ

ですが少しづつブランチを作る意味であったりコミットを重ねる意味を理解してきました。

今は個人のレポジトリにプッシュするだけなので良いんですが、チーム開発のレポジトリに触れるのはめっちゃ怖いです。（いつチーム開発できるかは分からないけど）

初心者向け向けのGit本を買ったので読みたいと思います。

VScodeをそこそこ使いこなせるようになった

テキストエディタはVScodeを使用しています。 VScodeめちゃくちゃ良いですね・・・好きです！！

1番のお気に入りポイントはVScode上でWSLに接続できるところです。便利すぎる！

学習で感じたあれこれ

フィヨルドブートキャンプの課題をこなしていく中で強く感じたのは「自分は本を読むのがとても苦手だ」ということｗ

コードを書く課題は夢中になってできるんだけど、本を読む課題は中々進まないｗ 昔から本を読むことにあまり興味を持てずほとんど本を読まずに歳を重ねてきたからな～。

それでも新しい知識を得ることは嬉しい！

今後の楽しみ

今後の学習の楽しみはJava Scriptですかね。正直Java Scriptが何なのか全然分からないんですけど（ホームページに動きをつけるってことは分かるけど）、気になる！

私はHTMLとCSSが好きだから絶対Java Scriptも好きになれる！（と思う）

HTMLのインデント整形ツール

Syncer

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

コピーしたコードを貼り付けるだけでインデントを揃えてくれます。 インデント数も指定できるので便利です。

HTMLのエラーチェックツール

W3C

https://validator.w3.org/#validate_by_input

コピーしたコードを貼り付ける、ファイルを選択する、URLを入力する、のどれかを行うとエラーチェックしてくれます。

CSSのエラーチェックツール

W3C

https://jigsaw.w3.org/css-validator/#validate_by_input

コピーしたコードを貼り付ける、ファイルを選択する、URLを入力する、のどれかを行うとエラーチェックしてくれます。 HTML版と違って日本語表示なので分かりやすいですね。

前回のブログ記事でARGV.getoptsを使うとコマンドラインのオプションを受け取った処理が書けるとお伝えしました。

そのARGV.getopts使用時の注意事項です。 （こちらの情報は私が入会しているフィヨルドブートキャンプのメンターさんに教えていただきました）

1回処理を実行すると中身が消える？

言葉で説明するよりも実際に見ていただいたほうが分かりやすいと思うので簡単な例を用意しました。

# test1.rb require 'optparse' def test @option = ARGV.getopts('a') # オプションaを受け取るようにする end p test # 1回目の実行 p test # 2回目の実行

# 実行結果 $ ruby test1.rb -a {"a"=>true} # 1回目の結果 {"a"=>false} # 2回目の結果

コマンドラインのオプションを受け取るためのtestメソッドを作って、そのメソッドを2回実行してみました。

すると実行結果のように、1回目は{"a"=>true}ですが2回目は{"a"=>false}になっています！

どうやらARGV.getoptsで受け取ったものは1度実行されるとなくなってしまうようです。これは知りませんでした！

解決方法は ||= を使って変数を初期化する

解決するためには||=（自己代入演算子）を使用します。||=は、左辺がfalseまたは未定義の時に右辺を代入します。

# test1.rb require 'optparse' def test @option ||= ARGV.getopts('a') # 自己代入演算子に書き換えた end p test p test

# 実行結果 $ ruby test1.rb -a {"a"=>true} # 1回目の結果 {"a"=>true} # 2回目の結果

オプションの有無を返す

例えばARGV.getopts("abc")と書くと、コマンドラインのオプションにa、b、cがあればtrueを返し、なければfalseを返します。

# test1.rb require 'optparse' results = ARGV.getopts("abc") p results

# 実行結果 $ ruby test1.rb -a {"a"=>true, "b"=>false, "c"=>false} $ ruby test1.rb -acb {"a"=>true, "b"=>true, "c"=>true} $ ruby test1.rb -ca {"a"=>true, "b"=>false, "c"=>true}

公式リファレンスを見ると、getopts(short_opt, *long_opt)のように1番目にショートネームオプション、あればその後にロングネームオプションを書くんですね。

オプションに引数がある場合

オプションに引数がある場合は:を直後に付けると良いです。

# test2.rb require 'optparse' results = ARGV.getopts("abc:") # cの後にコロン付けたよ p results

# 実行結果 $ ruby test2.rb -a -c 1 {"a"=>true, "b"=>false, "c"=>"1"}

活用方法

ARGV.getoptsを使った簡単なif文を作ってみました。

# test3.rb require "optparse" results = ARGV.getopts("a") if results["a"] # オプションaがtrueの時 puts "オプションaがあったよ" else puts "オプションがなかったよ" end

# 実行結果 $ ruby test3.rb -a オプションaがあったよ $ ruby test3.rb オプションがなかったよ

う～ん、便利！

【追記】注意点

TumblrブログにはMarkdown機能がありますが、ソースコードを表示させてもシンタックスハイライトされません。

自分でhighlight.jsを導入

というわけで自分でこのブログにhighlight.jsを導入し、シンタックスハイライトを有効化させました。

やり方は簡単です。HTMLの編集画面で以下のコードを<head>タグ内に貼り付けるだけ。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/base16/default.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>

デフォルト設定ではWSL起動時にWindows側のフォルダから始まる。

WSLをダウンロードしたあと、WSLの画面（私はDebian）を開いてみると

デフォルトでは開始ディレクトリが/mnt/c/Users/ユーザー名になっています。 これはWindows側のディレクトリ（フォルダ）です。

これをLinux側のホームディレクトリに変更します。

設定画面から変更可能。

まずは設定画面（私の場合はDebian）を開く。

設定画面の中の「開始ディレクトリ」が%USERPROFILE%となっているので\\wsl$\Debian\home\ユーザー名に変えて「保存」します。

（バックスラッシュが￥表示になるのはそういう仕様だからです。）

すると開始ディレクトリがLinux側のホームディレクトリ（チルダ~マークがホームディレクトリを表しています）になりました！

私の環境：Windows11 WSL (Debian : bash)

Server handler (thin,puma,reel,HTTP,webrick) not foundというエラーが出た。

Sinatraをインストールして実行しようとすると

Server handler (thin,puma,reel,HTTP,webrick) not found. (RuntimeError)

とエラーが出てしまいました。

どうやらthin,puma,reel,HTTP,webrickこの中のいずれかのgemをインストールしないとSinatraは使えないそうです。 （古いRubyのバージョンではデフォルトでwebrickが入っていたので問題なかったようです）

というわけで

gem install thin

Step1 リモートリポジトリをフォークする。

（※すでにフォーク済みの場合はこのステップはとばします）

GIthubで該当のレポジトリにアクセスし、右上のフォークボタンをクリック。すると自分のアカウントにフォークされたレポジトリが生まれます。

フォークされたレポジトリページで「Code」をクリック。「HTTPS」に表示されるURL https://github.com/アカウント名/レポジトリ名.git をコピー。

Step2 フォークしたリポジトリをクローンする

（※すでにクローン済みの場合はこのステップはとばします）

自分のPCでターミナルを開き、リモートリポジトリをクローンしたいディレクトリに cd ディレクトリ名 で移動しておきます。

先ほどコピーしたURLを使って、git clone https://github.com/アカウント名/レポジトリ名.gitを実行。

これでPC上（ローカル）にリモートリポジトリがクローンされました。ls -lで確認するとレポジトリ名のついたディレクリができていますね。

Step3 作業用ブランチを作って作業する

作業したいディレクトリに cd ディレクトリ名 で移動します。

git checkout -b ブランチ名 を実行し、作業用ブランチを作成＆そのブランチにチェックアウトします。

作業用ブランチにて何かファイルを作成してみましょう。vimを使用する場合はvi ファイル名で起動します。もちろん他のテキストエディタを使ってもOKです。

作業用ブランチを作るとき、何も指定しなければ現在いるブランチを派生元としてブランチが作られます。

mainブランチからブランチを作る場合はmainブランチに移動して git checkout -b ブランチ名 を実行。または git checkout -b ブランチ名 main のように派生元を明示します。

Step4 ファイルをコミットする（add→commit）

作ったファイルを git add ファイル名 でインデックスにあげ、git commit -m "コメント" でコミットします。

git status でファイルの状態を確認してみると「nothing to commit, working tree clean」と表示され、コミット済みであることが分かります。

Step5 プルリクエストをつくる

git push origin ブランチ名 でリモートリポジトリにプッシュします。

Githubのアカウント名とパスワード（トークン）を入力するとプッシュが完了します。

Github上に自動でCompare &Pull Requestボタンが現れるのでクリック。

プルリクエスト先を自分のフォークしたレポジトリに変更しておく。

（これは職場によってはそのままクローン元を選択しておくのかも？）

コメントを残して「Create Pull Request」をクリック。