rails-newコマンドが便利すぎた件

こんにちは！
最近、久しぶりにrails newコマンドを使用することが機会がありました。
dockerfileを準備して開始しようとしたところ、まさかのrails-newコマンドがあるというのを知りまして、使ってみたという記事になります。
備忘録がてらまとめておきます。

導入

dockerとVSCodeはインストールしておいてください。
rails-newコマンドはrails-newリポジトリのInstallationから該当するファイルをダウンロードしてください。

私はmacなので、rails-new-aarch64-apple-darwin.tar.gzをダウンロードしました。
そして、tar -zxvf rails-new-aarch64-apple-darwin.tar.gzで解凍。
パスの通っているところに移動させて完了となります。
パスが通っているディレクトリはecho $PATHで確認できるのでしたね。
こちらの好きなところに、mv rails-new 任意パスとしてください。

これでようやく準備完了となります。

さっそくrails-newコマンドを使用していく

作成したいディレクトリに移動してください。
そしてコマンドを実行します！
rails-new my-app --api --devcontainer

今回はapiとdevcontainerオプションを指定して作成をしました。
適宜オプションは変更して使用してみてください。

最後に

rails-newコマンドを使用することで、素早く簡単に新しいプロジェクトを開始できるようになりました。ぜひ使用してみてください。
また、devcontainerも今回初めて触れてみました。
dockerコマンドすら必要とせずに簡単に使用できるので使ってみてはいかがでしょうか？

ReactアプリをGithub Pagesにデプロイしてみる

はじめに

今回はReactでtodoアプリを作成したため、それをGithub Pagesにて公開しました。
その流れを書いていきたいと思います。

全体フロー

まずはフローを見ていきましょう。

  1. Reactアプリを作成
  2. リポジトリを作成
  3. ローカルでgit init
  4. gh-pagesのインストール
  5. スクリプト&リポジトリの設定
  6. Reactアプリをビルド&デプロイ
  7. Github Pagesの設定

1. Reactアプリを作成

Todoアプリを作成した過程は割愛しますが、プロジェクトを作成するコマンドだけまとめておきます。
※ Node.jsは必要なので適宜インストールしてください。

npm create vite@latest
npm install

その後、npm run devでアクセスできるリンクが表示されるので、アクセスして確認してください。

2.リポジトリを作成

Githubのwebページからnew repositoryボタンを押して、下記画面に遷移します。
その後、Repository nameに名前を、Choose visibilityをPublicとして進めます。

Point!

Add READMEをoffにしてcreate repositoryをするとまっさらなリポジトリが作成され、遷移後画面でローカルでの作業を開始するコマンドが表示されます。今回はこちらで進めます。
onにすると、initial commitとしてreadme.mdが作成された状態でリポジトリが作成され、ローカルにはcloneが必要になります。

github リポジトリ作成画面

3. ローカルでgit init

下記画面に遷移したら作成完了です。
その後、ターミナルからローカルで作成したReactアプリのディレクトリに移動してください。
…or create a new repository on the command lineを参考にローカルでコマンドを実行します。

git init
git add .
git commit -m "コミットメッセージを入力"
git branch -M main
git remote add origin https://github.com/Githubアカウント名/temp.git
git push -u origin main

github create repository後の画面

実行することで、gitでのlog管理開始、ローカルからリモートリポジトリへのpushが完了します。

4. gh-pagesのインストール

下記コマンドでgithub pagesにデプロイするためのパッケージをインストールします。

npm install gh-pages

5. スクリプト&リポジトリの設定

下記を参考にpackage.jsonを修正してください。
scriptsにはデプロイスクリプトを記載します。

"scripts": {
　...省略
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },

vite.config.tsのbaseに2で入力したRepository nameを追記します。

export default defineConfig({
  plugins: [react()],
  base: "/temp/",
});

6. Reactアプリをビルド&デプロイ

下記コマンドを実行して、ビルド&デプロイします。

npm run build
npm run deploy

7. Github Pagesの設定

下記の画像の通りに設定してください。
visit siteのリンクを踏むと作成したアプリにアクセスできるようになります。 github pagesの設定

まとめ

今回はGithub Pagesにデプロイするまでの流れをまとめてみました。
よかったら参考にしてみてください。

JavaScript Primerを読んで

はじめに

今回はJavaScriptの入門書として有名なJavaScript primerを読んでみました。
読んで感じたことをまとめていこうと思います。

本書を読んで

よかったところ

なんといってもJavaScriptの基礎から学べるものが無料で公開されているのがよかったです。
好きなタイミングで読み返せるので今後もこの書籍にお世話になりながら習得していきたいです。

学んだこと

コードの実行順なども交えながら書かれており、理解の助けになりました。
学べたことを挙げるとすると以下の項目になります。
- 非同期処理
- json
- 関数の扱い方

また、後半部分では実際に簡易的なアプリを作りながら、
- node.jsの使い方
- モジュールのimportの方法〜使用方法
- ユニットテストの記述方法
- イベントの扱い方
を学ぶことができました。

