不定期！弊社のslackで話題になった技術tips集！😘 Vol.6

説明しよう！tips集とは！？

弊社のslackチャンネルには、各々が感じた、技術的なtipsを誰に向けるわけでもなく放り投げるチャンネルがあります！

↑こんな感じです。

この記事は既出であろうがなかろうが、tipsをひたすらまとめていく記事である！！

内容にまとまりがないのはご愛嬌です！弊社の仕事の様子の鱗片が少しでも感じられれば幸いです

次回： Vol.7
前回： Vol.5

Ruby & Ruby on Rails編

ENVの操作

ENVで得たオブジェクトは frozen? で true を返す

lines = ENV['LINES']
lines.frozen?
# => true

ENV は Hash と似た操作ができるだけで、 Hash とは異なる
たとえば ENV[0] はエラーになる（ :[] の引数を to_str で変換しようとするため）

Array#flatten

Array#flatten は引数で平坦化する階層数を指定できる

strftime

strftime('%Y-%m-%d %H:%M:%S')
strftime('%F %T')

いっしょ

mongo

mongoでnum以下を取りたい時

Model.where(column: { "$lte": num })

Model.where(:column.lte => num)

局所的なモンキーパッチ

refine と using で局所的なモンキーパッチができる

instance method Module#refine

カラムをまとめて消したい

remove_columns :table_name, :column_1, :column_2 [, ...]

update → update_attribute

article.update(hoge: "ピヨ")
article.update_attribute(:hoge, "ピヨ")

updateからupdate_attributeに変更した時、なぜか失敗してなんだろと思ったらパラメータの書き方がちょっと違うんですね..

rubyは定数はメソッドの中で定義できない

class C
  def foo
    CONST = 'aaa'
  end
end
# ~> -:3: dynamic constant assignment
# ~>     CONST = 'aaa'

link_toの:back指定

[Rails] link_to, link_to_function での「戻る」リンク

突然のcap aborted!

$ bundle exec cap deploy staging

cap aborted!
Capfile locked at ~> 3.10.2, but 3.11.0 is loaded

が出たらconfig/deploy.rb の lock のバージョンを確認する。Gemfile.lock のバージョンではない。

fields_for

fields_for で作ったフォームはmodel に記載する accepts_nested_attributes_for に allow_destroy: true オプションを付けてやることで_destroy のパラメータを渡せばレコードを削除してくれる

Rails fields_for のドキュメントを和訳しました。 - Qiita

html_safeされた変数をhtml_escapeしたい時

hoge = "<hoge>".html_safe
=> "<hoge>"
hoge.class
=> ActiveSupport::SafeBuffer
"#{hoge}".class
=> String

tryを使う時、ご注意してください

tryを使うと、method_missingを呼ばないから、以下のコードをうまくうごかなかった。

[50] pry(main)> site.pages.class
=> Mongoid::Relations::Targets::Enumerable
[51] pry(main)> site.pages.desc(:name)
=> #<Mongoid::Criteria
  selector: {"site_id"=>BSON::ObjectId('59e5b615014c8e295f00001a')}
  options:  {:sort=>{"name"=>-1}}
  class:    Page
  embedded: false>
#expected

[52] pry(main)> site.pages.try(:desc, :name)
=> nil
# not expected
[53] pry(main)>site.pages.send(:desc, :name)
#OK

RailsにWebpackerを導入したら....

Rails で JS を Webpacker 管理にしたら、 data-confirm が動かなくなった - Qiita

attribute更新方法のまとめ

ActiveRecord の attribute 更新方法まとめ - Qiita

attribute更新方法のまとめ　結構参照すること多い..

結構量多くて覚えられないですよね...

jsからrailsのroutesを参照する

railsware/js-routes - Github

javascript上でrailsのroute pathを扱いたい場合に、全部エクスポートしてくれるので便利マン。

簡単にトグル

switch = %w(on off).cycle
switch.next

HTML&ブラウザ編

sessionとcookieとweb storageの違いおさらい！

sessionとcookieとWeb Storageの違い - Qiita

PWAでBasic認証するときの注意

PWAでおなじみのmanifest.jsonはBasic認証を通過できないため、WebサーバでBasic認証の設定をしている場合は設定を変更する必要があります。

nginx + railsの場合

  location /manifest.json {
    satisfy any;
    allow all;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $http_host;
    proxy_set_header X-FORWARDED_PROTO https;
    proxy_pass http://unicorn;
  }

Javascript編（nodeなども含む！）

前後の空白を抹殺

.trim()

配列の完全一致検索

inArray

正規表現に変数を入れたい場合

var check = "hoge";
reg = new RegExp(check);
piyo.match(reg);

とかでちゃんと変数の中身が展開された後に正規表現の式が展開される

→スレッド返信: 特殊な例だけどテンプレートリテラルをマッチさせるような正規表現の場合はエスケープしないとだめ。

var check = "${hoge}";
reg = new RegExp(check);
'${hoge}piyo'.match(reg);
//=> だめ

var check = "\\${hoge}";
reg = new RegExp(check);
'${hoge}piyo'.match(reg);
//=> OK

coffeeの書き方

$('input[name="num_shared"]').val()

をcoffee script風に書くと

do $('input[name="num_shared"]').val

CoffeeScriptで引数を必要としない関数の実行にdoが使える

CoffeeScriptで引数を必要としない関数の実行にdoが使えることを今さら知ったのでメモ - Qiita

でも引数が一個もない場合、関数を実行したいのか参照したいのか、CoffeeScriptはわかんないから、括弧の使用不使用の判断は注意しないといけないね。

ほえ

classをトグル

$(hoge).toggleClass('className');

対象の要素に指定したclass名が無ければ追加、あれば削除

coffeeで三項演算子

result = target != null ? true : false
↓
result = if target != null then true else false

としないとだめ

→スレッド返信: バッククオートで囲めば普通のJSでいける

`target != null ? true : false`

console.logの不思議

console.logの第一引数に %s とか %d とかを指定して、第二引数に指定した型の値を入れると合体して出力してくれる。と思いきや、なぜかNumberは文字列として認識してくれる。バグじゃねこれｗ

console.log("Hello %s", 'world')
=> Hello world
console.log('Hello %s', 100)
=> Hello 100
console.log('Hello %d', 100)
=> Hello 100
console.log('Hello %d', '100')
=> Hello NaN

jQueryのバージョン違いにおけるajaxのあれこれ

jQuery1.8から、ajaxの処理をかく時は

success() -> done()
error() -> fail()
complete() -> always()

のように変更となった。

さらにjQuery3からはPromiseの標準規格に準拠するようになり、

done() -> then()
fail() -> catch()
always() -> catch()以降に記述すれば良い

というように変更になった。

ブラウザロケールがトルコだと動かない！

jsで小文字化/大文字化を判断する時に.toLowerCase()/.toUpperCase();使うことが多いが、実はjsはブラウザ依存なのでブラウザロケールがトルコだと、動かない。

toLowerCase()じゃなくてtoLocaleLowerCase()を使おう！

JavaScriptの文字列を全部小文字/大文字化する - Qiita

と、特殊すぎる...！

CSS（style）編

場合によっちゃこれだけで上下左右中央揃えできる。

height: 100vh; がミソ。

section {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

なみに position: absolute; と合わせて使いたいときは、 width: 100vw; も一緒に書くと中央に配置できる。これはモーダルを表示するときとかに便利かも。いちいちJSでviewportのheightを取得してー…とかやる必要なくなる。

サイトの表示速度を意識する

＜CSS＞サイトの表示速度を意識したセレクタの書き方 - Qiita

ユニバーサルセレクタが案外解釈速い。これ良記事だなぁ。

読みやすさ重視でやってたことが速度低下につながっていたと気づくいい記事...直していかないと！

scroll-behavior

display: flex で孫要素の高さを揃えるとき

子にも display: flex をつける

データベース編

mysql tipes

show create table table_name

なんて初めてうった。外部キー制約の情報がみたくて

Linux & AWS編

EIPについて

インスタンスが紐付いていなくてもネットワークインターフェイス IDが空欄では無い場合はNLB (Network Load Balancer)で利用している可能性があるので注意

awsコマンド tips

aws ecr get-login --region ap-northeast-1

実行後に出てきたあとのdocker loginコマンドで -e none オプションが出てくるが、これがあると返ってログインできないので消して上げる必要がある

aws-lambda

S3とlambdaを紐づけた状態で関数を消してもバグなのか、S3上では消えた関数に対して紐付いた状態になっているので、新たに関数を作って前回と同じ条件でS3と結びつけることができない。

そのため、S3側で紐付けを消してやる必要がある。バケット→プロパティ→Eventsで確認できる。

neovim tips

let g:loaded_python3_provider=1
すると :echo has("python3") が無条件で 0 になるっぽい

curlでメソッド指定

curl -X PATCH http://hogehoge

-X をつけるとメソッドを指定してリクエストできる

curlのよく使うオプションまとめ

Git & Github編

マージコミット込みでリベースしたい

-p をつける

$ git rebase -i -p SHA

gitでマージコミットが含まれるブランチをrebaseする

ブランチ間のdiff確認

git diff ブランチ１ブランチ２

カレントブランチとの差分を確認する場合は↓

git diff HEAD 比較したいブランチ名

リモートブランチの削除

git push --delete origin branch_name

Mac便利にする編

身の回りのwifiをもっと詳しく覗く

alt押しながらwifiボタン押すとなんかいろいろ情報が出る。

そこの情報からワイヤレス診断→ウィンドウ→スキャンで周囲の電波がわかります

airportコマンド

謎に深い位置にネットワーク周りの情報を取得するコマンドが存在する。

$ sudo /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport

これを使えばネットワークの情報や、チャンネルを変更して接続できたりする。

ツール編

CircleCI tips

コミット単位でスキップしたいときは [ci skip] という文字列を含める

要素の検証テクニック

マウスオーバーした状態でスクショとか取りたい場合は検証ツールでhover状態を維持するようにすれば簡単️

やり方は二通り

要素を右クリック > Force state > :hover
Stylesタブの右上にある:hov > :hoverにcheck

速度を測る神サイト

Yellow Lab Tools

Webサイトの健康診断ができる！

考え方編

エディトリアルデザイナー

エディトリアルデザインって何？｜仕事百科

という分野がある。

小ネタ

slackのユーザー一覧取得

$ curl https://slack.com/api/users.list\?token\=[token]\&pretty\=1 | jq '.members[] | { name: .name, icon: .profile.image_192} '

# ↑で出力したURLから全部ダウンロードする場合↓

$ curl https://slack.com/api/users.list\?token\=[token]\&pretty\=1 | jq -r '.members[].profile.image_192 ' | while read i; do; wget $i; done

トークンはここから取れる。レガシーだけど。
api.slack.com Legacy tokens

Slackでスレッドに画像を貼る方法

【必見】Slackでスレッドに画像を貼る方法 - Qiita

neovim