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

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

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

↑こんな感じです。

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

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

次回： Vol.10
前回： Vol.8

Ruby編

更新がある gem を調べる

bundle outdated で更新がある gem がわかる

bundlerのoutdatedコマンドを使ってGemfileの古いライブラリをチェックしましょう - Sider Blog

gem server

gem server を実行すれば、インストール済みのgem一覧をブラウザで確認することができる

rubyのバージョン違いによるエラー

Style/NumericPredicate: Use `result.length.positive?` instead of `result.length > 0`.

って怒られたので、なんだこれ？
って思ったら

Ruby 2.3では数値が0より大きいか、0未満かを判断して true/false を返す Numeric#positive? と Numeric#negative? が追加されました。

by サンプルコードでわかる！Ruby 2.3の主な新機能 - Qiita

らしい

OpenSSL::Cipher で作った暗号化文字は utf8じゃない

なのでそのままだと DBに保存できない。

How to encrypt data in a UTF-8 string using OpenSSL::Cipher? - stackoverflow

# The solution is to convert the ASCII-8BIT string to Base64 and then encode to UTF-8.

cipher = OpenSSL::Cipher.new 'aes-256-cbc'
cipher.encrypt
cipher.key = cipher.random_key
cipher.iv = cipher.random_iv

encrypted = cipher.update 'most secret data in the world'
encrypted << cipher.final

encoded = Base64.encode64(encrypted).encode('utf-8')
Once persisted and retrieved from the database,

decoded = Base64.decode64 encoded.encode('ascii-8bit')

こんな感じでencode。

[15] pry(main)> key = Encryption.new(cookie_salt: "test", salt: "hoge")
=> #<Encryption:0x00005609d6f97d20 @cookie_salt="test", @user_salt="hoge">
[16] pry(main)> test = key.execute "himitu"
=> "\xD8\x1F\xB0\x9A\xCD\xB2\xCD\xCE\xFC\x86\xD7\x7F\x15\xB4S8"
[17] pry(main)> key.restore test
=> "himitu"

ruby で hash の key が String でも Symbol でも同じように取り出す

with_indifferent_access を使うべし。

Hash から文字列でもシンボルでも値を取り出す - Qiita

Rubocop の TargetRubyVersion について

Rubocop の TargetRubyVersion はデフォルトで

.ruby-version
Gemfile
Gemfile.lock

を見る。

TargetRailsVersion はデフォルトで

Gemfile
Gemfile.lock

を参照する

rubocop-hq/rubocop - Github

collectで要素の数だけブロック実行

collect, collect! (Array) - Rubyリファレンス

レス：　map の別名なんですね。

Gemfileに書くrequire: falseの意味

Gemfileに書かれるrequire => false とはどういう意味でしょうか？｜teratail

valid_encoding?

文字列が持っている文字コード情報を元にバイト列を調べ、その文字コードのバイト列として正しい場合はtrue、不正な場合はfalseを返す。

valid_encoding? (String) - Rubyリファレンス

Ruby on Rails編

hoge_path の hoge を動的にしたい場合、

url_for(hoge) にすると幸せになれそう

form_forとform_tagのform_withへの統合

もう form_with だけ使う

form_forとform_tagのform_withへの統合 - Ruby on Rails 5.1リリースノート

assets precompileの不思議

assets precompile は jpeg を jpg に勝手に変えちゃう。

view で jpeg って書いてたら気をつけよう。

【Rails】assets:precompileでjpegの拡張子が勝手に変わってどハマりした話 - naichi's lab

TimeとTime.zoneの不思議

Time.parse('hoge')
# => ArgumentError

Time.zone.parse('hoge')
# => nil

みんな has_many through の逆も知りたいはず

【Rails】has_many, throughの逆の関連はdelegate, toかhas_one, through - Hack Your Design!

HTML（slimなども含む）&ブラウザ編

html5 の id 属性は空白文字以外なんでもいい

HTML における id 属性のまとめ 4.x~ と 5.x~ の違い

Javascript編（node、vueなども含む！）

vueのscoped cssを無視したいとき

なにかやむを得ず

<template>
  <div id="piyo">
  </div>
</template>

<script>
〜〜〜中略〜〜〜
document.getElementById('piyo').innerHTML = "<p class='huga'>hoge</p>";
〜〜〜中略〜〜〜
</script>