難しかったこと

非同期処理のpromiseが難しかったです。
理解できたのは、返す値はresolve/reject、メソッドチェーンでかける、くらいですね。
実際に使えるのはまだ先になりそうです、、、。

また、全体的な理解の浅さもあって後半の簡易アプリ作成が難しかったです。

終わりに

今回はJavaScript primerを読んだ感想をまとめました。
頭の中でrubyと比較しながら学習できたのはよかったです。
次は実際に手を動かして、モノを作りながら理解していきたいです。

『Everyday Rails - RSpecによるRailsテスト入門』を読んで

はじめに

今回は、『Everyday Rails - RSpecによるRailsテスト入門』を読んで学習した内容をまとめようと思います。
そもそもコードを用いたテストが初めてなのでワクワクでした。
それではやっていこう！

本書を読んで

よかったところ

モデルやコントローラ、それらをまとめた統合テストの順に学びました。
全体の流れを理解する前に詳細から話が進みましたが、全く問題なくスッと理解できました。
また、テスト駆動開発にも触れられており、その一端をハンズオンで体験することができたのでとても貴重な時間でした。

学んだこと

1周してざっくり理解できた内容は次の内容になります。
・モデルスペック
・ファクトリ（サンプルデータ作成、FactoryBot便利！）
・コントローラスペック
・システムスペック
・DRYの適用方法
・メール送信やファイルアップロードのテスト

また、最後のアドバイスや著者お気に入りの格言はシンプルに心に響きました。

難しかったこと

特に難しかったのは、モックとスタブ、テスト駆動開発です。
モックとスタブは、言葉は理解できたのですが、どのように使用されているかが深く理解できませんでした。
また、テスト駆動開発についての仕組みは理解できました。
・実装したいことのテストを先に書き、意図的にエラーを出力させる。
・そのエラーを解消するためにコードを書いていく
といった流れがテスト駆動開発なのだと理解しました。

まとめ

テスト駆動開発について読了後に少し調べて見ましたが、かなり前にrails開発者のDHHさんが否定している発言が見つかりました。
また生成AIが発達した今ではさらに開発の実態が変わってきているので、そういった開発手法もあるということを理解できたのでよかったです。
少し脱線しましたが、本書についてはテストに関して学べて素晴らしい教材でした。
それでは、このへんで！

twitter_clone deviseの導入

はじめに

今回からtwitter cloneの実装について書いていきます。
振り返りつつざっくりとしたフローを書いていきたいと思います。

deviseの導入

deviseというgemは優秀で、ユーザーの登録、ログイン、ログアウト機能を簡単に実装できます。
また、ユーザー登録時にメール認証することも可能で、こちらも簡単でした。

インストール、ユーザーモデルの作成は下記コマンドを入力してください。

rails g devise:install
rails g devise User

ユーザーモデル作成後にmigrationファイルが作成されますが、
今回は全てアンコメントしてカラムを作成しました。

この容易な実装を実現しているのは、モジュールとして導入されていることが大きな理由です。
10個もあるため、必要なものだけincludeしたり、オーバーライドしてカスタマイズすることが可能です。
今回はすべて有効化しました。

すべて有効化するには、次のように記載してください。
User.rb

class User < ApplicationRecord   
   devise :database_authenticatable, :registerable,  
          :recoverable, :rememberable, :validatable,  
          :omniauthable, :lockable, :trackable, :confirmable, :timeoutable  
 end

また、deviseの初期設定ではすべて英語となっていますので日本語にしましょう。

curl https://raw.githubusercontent.com/tigrish/devise-i18n/refs/heads/master/rails/locales/ja.yml -o config/locales/devise.ja.yml

※config.i18n.default_locale = :jaは忘れずに記載してくださいね。

先ほど少し触れたメールアドレスでの認証ですが、開発環境ではletter_opener_webというgemを使用しました。
localhost:3000/letter_opener/にアクセスすることで、ユーザー登録アクションを起こした際にメールを確認できます。

ユーザー用のview作成

omniauthの導入

Oauth2.0という仕組みを利用したログイン（今回はgithub）も合わせて実装しました。
よくログインページで見る、googleやx, Lineでログインするようなものです。

そもそもOauthとは...

Oauthとは、サードパーティアプリからユーザーの許可のもと、リソースやデータにアクセスを可能にする仕組みのことです。
パスワードは共有されないため、安心して使用することができます。

今回はGithubを利用したgithubでのログインを実装しました。
私は下記のgemをinstallしましたが、サービスに合わせて変えてみてください。

gemfile

gem 'omniauth'
gem 'omniauth-github'
gem 'omniauth-rails_csrf_protection'

また、サービス側でのIDやkeyの取得も合わせて必要になりますが、ここでは割愛します。

今回はユーザー登録時に生年月日や電話番号の登録を求めています。
そのためOauthを利用した際のログイン時には、デフォルト値を設定して、その値でDBに登録しています。

