テストを書いていきます。今回はRSpecを使用します。以下を Gemfile に追加してください。 [Gemfile] group :development, :test do # 省略 gem "rspec-rails" end % bundle RSpec を設定する RSpecをインストールします。 % rails g rspec:install create .…

Railsを使う機会があったので、復習のためにアプリを作ろうと思います。 ちょうど資格の勉強をしているので、学習に関連するアプリが良いかなと。エビングハウスの忘却曲線に基づき、復習するタイミングを管理する学習記録アプリです。 アプリの作成 RubyMin…

Laravel側 プロジェクトの作成 laravel new ${プロジェクト名} laravel new synapse_laravel バージョンを指定する場合 $ composer create-project ”laravel/laravel=6.＊” synapse_laravel サーバーを起動 cd synapse_laravel php artisan serve API作成 ro…

毎週月曜日に「リーダブルコード」の輪読会を行っています。 今回は3章を終えた感想や備備忘録を書きます。 3章は、名前が「他の意味と間違えられることはないだろうか？」というテーマです。 誤解されない名前 英語がネイティブでない自分にとって、英語の…

Vue.jsを使用 画像を描画 画像上に座標を指定してブロック枠を描画 コード <template> <div> <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight" /> </div> </template> <script> export default { data() { return { canvasWidth: 400, canvasHeight: 800 } }, computed: { // 画像のURLを取得しています imageUrl(…

$ composer global require laravel/installer とするとこんなエラーが出ました。 Problem 1 - laravel/installer v3.0.1 requires ext-zip * -> the requested PHP extension zip is missing from your system. - laravel/installer v3.0.0 requires ext-zi…

$ chmod a+x /usr/local/bin/composer chmodとはLinaxコマンドの一つ。 change modeという意味。パーミッションを設定する。 aがすべての権限。 xが実行権限。 a+xはすべてのユーザに実行権限を与える。 これで、いつでもcomposerを呼び出すことができる。

