プログラミングメモまとめ

一つの記事では書かないような、小さめのメモリスト

Rails

バリデーション

パーシャル化して使い回す

app/views/layouts/_error_messages.html.erb
<% if key.errors.any? %>
  <% key.errors.full_messages.each do |msg| %>
    <ul>
      <li><%= msg %></li>
    </ul>
  <% end %>
<% end %>
app/views/posts/_form.html.erb
<%= render "layouts/error_message", { key: @posts } %>

optional: true

belongs_toの外部キーのnilを許可する(nilでもDBに保存出来る)

ページネーション(kaminari)

Gemfile
gem 'kaminari'
app/views/posts/index.html.erb
<%= paginate @posts %>
app/controllers/posts_controller.rb
@posts = Post.all.page(params[:page]).per(6)
config/locales/ja.yml
ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "..."

検索、ソート(ransack)

sort_linkにclassやidを付ける

引数を意識

app/views/posts/index.html.erb
<%= sort_link(@search, :created_at, "作成順", { default_order: :desc }, { class: "sort-bar__link" } ) %>

jQuery

gem toastrのようなトースト(フラッシュメッセージ)を自作する

controllerで渡ってきた値をkeyvalueで取り出す。

keyによってcssで見た目を変える。valueが表示される文字。

app/views/layouts/application.html.erb
<% flash.each do |key, value| %>
  <%= content_tag(:div, value, class: "flash-#{key}", id: "flash") %>
<% end %>

見た目の部分。

ざっくり作ったので近いうちに修正予定。

app/assets/stylesheets/common.scss
.flash {
  position: absolute;
  z-index: 999;
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 5rem;
  border-radius: 4px;
  color: #f7f6f5;
  font-size: 1.8rem;
  cursor: pointer;
  &-notice {
    @extend .flash;
    background: rgba(136, 203, 127, .8);
    box-shadow: 2px 2px 4px #316745;
  }
  &-alert {
    @extend .flash;
    background: rgba(233, 84, 100, .8);
    box-shadow: 2px 2px 4px #b7282e;
  }
}

出てきたフラッシュメッセージが自動で消えるように&クリックしたら消せるようにする処理。

数値が低ければ短く、高ければ長くなる。

app/assets/javascripts/main.js
$(function(){
  setTimeout("$('#flash').fadeOut('slow')", 4000);
  $('#flash').on('click', function() {
    $('#flash').fadeOut(600);
  });
});

formのinput同時入力する

:user_name(ユーザー名) と :display_name(表示名) があった場合。

ユーザー登録時にはユーザー名のみを求めるが、表示名にもユーザー名と同じ値を入れておきたい時に使った。

※因みにこういう場合だと、『controllerでcreateアクションが走った時に代入する』みたいにやったほうが良いと思う。

app/views/devise/registrations/new.html.erb
<%= f.hidden_field :display_name, id: "inputDisplayname" %>
<%= f.text_field :user_name, placeholder: "ユーザー名", id: "inputUsername" %>
app/assets/javascripts/main.js
$(function() {
  $('#inputUsername').on('keyup change', function () {
      $('#inputDisplayname').val($(this).val());
  });
});

React

環境構築

気になるReactをキャッチアップ!Macで手軽に開発環境をつくろう! - Qiita
(の7日目は、株式会社エ...
【Mac】fish + nodebrewでNode.jsをインストールする
nodebrewとは、Node.jsのバージョン管理に使用されるツールです。今回はfishでこのnodebrewをfishでインストールして使用するための設定方法を紹介します。nodebrewのインストールnodebrewのインストールには
タイトルとURLをコピーしました