まとめ

今回はざっくりとサインアップ、ログイン機能実装について話しました。
いろんなサイトのログインで見る形の仕組みや実装について触れることができて、理解が深まりました。
では、今回はこのへんで！

現場で使える Ruby on Rails 5 速習実践ガイドを読んで

はじめに

今回はRailsのインプット教材として使用した、「現場で使える Ruby on Rails 5 速習実践ガイド」の感想をまとめたいと思います！

よかったところ

Railsのセットアップから基本的なコードの書き方、どのような技術が使われているのかが学べてよかったです。
また、最後にはRailsコマンドも簡潔にまとまっており何度も見返して身に付けていきたい内容でした。

学んだこと

  • chapter1 rubyについて
    • 基本文法について触れておりました。
      特に全体を通してよく目にするボッチ演算子はこの章で学べて良かったです。
  • chapter2 Railsセットアップ方法
    • 本では自身の環境にインストールする方法で解説されていました。
      今回は、Dockerを使用してRuby3.2.1、Rails7.0.8にて構築しました。
      本の内容とバージョンが異なりますが、今後使用していくのはRails7だと思いこちらを採用しました。
  • chapter3 CRUD機能を持ったアプリ作成
    • コマンドを使用したアプリやモデルの雛形作成の方法について
    • slimというテンプレートファイル
    • flashメッセージ
    • 削除機能
  • chapter4 機能追加
    • マイグレーションの重要性
    • データの制限、バリデーションの設定
    • ログイン機能
    • 絞り込み方法
  • chapter5 テスト
    • Rspecを用いたテスト方法について学べました。これを書くことでアプリの想定した動きを他者に伝えることも可能なので便利な側面もあります。
  • chapter6 Railsの全体像について
    • Railsにはどんな技術が使用または影響しているのか
    • ルーティングや翻訳ファイルについて
  • chapter7 機能追加 発展編
    • 検索機能、メール送信、ファイルアップロード、csvの処理、非同期処理
  • chapter8 javascriptとの関連性
    • ajaxについて、turbo、react
  • chapter9 複数人でアプリ開発する際の注意点
  • chapter10 railsアプリの作成後について
    • バージョンアップ、bundle update、共通化、コードを書くファイルの最適化

難しかったこと

  • slimというテンプレートファイルを初めて学びましたが、瞬時に判断するのが難しかったです。早くこの書き方に慣れたいです。
  • テストは大まかな書き方については何となく理解出来ましたが、どういった動作について書けばよいのかわからなかったです。
  • 時々、どのファイルに書けばよいか分からなくなることがありました。

まとめ

Railsインプットとして速習実践ガイドを読みましたが、分かりやすかったです。
これまで他の教材で深堀りされていなかったところが事細かに記載されており理解が進みました。
まだあまり理解できていない気がしますが実際にものを作って理解していきたいと思います！
ではまた！

RESTについてまとめてみた！！

はじめに

今回はRESTについて学習したのでまとめていきます！！

RESTについて

そもそもRESTとは、webシステムを相互につなぐための設計思想のことです。

これは「REpresentational State Transfer」の略で、
直訳すると「具象的な状態の転送」となります。
少し意訳すると、リソースの「状態」を「明確」にして「転送」するということになります。

そしてREST原則として、次の6つに分けてルールが定められています。

  • クライアント/サーバー
  • ステートレス
  • キャッシュ制御
  • 統一インターフェース
  • 階層化システム
  • コードオンデマンド

詳しく説明していきます！

クライアント/サーバー

クライアントとサーバーを分離する考え方です。
クライアントはwebサイトを表示している端末のPCやスマートフォン、
サーバーはwebサイトを提供しているコンピュータになります。

ステートレス

statelessを意訳すると状態を保存しないという意味になります。
サーバー・クライアント間で状態（ログイン状態）を保存しないため、
安全かつサーバーに依存せずにやり取りすることが出来ます。

キャッシュ制御

クライアントにキャッシュさせることが出来るルールです。
通信料が減り、速度や拡張性の向上が期待できます。

統一インターフェース

リソースの操作を統一するというルールです。

階層化システム

各システムをコンポーネントとして階層ごとに分離することを言います。
分離することで処理が遅くなるという弊害もあります。

コードオンデマンド

コードをクライアントに渡し、処理を実行することが出来ます。
サーバーでの処理ではなくなるので負荷を減らすことが出来ます。

以上の6つのルールを遵守して設計されたAPIを「REST API」と言います。
さらにかみ砕くと、

REST APIとは、webシステム間のやり取りを標準化した接続方法

と言えそうです。

URI、HTTPメソッドを定義してみる

movieをリソースとしてCRUD操作を定義すると次のようになります。

URI HTTP method
/movies POST
/movies/hoge GET
/movies/hoge PUT
/movies/hoge DELETE

まとめ

今回はRESTについてまとめてみました。
設計思想があるおかげで実際に作成するときの指針になって便利だと感じました。