<%= link_to blogs_path, remote: true, onClick: "deleteNewMarker();" do %> <%= fa_icon 'chevron-left' %> <% end %> <%= form_with(model: blog) do |form| %> <div class="field"> <%= form.text_area :content, class: 'form-control', id: 'text', placeholder: t(%q[Wh</div>…

<% if notice %> <div class="alert alert-info role="alert"> <%= notice %><button type="button" class="close" data-dismiss="alert">&times;</button> </div> <% end %> <% if alert %> <div class="alert alert-danger" role="alert"> <%= alert %><button type="button" class="close" data-dismiss="alert">&times;…</button></div>

ログイン時などのリダイレクト先の変更方法。 def after_sign_up_path_for(resource) # (リダイレクト先) end def after_update_path_for(resource) # (リダイレクト先) end def after_sign_out_path_for(resource_or_scope) # (リダイレクト先) end def aft…

twitterのように、投稿全体が詳細へのリンクとなっていてその中にユーザー詳細へのリンクがある、というやり方。 何も考えずに書くと投稿詳細への<a> タグが意図しないところで閉じられてしまう。 まず、詳細へのリンクをCSSでdisplay: block;とすると、親要素</a>…

maa0917.hatenablog.com 以前の続きです。 (views/users/show.html.erb) <%= render partial: 'users/follow_form', locals: { user: @user } %> $ rails g controller Relationships create destroy (routes.rb) resources :relationships, only: [:create,…

$ rails g model likes user_id:integer blog_id:integer class CreateLikes < ActiveRecord::Migration[5.2] def change create_table :likes do |t| t.references :user, foreign_key: true t.references :blog, foreign_key: true t.timestamps end end e…

CarrierWave+MiniMagickを使っています。 アップロードされなかった場合、ユーザーアイコンにデフォルト画像を設定します。 バージョン情報 rails 5.2.3 ruby 2.6.3 uploaderの設定 アップローダのコメントアウトを外す。 (app/uploaders/icon_uploader.rb) …

例えばアップロードした画像を表示する際にデザインを適応させたい。 しかし、なにかしらの原因でclassやidを指定できないときに、 属性セレクタを使うとうまくいきました。 srcに"/uploads/user/icon/" を含む<img> を丸くしたい場合、 img[src*="/uploads/user/…

CarrierWave + MiniMagickでユーザーアイコンを作ります。 バージョン情報 rails 5.2.3 ruby 2.6.3 ユーザーアイコンを作る 元画像を切り抜く width 100px, height 100pxで切り抜き、第三引数で切り抜きを行う際の中心点を指定します。 (app/uploaders/icon …

色んな場所からdestroyしたときに、redirect先をbackにしたい。 (app/controllers/blogs_controller.rb) def destroy @blog.destroy redirect_back(fallback_location: root_path) end とすると、back 、エラーのときはroot_pathに飛ぶ

NVMのインストール curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 再読み込み source .bashrc $ nvm --version node.jsのインストール $nvm ls-remote nvm install (バージョン) node -v $ npm -v curl -o- -L http…

newアクションを叩きつつ、jsをリクエストします。 <%= link_to 'New Blog', new_blog_path, remote:true %> (app/views/blogs/new.js.erb) $('#blogs_area').html("<%= j(render partial: 'blogs/new', locals: {blog: @blog}) %>") app/views/blogs/new.ht…

Rails new $ rails _5.2.3_ new mapblog -d postgresql --skip-bundle 必要なGemのインストール (Gemfile) group :development, :test do gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem 'rspec-rails' gem 'factory_bot_rails' gem 'pry-rails' …

pwdコマンドと環境変数PWD $ pwd pwdコマンド 現在の作業ディレクトリパスを絶対パスで表示 $ echo $PWD または $ echo ${PWD} 環境変数PWDをechoしている 環境変数は大文字、小文字を区別する setコマンド $ set BASH=/bin/bash BASH_ARGC=() BASH_ARGV=() …

jQueryの準備 $ yarn add jquery (app/assets/javascript/application.js) //= require jquery/dist/jquery.js //= require_tree . ENVファイルの設定、APIキーの設定 (Gemfile) gem 'dotenv-rails' bundle $ touch .env (.gitignore) （追加） .env (.env) …

コメント機能の要件 入力フォームに入力した内容で画面が書き換わること。 画面が変更されないこと。 更新時にURLが変更されないこと。 モデル (routes.rb) Rails.application.routes.draw do resources :blogs do resources :comments end end $ rails g mo…

テーブル設計 $ rails g model relationship follower_id:integer followed_id:integer マイグレーションファイルを修正 class CreateRelationships < ActiveRecord::Migration[5.2] def change create_table :relationships do |t| t.integer :follower_id …

いいね！機能とは いいね！とおもったblogをストックすることができる だれがいいね！したかを見ることができる どれくらいの人がいいね！したかを見ることができる いいね！機能の要件 blogのindex、showページにいいね！ボタンを設置する blogをいいね！し…

system specでE2Eテストを実施実施します。 いわゆる統合テストです。 必要なgemをインストール まずは必要なgemをインストールします。 chromedriver-helperは2019年3月31日にサポートが終了したみたいなので、代わりにWebdriverを使用します。 (Gemfile) g…

後付でNOT NULL制約をつける 今回の場合、すでにtitleカラムとcontentはすでにあるので、後付でNOT NULL制約をかけます。 まずはマイグレーションファイルを作ります。 $ rails g migration ChangeColumnToBlog オプションでnullをfalseにします。 またrollb…

Blogモデルのテストを実装していきます。 $ rails g rspec:model blog Factory Botの導入 サンプルデータを生成するために今回はFactory Botを使用します。 (Gemlfile) group :development, :test do # （省略） gem 'factory_bot_rails' end $ bundle congi…

自動生成の設定をしましたがblogモデル、userモデルはすでに作成されているので、テストファイルを新しく作成します。 まずはuserモデルを作成します。 $ rails g rspec:model user まずはアウトラインを記載していきます。 (spec/models/user_spec.rb) requ…

テストはRSpecを使って、ModelSpecとSystemSpecでよいかなあと思います。 ModelSpecはモデルクラス単体のテストでメソッドやバリデーションの挙動をテストします。 SystemSpecとは統合テストと呼ばれるテストで、実際にブラウザを起動して画面上で挙動をテス…