をvueで実行した場合。styleをscopedにしていると

<style lang="stylus" scoped>
#piyo
  .huga
    color: red
</style>

と記載するとスタイルが当たらない。data-vの属性を持たないからだ。その場合。

<style lang="stylus" scoped>
#piyo
  >>> .huga
    color: red
</style>

と記載することで、「>>>」以降は属性値を無視するcssを生成するのでcssが当たるようになる。

“data-v-” attributes for scoped CSS | stack over flow

16進数のカラーコードからrgbの色を抜き出す

red = parseInt(colorCode.substring(1,3), 16)
green = parseInt(colorCode.substring(3,5), 16)
blue  = parseInt(colorCode.substring(5,7), 16)

画面が遷移して一瞬しかログを確認できない

クリック時に console.log を設定したけど、すぐに画面が遷移して一瞬しかログを確認できない。。
というお悩みをおもちのあなた、 Preserve log を有効にして幸せになりましょう。

CSS（style）編

CSSの作業グループの進捗状況が見れるページ

なんかCSSってHTMLを装飾するだけってイメージだけど、裏ではいろんな仕様策定が進んでるようです。すげーな…。

CSS current work & how to participate | w3.org

ampでfont-awesome使う方法

AMPで「Font Awesome」と「Google Fonts」を使う方法

カスタムフォントの追加 – AMP

疑似要素に動きをつけるとき

これはだめ

a::before {
 &:hover {
 }
}

これなら効く

a:hover {
 &::before {
 }
}

stylelintがらみのややこしいライブラリたち

stylelint: stylelint本体
styled-components: reactでコンポーネント単位でcssを使えるようにするライブラリ
stylelint-config-standard: stylelintの基本ルール
stylelint-webpack-plugin: stylelintをwebpackで使うためのプラグイン
stylelint-processor-styled-components: stylelintをstyled-componentsで使うためのライブラリ
stylelint-config-styled-components: styled-components内で実行されるstylelintの基本ルール
stylelint-custom-processor-loader: webpackでcustom processorを読み込むためのライブラリ

Go編

goで作ったサーバーを443ポートを開いて待ち構える時

普通に実行するとパーミッションエラーになる。というか1024以下のポートだとなるみたい、wellknown的なポートだかららしい。

バイナリにcapを付与すると解消できる

sudo setcap 'cap_net_bind_service=+ep' /var/www/sentence_checker/bin/server

バイナリを書き換えると外れてしまうみたいなので、変更したあとは毎回実行しないといけない。

shell & Linux編

Linux システムメトリック

mackerelのシステムメトリックの指標について分かりやすく説明している記事がありました。これは勉強になる。

Mackerel でみる Linux システムメトリック項目の見方・考え方 - えいのうにっき

文中の「スワップさせてしまったら負け・おしまい」という考え方が主流です。」とは

レス：

処理速度はメモリ>>(HDD,SSD)だから、スワップだと遅くなっちゃうよということだと思ってます。

スワップは仮想的なメモリの役割をHDDやSSDにさせる機能なので〜

「負け・おしまい」という認識はなかったのですが、あまり多いとダメなのかな〜程度で考えてました(´・ω・｀)

以下の記事をどうぞ!

仮想メモリとスワップについて

ちなみに速度の表はこちらです
プログラマが知っておくべき、メモリ/ディスク/ネットワークの速度まとめ - Qiita

ShellScript の無名関数には直後に引数が書ける

() { echo $1 } hey
# => hey

alias greet='() { echo $1 $2 } hey'

greet hi
# => hey hi

パイプでコマンド実行をしたときは途中のコマンドで失敗しても、最後の結果の終了コードが返る

command1 | command2 | command3
echo $?

pipefailで実行すると、途中のコマンドの実行で失敗した場合はエラーの終了コードが返る

set -o pipefail
command1 | command2 | command3
echo $?

CircleCIはデフォルトでpipefailでコマンドが実行される

AWS & GCP & Heroku編

EC2 tipes

インスタンスのCPU性能をECUという単位で表します。

GAE はメール受信トリガーが使える。便利。

GAE/Goでメールを受信する - Qiita

GAEでstaticファイルを置くとき

GAEでstaticファイルを置くときは、 app,yaml ファイルがあるディレクトリか、そのディレクトリ以下に置く必要がある

Docker編

