- 1. Redux-sagaを使ってReactからRubyで作成したAPIに接続する
- 2. 【初心者必見】簡単!BootStrapとCSSで垢抜けたサイトを作る方法!
- 3. 指定するディレクトリ階層下にファイルを追加する
- 4. cannot load such file — bootsnap/setup
- 5. railsでjava scriptやcssを使用するには?
- 6. Ruby シンボルとキーについて
- 7. プロを目指す人のためのRuby入門[改訂2版]を読んで
- 8. discardで論理削除する
- 9. Rails Server が正常に終了しない場合の対処法
- 10. 【Rails】RailsにJS, jQueryを実装する方法
- 11. React x Ruby on Rails を使用したチーム開発記録
- 12. 【Rails】MySQLのパスワードの確認方法
- 13. button_to に思った通りの CSS が効かない問題の対処法
- 14. 【Rails】uninitialized constant Rack: :MiniProfiler の解決方法
- 15. RuboCop-airbnbの導入方法
- 16. 【個人開発】【Next.js + Rails API】アパレル業界で働く人のためのアプリを開発しました
- 17. 【Rails】 Cloud Natural Language API 活用ハンズオン
- 18. 自己PCにRedmineを構築
- 19. さようなら、Hotwire Stimulus ✕ React
- 20. Rails7とPostgresqlをdockerで環境構築
Redux-sagaを使ってReactからRubyで作成したAPIに接続する
# やりたいこと
– Redux-sagaを使ってReactからRubyで作成したAPIに接続する
– Redux、Redux-sagaの使い方については下記記事参照
[Reac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト](https://reffect.co.jp/react/react-redux-for-beginner/)
[redux-sagaとは何なのか? – Qiita](https://qiita.com/souhei-etou/items/2dce0a1dc8f24e9c2668)
# 前提
– ruby: 2.7 + Rails: 6
– react: 16.8.6
# ファイル構成
“`
app
├── controller
│ └── forms_controller.rb
└── javascript
├── app
│ ├── containers
│ │ └── Form.js
│ └── redux
│ ├── actions
│
【初心者必見】簡単!BootStrapとCSSで垢抜けたサイトを作る方法!
こんばんは!
BootStrapだとなんだかBootStrap感が出てしまう(?)と悩んでいる方、もしよかったらこちらの記事を参考にしていただけると幸いです。
最近ECサイトを作っていて、その際にBootStrapとCSSを多用してレイアウトやデザインを修正しているので、個人的に今後も使えるなと思ったデザインの実装方法をお伝えしようと思います!
Railsを使っていますが、紹介ではRails以外で使える書き方にしています。# 環境
AWS Cloud9
Ruby on Rails 6系
Bootstrap Ver.4(実装方法は[こちら](https://qiita.com/gintaro0111/items/716035adcb8e097b244c))
CSS
Font Awesome導入済み## ホバー時に色が変わるボタン
完成後はこちら。ホバー時に背景色と文字色が反転します!BootStrapを使うので、難しいCSSの記述はありません。ちなみにアイコンはFont Awesomeを使用していますが、これは導入後コピペですぐできるものなので、実装は割愛します。
通常時
![ス
指定するディレクトリ階層下にファイルを追加する
adminというディレクトリ階層下にcontrollerを作成する方法
“`php:ターミナル
rails g controller admin::searches
“`“`php:app/controllers/admin配下
app/controllers/admin/searches_controller.rb
“`
cannot load such file — bootsnap/setup
# cannot load such file — bootsnap/setup
“`
gem ‘bootsnap’
“`# 出典
https://qiita.com/Okame-chan/items/08d5d9d65e101735b1bc# 感想
とりあえず残しておいて
勉強する
railsでjava scriptやcssを使用するには?
Railsでjava scriptやCSSファイルを使用する場合、一般的には2つの方法があるそうです。(どっちを使えばいいの?と思いますが、初学者にはまだわかりません、、、)
## 1. CDNからの読み込み
外部のライブラリやフレームワークを使用する場合、そのファイルをCDNから直接読み込むことができます。これにより、アプリケーションのレスポンスタイムが改善され、ライブラリのバージョン管理や更新が簡素化されます。
※「CDN」はContent Delivery Networkの略で、**インターネット経由でファイルを配信する仕組み**のことです。### 例 jQueryやBootstrapを読み込む場合
“`html
sample
Ruby シンボルとキーについて
## Rubyにおけるシンボルとキーについての関係性について
Railsでストロングパラメータの設定を行う際に、シンボルとキーの理解が整理できていないことに気がついたので、こちらでまとめておこうと思います。
“`ruby
def site_params
params.require(:site).permit(:name, :subtitle, :description, :favicon, :og_image, main_images: [] )
end
“`
私が気になった点は、`:subtitle`と`main_images: []`の書き方の違い(:の位置)です。`:subtitle`
単一のデータを所有するカラムの記載の仕方。`main_images: []`
複数のデータを所有するカラムの記載の仕方。
ストロングパラメータに追加する際は、**末尾に追加**する。
そうでないと、Railsの規約に従っていないらしく、エラーが出る。今回の話題は、この`:subtitle`、`main_images:`の部分について。
### キーの種類
プロを目指す人のためのRuby入門[改訂2版]を読んで
プロを目指す人のためのRuby入門[改訂2版]を読んでの感想
## 良かったところ
### 説明が丁寧
まず、本書のイントロダクションにも書いてあったのですが、まったくプログラムを書いたことのない完全なプログミング初心者には少し難易度が高い印象でした。
ですが、サンプルコードがたくさん書かれているのでわかりやすかったです。### 基礎から応用まで
中級者〜上級者用ではあるのですが、基礎を理解できる章からそれを使った応用の章までと網羅されていました。### 例題とリファクタリング作業
章ごとに例題があり、動いた後にどのようにリファクタリングできるかを説明してあります。シンプルでわかりやすい構文での書き方を学べます。## 学んだこと
プログラマの三代美徳は「怠惰・短気・傲慢」
### 基本構文について
* メソッドの戻り値の指定にreturnは使わない。returnはメソッドを途中で脱出する際に使われることが多く最後に評価された式がメソッドの戻り値になる。
* エイリアスメソッドが多くある。
* メソッド定義も式になっている。メソッド名をシンボルとして返す。###
discardで論理削除する
# はじめに
先日、業務でdiscardを使用して論理削除の実装をしました。
discardは初めて使用したのですが、とても簡単に論理削除の実装ができたため、備忘録として記事にしたいと思います。私自身、まだまだ未熟な経験の浅いエンジニアですので、誤った解釈をしている可能性もあります。もしそういった場合がありましたら、ぜひコメントでご指摘いただければ幸いです。
# 論理削除とは
論理削除は、データベースのレコードを物理的には削除せずに、削除されたかのように扱う方法です。
レコードに「削除された」という状態を示すマークやフラグを設定することによって、レコードはデータベースに残り続けますが、アプリケーションの動作上では「存在しない」または「アクセス不可能」な状態にできます。# discard とは
discard は、Ruby on Rails で論理削除を簡単に実装するための Gem です。
discard では、論理削除に関連するカスタムロジックを書く必要がなくなり、一貫した方法でデータを扱うことができます。# 環境設定
### Gem のインストール
Gemfi
Rails Server が正常に終了しない場合の対処法
## 事象
`Rails Server` を使用している際、通常は `Ctrl + C` を使用して終了しますが、サーバーが正常に終了しない場合があります。再度 `bin/rails s` コマンドで `Rails Server` を起動しようとすると、以下のようなエラーが発生することがあります。
“`sh
% bin/rails s
=> Booting Puma
=> Rails 7.0.4.3 application starting in development
=> Run `bin/rails server –help` for more startup options
A server is already running. Check /path/to/your/project/tmp/pids/server.pid
Exiting
“`こちらのエラーメッセージは `Rails Server` が既に実行中であることを示しており、正常に終了していない、或いは異常終了して `プ
【Rails】RailsにJS, jQueryを実装する方法
こんばんは!
現在チーム開発で時間がだいぶ余りRailsにJavaScriptやjQueryを実装したので、実装方法を忘れないうちに書いておきます!# 環境
AWS Cloud9
Rails6系# 方法
## app/javascript配下にjsファイルを作成する
名前はxxxx.jsとなっていればなんでも大丈夫です!今回はscript.jsにしました。
実装後、基本的にはこのファイルにJS、jQueryの記述をしていくことになります。## app/javascript/packs/application.jsにimportする
“`javascript:app/javascript/packs/application.js
import “script.js”
“`
この記述を追加してください。## yarnを使用して導入
ターミナル上でこのコマンドを実行してください。
“`terminal:ターミナル
$ yarn add jquery
“`## config/webpack/environment.jsに追記する
“`javascript:conf
React x Ruby on Rails を使用したチーム開発記録
## はじめに
私は、株式会社ユーブルが提供している「APPRENTICE」というエンジニア内定直結のサービスを受講しています。二回目のチーム開発を行いました。その体験がまたまた非常に貴重なものになりましたので、記憶が鮮明なうちに記録します!
## 二回目のチーム開発
4人1チームとなり、今まで学習したプログラミング言語を使用しテーマに沿ったアプリケーションを実装する。
Rails, Laravel, React, typescript,Next.js などのフレームワークを使用し、アプリケーション開発を行います。(尚、使用する技術は決められておらず、それぞれ考えたアプリにあった技術を使用します。)そして今回は二回目のチーム開発なので、前回の後悔を絶対残さないぞ!という気持ちで取り組みました。
そして出来た制作物をプレゼンする。プレゼン時間は3分。プレゼンは Zoom の画面共有で、スライドとデモを使用し、デモはローカル上で制作物を実際に動かして見せる。その後メンターからのフィードバックがある。
そして今回も・・・!
受講生からの評価が最も高いチームに Best St
【Rails】MySQLのパスワードの確認方法
### configディレクトリ内にあるdatabase.ymlファイルにあるpasswordの欄をチェック。
“`
default: &default
adapter: mysql2
encoding: utf8mb4
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password:
host: db
“`
button_to に思った通りの CSS が効かない問題の対処法
## 事象
`button_to` という `Rails` のヘルパーメソッドを使って送信ボタンを実装するときに下記のように実装すると `button_to` に思った通りの `CSS` が効きませんでした。今回はその原因と対処法を共有いたします。
“`ruby
<%= button_to '送信', 任意の_path, method: :post, params: { key: 'value' }, class: 'custom-class' %>
“`## 原因
この問題の根本原因は `button_to` ヘルパーが生成する `HTML` 構造にあります。具体的には、指定した `class (custom-class)` が `form` 要素ではなく、内部の `input` 要素に適用されてしまうためです。`Rails` は `button_to` を使用すると、以下のような `HTML` を生成します。
“`ruby:before
【Rails】uninitialized constant Rack: :MiniProfiler の解決方法
# 概要
この記事は、Railsアプリケーションのrspec実行時や、本番デプロイの際に、時々起こる `uninitialized constant Rack: :MiniProfiler` の解決方法について言及していきます。# エラー再現
エラーが起きる際の再現をしてみます。:::note warn
**注意点**
よくあるパターンでやっているだけなので、違うパターンでも似たようなエラーを起きる可能性はあります。
:::`development` の環境で開発をしている際、左上に出る計測表示を消したくなったとします。
「**rails 左上 数字消す**」みたいな感じで検索したとします。
その中で見つけた解決策を試してみます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524017/6000f393-b5b9-39ea-4b42-825f93c05012.png)
`config/initializers` 配下に `rack_profile.rb` を作成しま
RuboCop-airbnbの導入方法
## 環境構築の手順
### ①Gemの追加
“`:Gemfile
group :development, :test do
…
# 以下追加
gem “rubocop-airbnb”
end
“`### ②rubocop-airbnb の設定
ルートディレクトリに以下の2ファイルを作成する
“`:.rubocop.yml
inherit_from:
– .rubocop_airbnb.yml# Rails用に最適化
Rails:
Enabled: true# 文字数の上限を80文字から変更
LineLength:
Max: 130# rubocopで検証したくないフォルダを指定
AllCops:
Exclude:
– ‘db/**/*’
– ‘config/**/*’
– ‘bin/*’
– ‘**/Gemfile’
– ‘vendor/**/*’
– ‘.git/**/*’
“`
“`:.rubocop_airbnb.yml
require:
– rubocop-a
【個人開発】【Next.js + Rails API】アパレル業界で働く人のためのアプリを開発しました
## はじめに
はじめまして。[いず](https://x.com/iz_rntq44)です。
現在webエンジニア転職を目指して日々学習中です。
今回初めての個人開発として、アパレル業界で働く人のためのアプリ『sales buddy』を開発しました!https://sbuddy-apparel.com
サービスURL:https://sbuddy-apparel.com
GitHub:https://github.com/eriplume/sales_buddy## サービスについて
アパレル業界で働く人の、自己記録・管理をサポートするアプリです。
個人売上や業務の記録、レポートの作成サポートなどを通して、アパレル販売員の記録係的ポジションを担うバディのようなアプリを目指しています。## 開発の背景
私自身が前職のアパレル業界で働いていた中で、– 個人の売上を記録したいけど、アパレルならではの項目を入力するツールがない。計算が面倒くさい。
– 目標達成へのモチベーションを高めるツールが欲しい
– 忙しい中での月末のレポートの作成が面倒!大変!などと思っていました
【Rails】 Cloud Natural Language API 活用ハンズオン
# 概要
この記事では、GCPの `Cloud Natural Language API`を用いて、登録したタスクに対して、自動でタグ付けを行うTODOアプリの作成をハンズオン形式で行ってみようと思います。https://cloud.google.com/natural-language
# 対象者
この章では対象者について説明します。
– Railsを用いたアプリケーションの作成経験がある方# 動作環境
こちらの章では動作環境について明記していきます。## ハードウェア
– **PC** : MacBook Air (M1, 2020モデル)
– **RAM** : 8GB## ソフトウェア
– **OS** : macOS Monterey (バージョン 12.1)## 開発環境
– **Editor** : Visual Studio Code
– **Language** : Ruby (バージョン 3.1.2)
– **FW** : Rails (バージョン 6.1.7)# 実装
こちらの章では実装を進めていきます。:::note warn
**
自己PCにRedmineを構築
# 背景
個人的なスケジュールとか、勉強とかのタスク管理をしたかった🦝## 今回構築した環境・バージョン
macos Sonoma 14.2
チップ Apple M1
ruby 3.1.4
Remine 5.1.1
Mysql 5.7# 手順
## brewインストール自分の環境ではbrewがインストールされていないようだったので、インストール
“`bash:
コマンド : brew install rbenv実行結果:bash: brew: command not found
“`どうやらbrewが入ってないらしい
ということで以下を実行しインストール
“`bash:
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
“`
再度brew -vで確認するも、、、、
それでもbrew -vでnot found になるので“`bash:
echo export PATH=’/opt/homebrew/bin
さようなら、Hotwire Stimulus ✕ React
## はじめに
私のとあるRailsプロジェクトは Hotwire Stimulus ✕ React 構成を採用していた。グラフ描画の機能を実装するために流行りの [tremor](https://www.tremor.so/) を使ってみたかったからである。
## 実装
実装は以下の通り。
“`app/javascript/components/RevisionFluctuation.tsx
import React from “react”;
import { createRoot } from “react-dom/client”;
import { Card, Title, LineChart } from “@tremor/react”;const RevisionFluctuation = ({ data }) => (
<>
Revision fluctuation
Rails7とPostgresqlをdockerで環境構築
最近、Dockerを使ってrailsの環境構築にチャレンジしたので、まとめておきたいと思います。
はじめに新規作成したフォルダの下に4つのファイルを作ってください(ファイル名は全く一緒でお願いします!)
1. Dockerfile
1. docker-compose
1. Gemfile
1. Gemfile.lock
それぞれのファイルの記述を順を追って紹介します。
# Dockerfile
“`
FROM ruby:3.1.2
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs vim
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
ADD . /myapp
“`
# docker-compose.yml
“`docker-compose.yml
version: ‘3’
services: