search

toke04 / ruby-flash-card

3 stars 0 forks source link

主要な機能の技術検証を実際に手を動かして行う #23

Closed toke04 closed 1 year ago

toke04 commented 1 year ago

以下の技術の検証を行う

vite_rails

こちらを試す https://tech.fusic.co.jp/posts/2022-07-07-vite-rails-react/

rspec

コピペしながら試せる。 rubocop & tailwind の勉強にもなる。 あと、基本的なCRUDの勉強(railsの超基本) https://zenn.dev/tmasuyama1114/books/ab51fea5d5f659

伊藤さんのrspec記事一覧 https://blog.jnito.com/entry/2023/05/12/070002

tailwind/daisyUI

細かい環境構築等はこれを参考にする https://bootcamp.fjord.jp/reports/65288 https://github.com/syo-tokeshi/rspec-rubocop-tailwind-app/commit/21d9c07c76799a2dbad5726ea8b01b98707f5aee

上と同じ教材で https://zenn.dev/tmasuyama1114/books/ab51fea5d5f659

https://lef237.hatenablog.com/entry/2023/02/21/113432 tailwind.config.jsに、以下の文を記述することで、tsx等にもtailwindが適応されるようになるみたい

'./app/views/**/*.html.slim',
    './app/javascript/**/*.tsx'

ここにも詳しい説明ある https://zenn.dev/yoiyoicho/articles/410a7e3fd892b5

vite_railsを使ったreact & typescriptの導入と、Tailwindの併用は上手くいく気がする。 viteを使ってreactをセットアップするのと、tailwindcss-rails を使って、tailwind環境を作るのはバッティングしないような気がする。 両方ともサーバーにライブラリがインストールされて、読み込まれていたら良いだけなので https://tech.fusic.co.jp/posts/2022-07-07-vite-rails-react/

daisyuiは普通にyarnかnpmでインストールして終わりだと思う。多分困らない

https://qiita.com/AGO523/items/32129869f5d4a23f2133#tailwindcss%E3%81%AEui%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E5%B0%8E%E5%85%A5

Rubocopも念の為試す

上と同じ教材 https://zenn.dev/tmasuyama1114/books/ab51fea5d5f659 + プラクティスの資料で確認 https://bootcamp.fjord.jp/practices/142

lefさんと同じくrubocop-fjordを使うのもありかも https://github.com/lef237/quotelist/blob/main/Gemfile

react-paginate

この記事の通りにライブラリを記述すると動くことが分かった https://github.com/AdeleD/react-paginate

このように書く

呼び出す https://github.com/syo-tokeshi/vite-rails-app/blob/main/app/frontend/src/App.tsx

呼び出される https://github.com/syo-tokeshi/vite-rails-app/blob/main/app/frontend/src/PaginatedItems.tsx

ここに詳しいオプションの説明もある https://qiita.com/togo_mentor/items/fe9f2c68ea824f5e5537

omniauth

この記事の通りにやればほぼ上手くいく https://qiita.com/lamp7800/items/84ac4f9f7f5d4e171f1d

こちらで実装に成功しているので参考にすること https://github.com/syo-tokeshi/report_app

取得した写真はimage_tagで出力できる https://pikawaka.com/rails/image_tag

[参考情報] 最初にdeviceを導入 https://fuga-ch85.hatenablog.com/entry/2021/04/03/165849

次にomniauthを導入 https://fuga-ch85.hatenablog.com/entry/2021/04/10/075536

Client IDとClient secretsが必要なので、これを見て取得し、環境変数に設定 https://fuga-ch85.hatenablog.com/entry/2021/04/04/164302

モデルのenumの機能を使って、selectタグからのデータ送信を受け取り、モデルにlanguageを保存する

rails7からenumは買っ方が少しだけ変わったので、困ったら見ること https://techracho.bpsinc.jp/hachi8833/2021_06_17/105107

こちらの記事を見ればok 対して難しくない。 普通にDBのtableに languageをstringで設定して、 enum :language, {:Ruby=>0, :PHP=>1, :Python=>2, :Javascript=>3, :Go=>4, :Java=>5, :Swift=>6, :Kotlin=>7, :R=>8, :Rust=>9, :C=>10, :Scala=>11} enum language: { Ruby: 0, Javascript: 1, Python: 2, PHP: 3, Go: 4}

enum :language, { ruby: 0, php: 1, python: 2, javascript: 3, go: 4, java: 5, swift: 6, kotlin: 7, r: 8, rust: 9, c: 10, scala : 11} enum :language, {:ruby=>0, :php=>1, :python=>2, :javascript=>3, :go=>4, :java=>5, :swift=>6, :kotlin=>7, :r=>8, :rust=>9, :c=>10, :scala=>11} https://pikawaka.com/rails/enum https://techracho.bpsinc.jp/hachi8833/2022_02_18/115735

toke04 commented 1 year ago

ほぼ終了。 後はテストぐらい。 なんとかなると思う