どっかのコンテナで死んでたときに log みる方法

docker-compose logs container_name

レス: docer-compose logs -f で tail -f hoge.log と同じです

Git & GitHub編

Git diffで新規作成したファイル情報を表示させる

別のブランチの特定のファイルを標準出力する

git show branch_name:/path/to/file

| vim - を後ろにつければvimでも開ける。

git stashのあれこれ

git stash に名前をつけるときは

git stash save ほげ

git stash save -u ほげ で untrack 含めてくれる。

git stash drop で最新のstashを削除。

git stash clear ですべてのstashを削除。

Githubの Branch protection rule を導入したんだけどいい感じ

二人以上 approve しないとマージできない。
require status check つけると、テスト通るまでマージできなくなる

とかとか設定できて便利。

branch 名はマルチバイト対応してる

git branch -m 'ほげ'
git branch -m '🍣'

ツール紹介編

ssl証明書の発行履歴が見れるサイトがある

lets encryptで証明書発行を何回失敗したかとかを確認するのにいいらしい

crt.sh | Certificate Search

slackと連携できるタスク管理ツール。

メッセージをそのままタスクにできるのでなかなか便利。

workast

yard の型のパーサ

YARD - A Ruby Documentation Tool

ロゴジェネレータ

Hatchful | Your digital logo designer

考え方&仕組み編

base64 の PNG と JPEG

data:image/png;
data:image/jpeg;

を入れ替えても正しく描画される。ドラッグ・アンド・ドロップでダウンロードしようとすると入れ替える前の拡張子、右クリックからダウンロードしようとすると入れ替えた後の拡張子が付けられる

これ面白かったので共有しときます
base64ってなんぞ？？理解のために実装してみた - Qiita

i18n の正式名称

i18n って internationalization の略でその間が18文字あるからなんですね… 今知った@@;
k8s 的な

unicodeプロパティで漢字の範囲だけを示すHanというのがある

[連載:正規表現] Unicode文字プロパティについて(1)

編集後記

どうもどうも！半月分をざっくりまとめるのがちょうどいいことに気づき始めた私です！

独断と偏見でtipsっぽいやつを絞って記載してます！少しでもみんなの参考になれば...いいですね！

さて、今回は2018/08/15 ~ 2018/08/31で放出されたtipsをまとめてみました。こんな感じで弊社の開発部はわいわいがやがややっておりますぞい！

雑談こーなー

最近、弊社の エンジニアブログを盛り上げよう！ という動きが有りまして、いろいろな記事がぽんぽん投稿されるようになりました。最高ですね。

おかげで１ページ目はすべて僕の記事という計画は頓挫してしまいました。残念。

話は急に変わりますが、このエンジニアブログは弊社エンジニアが集まってRailsで作っています。

詳しくは：楽しい開発部で、楽しくエンジニアブログを作った

記事まで自分たちで作っているという、 100%弊社エンジニア産で国産というとってもオーガニックなサイト になっています。しかも、欲しい機能とかは自分たちで作るDIYなサイトです。

こんなDIY感あるサイトを作っているんだから、もちろん作業終わりにはお酒は欠かせない。

そんな弊社エンジニアだからこそ、お酒選びにも妥協は無い。

ビール？ まぁ、一発目だし、いいでしょう。でもこれまでの戦いを振り返ってねぎらうのに長々と飲むにはちょっと向いてないし、すぐお腹いっぱいになっちゃう。

チューハイ？ 甘くて美味しいが、これも長く飲むには味がきつすぎる。

ハイボール、ワイン？ 成る程、どれも奥深くいいものだ。しかしウィスキーもワインも雰囲気を作ってしっぽりと楽しむものだ。話に花を咲かせるには役割が違うだろう。

日本酒 成る程。ゆっくり飲むもよし、クイッと飲み込むもよし。味にバリエーションも有り、何よりエンジニアみんなが好きな寿司との相性もすごくいい。奥深いところも エンジニアの知的センスにバッチリ噛み合う。

エンジニアにとって、日本酒ほど相性のいい飲み物はない！！

...賛否両論あると思いますが、ひとまずこの話はこれで終わりです。みんな日本酒飲もうぜ！

ちなみに、エンジニアは自縄自縛が好きという説があるのですが、この企画が続けば、また次の機会に雑談として載せますね。

それでは、また！

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