はじめに
おはようございます！現在、朝の7時14分です。
昨日はLPの途中までしかできなかったので、
まずは午前中までにLPを終わらし、残りで認証画面(ログイン、新規登録)を作り
backendも作るという流れでいこうと思います！
MUIについては少しずつ慣れつつあるので、今日は少しスピードが上がると信じてます
ではltg
技術選定
[frontend]
- Nextjs(pages router) => App Routerの理解に苦しんだため
- MUI => 調べたランキングでtopだったため
[backend]
- Rails 7 => 使い慣れているため
[github]
LP作成
現状がこれですね。
Cardに勝手にborder-shadowがついているのは気になりますが、
このまま進めます。
ということで次は登録フォームなので、React-hook-formとzodを入れます。
でもメインはここじゃないし、普通にinput作るだけでいいか。
MUIとRHF統合するのはどうするんだろうか。controllerだっけ。
昨日の教訓、見た目完璧を求めすぎるのはやめる。
大きさが少し違うとか高さが少しズレてるとかは無視。
MVPで行こう。
はい。LP終了。ちょっと余白が埋まってなくてアレだけど。
認証画面
新規登録画面
ということで1日遅れで認証画面作成します
まずは新規登録画面から。
んー、疲れた。
再開。
どうも抽象的なコンポーネントを作れないかと悩んでしまう。
いつか作れるようになると思う。
できる限りでいいや。
ええと。muiにrhfを組み込むのはどうしたらいいのか。
MUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる
いじり中。
このアイコンのやつ。
これは作りやすかった。
コード
<Controller
name="password"
control={control}
render={({ field, fieldState }) => (
<TextField
{...field}
type={isVisible ? "text" : "password"}
label="password"
error={fieldState.invalid}
helperText={fieldState.error?.message}
sx={{ width: "60%", minWidth: "245px" }}
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
>
{isVisible ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
},
}}
/>
)}
/>
ただ今のままだと再レンダリングがひどいからこれはコンポーネントに閉じ込めないといけない。
まぁいいや。後々。
ということで新規登録フォーム完成。
rhfにzodを組み込んでシンプルなフォーム完成。
バリデーションも働いているし、ボタンも押せなくなってる。
入力要項を満足したら送信もできている。
反省ポイント
ストレスなくできるようになることを少しづつ増やしていけばいい。
このフォームあたりはストレスなくできるようになった。
ストレスあるということはまだ習熟しきれていないということ。
今できない、抽象コンポーネントの作成もサクッとできないデザインも
少しづつあげていけばいずれできるようになる。
最初から完璧を目指さないこと。
現に1ページ、1時間くらいでできた。デザインだけでなくrhfとかzodも使って。
ということで頑張れ。
ログイン画面
これなんか新規登録画面使いまわせそうだ。
でもなんだ。とりあえず書き出していく。
謎の現象
今気づいた。
なんかリロード後に右上に設定したダークモードのアイコンが
画面に一瞬デカデカと表示される。
あとでやろ。
やっぱり。ログイン画面はほぼタイトルとスキーマ名変えるくらいでいけた。
ということでfrontができたのでbackを作っていこう。
あーでもfrontでまだpostする処理書いてないな。
ちょっと考えよう。
一旦休憩。
はい。開始。
少し前にSPAの認証やったんだけどすっかり忘れてる。
とりあえずこいつら。
# api authentication gem "devise" gem "devise-jwt"
devise-token-authも選択肢として上がったが、実務でも使ってるし、こっちを選択。
設定方法というか使い始めどうするんだろう。忘れてるな。何もかも。
こういう時は公式ドキュメント。
GitHub - heartcombo/devise: Flexible authentication solution for Rails with Warden.
そのあとはrails generate devise:installらしい。
create config/initializers/devise.rb
create config/locales/devise.en.yml
こいつらできる。
あー少しづつ思い出してきた。
Getting startedに書いてあるわ。少しだけ英語読めてよかった。
まだ読むのにストレスだけど。
次にmailerの設定。これだけはやる必要があるらしい。
それ以外は not requiredらしいからスキップ。
でUserを作る。docker compose run --rm back rails g devise User
✔ Container diary_1-db-1 Running 0.0s
invoke active_record
create db/migrate/20240914034005_devise_create_users.rb
create app/models/user.rb
invoke test_unit
create test/models/user_test.rb
create test/fixtures/users.yml
insert app/models/user.rb
route devise_for :users
migrationファイル覗いて、confirmableとか追加して云々して
nameとか追加した。
終わったのでmigrate
docker compose run --rm back rails db:migrate
というかadd_indexってなんでやるの?
deviseの add_index :users, :email, unique: true 記述について #Rails - Qiita
あ、今思ったけど。アバター画像とか追加できるようになってないわ。
忘れてた。まあいいや。
全部できてから後からやろ。
次やることは新規登録。
送るのはnameとemailとパスワード。
それをいじるのはこうするらしい。
class ApplicationController < ActionController::Base
before_action d
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :email, :password, :password_confirmation])
end
end
devise/lib/devise/parameter_sanitizer.rb at main · heartcombo/devise · GitHub
ただ、defaultでpasswordとpassword_confirmationはついている。
emailもついているそうだが見つけられなかった。
DEFAULT_PERMITTED_ATTRIBUTES = {
sign_in: [:password, :remember_me],
sign_up: [:password, :password_confirmation],
account_update: [:password, :password_confirmation, :current_password]
}
ということでapplication_controllerに書こうと思ったけどよくみたらなんか違う。
ApplicationController::BaseではなくてApplicationController::APIになってる。
調べたらAPIはBaseの軽量版らしい。ただdeviseはBaseでの使用を想定しているらしいからここは修正しないと。
ということでapp/controllers/api/v1下に新しくapi_v1_base_controller.rbを作成してその中に
module Api
module V1
class ApiV1BaseController < ApplicationController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys:[:name, :email, :password, :password_confirmation])
end
end
end
end
このあとは？
すぐ思いつかないな。まだまだダメや。
API開発ツールで投げてみるか。
違うわ。jwtの設定だ。
GitHub - waiting-for-dev/devise-jwt: JWT token authentication with devise and rails
Usageを覗いてみる。
まずSecret key configurationしてね。秘密鍵らしいです。
ということでbin/rails credentials:editして
詰まった。
色々やったのですが、うまくいかず詰まったので。
最初にこうやりました。もちろんdockerコンテナ上で。
bin/rails credentials:edit Configured Git diff driver for credentials. No $VISUAL or $EDITOR to open file in. Assign one like this: VISUAL="mate --wait" bin/rails credentials:edit For editors that fork and exit immediately, it's important to pass a wait flag; otherwise, the file will be saved immediately with no chance to edit.
てしたら怒られた。EDITORを設定しろらしい。
次にこうした。
EDITOR="vi" bin/rails credentials:edit Editing config/credentials.yml.enc... File encrypted and saved.
なんかこれもエディタが開かずにコンソールが帰ってきてしまった。
その後もcredentials.yml.envがあるからというような記述があったので削除したがだめ。
Rails – 今更だけど credentials.yml.enc / secret_key_base の扱いがよく分かってなかった
Rails5.2から追加された credentials.yml.enc のキホン #Rails - Qiita
書式的にはあっていると思うのだが、なんでダメなのだろうか。
調べてみると 指定したエディタがおかしいとさっきのすぐ保存されて終わる挙動を示すらしい。
もしやvi自体がないのではと、それもある意味おかしいに該当するのではと思い、
which viしてみたところ結果はなかった。vimも調べたがない。
ということでvimを入れた。
UbuntuにVimをインストールする #Ubuntu - Qiita
apt-get install vimして入れた。
再チャレンジ。
EDITOR="vim" bin/rails credentials:edit。
成功。vimの画面が開いた。
あとはこの例を見習って編集。vimも久しぶりに使った。
# Other secrets... # Used as the base secret for Devise JWT devise_jwt_secret_key: abc...xyz
設定できたので、次はdeviseのinitializerに飛んで設定。
config.jwt do |jwt|
jwt.secret = Rails.application.credentials.devise_jwt_secret_key!
end
次はなんか変えたい人用らしいからスキップ。
んでModel configuration。
わからん。マジでわからん。
終わりに
今日はここまで。
