FujjimaBlog

rbenvによるバージョン切り替えの際の備忘録

2020/12/31 11:25

<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>からforkしてきたプロジェクトの<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョン関連で問題が生じたので、経過とともにメモする。 <h4>経過&メモ</h4> <ul> <li>forkしてきたプロジェクトの<code>.ruby-version</code>に書かれている<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョンを確認</li> <li><code>rbenv install x.x.x</code>で該当の<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョンを指定してインストール</li> <li>念の為<code>rbenv rehash</code>実行</li> </ul> ここで、<code>rbenv rehash</code>をする意味を再度確認した <blockquote>「~/.rbenv/versions/2.x.y/bin/ 以下に置いてあるコマンド群を ~/.rbenv/shims/以下に置いて使えるようにする」</blockquote> <a href="http://dqn.sakusakutto.jp/2014/02/rbenv_rehash_what_it_does.html">rbenv rehashは何をやっているのか？ · DQNEO日記</a> <ul> <li><code>bundle install</code>実行しようとしたら下記のエラーが表示されて出来ない</li> </ul> <pre class="code" data-lang="" data-unlink>Warning: the running version of Bundler (1.17.2) is older than the version that created the lockfile (1.17.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`. Your Ruby version is 2.6.3, but your Gemfile specified 2.6.5</pre> bundlerのバージョンが古いと言う警告と、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョンが<code>.ruby-version</code>に書かれているものよりも古いというエラー。 <ul> <li>とりあえず、どこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>が呼ばれているか<code>which ruby</code>で確認 <ul> <li><code>/usr/bin/ruby</code>の方が呼ばれており、rbenvでインストールした<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>が呼ばれていないことを確認した <ul> <li>rbenvの方の<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>を呼び出したいので、下記の流れでpathを参照できるようにする</li> </ul> </li> </ul> </li> </ul> <pre class="code shell" data-lang="shell" data-unlink> ~$ vim ~/.bash_profile // .bash_profileが開かれるので、下記一行を追加して保存する export PATH="$HOME/.rbenv/shims:$PATH" // 変更を反映させる ~$ source ~/.bash_profile </pre> <ul> <li>これで<code>bundle install</code>したところ正常にインストールできた</li> </ul> <h4>振り返り</h4> 前職に勤めていた時には、会社用のレポジトリは基本的に会社のPC上で触っていて、個人で何かする時には個人のPCでやっていたため<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョン切り替えをあまりやっていなかった。今回、久方ぶりにforkしてきた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を動かす、ということをしたので<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョン切り替え周りで少し手間取ってしまった。 rbenv、bundlerあたりはこういったケースをきちんとメモしておいてその都度理解を深めるのがいいかなと感じる。実装周りが落ち着けば一度きちんと見たい。

setStateで古いstateを見てしまった

2020/12/28 17:41

基本的なところだけど、少し悩んでしまったのでメモ。 アプリのタイマー機能を実装しようとした際、setIntervalを使用しても時間が加算されない問題が発生した。原因としては、setStateにオブジェクトを渡した場合、stateを即座にアップデートすることを保証しないというもの。 <a href="https://ja.reactjs.org/docs/faq-state.html#how-do-i-update-state-with-values-that-depend-on-the-current-state">コンポーネントの state – React</a> 今回のような、setIntervalでsetStateが呼ばれるなど参照したいstateが絶えず更新されているものである場合、「setStateに更新用の関数を渡し、その関数内の引数で最新のstateにアクセスして操作する」のが正しい実装内容となる。 <h4>駄目な例</h4> 下記の例だと、<code>setState</code>にtimeに1を足した値を引数として渡しているが、この時にtimeが参照しているのは更新前のtimeである。つまり、0秒から時間の加算が始まったとして、 <pre class="code lang-javascript" data-lang="javascript" data-unlink> // timeは親のコンポーネントからもらってくる数値 const [time, setTime] = useState(props.time || null); useEffect(() => { const { taskId, recordingTaskId } = props; if (taskId && taskId === recordingTaskId) { // setIntervalで時間加算の関数(addSecond)を1秒毎に実行させる setTimerId(setInterval(addSecond, 1000)); } else return; }, [props.recordingTaskId]); const addSecond = () => { // ここでsetStateに「time + 1」という値を渡してしまっているため、常に古いstateを見てしまっている setTime(time + 1); }; </pre> <h4>良い例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // timeは親のコンポーネントからもらってくる数値 const [time, setTime] = useState(props.time || null); useEffect(() => { const { taskId, recordingTaskId } = props; if (taskId && taskId === recordingTaskId) { // setIntervalで時間加算の関数(addSecond)を1秒毎に実行させる setTimerId(setInterval(addSecond, 1000)); } else return; }, [props.recordingTaskId]); const addSecond = () => { // 更新関数を渡しているため、この中のtは最新のstateが入っていることが保証されている setTime(t => t + 1); }; </pre>

親から子コンポーネントのstateにcreateRefを使ってアクセスする

2020/12/02 10:54

表題の通りだけど、個人的におすすめしない。 refでDOM要素にも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>にも自由にアクセスできるようにはなるが、せっかくpropsで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>間のやり取りができるようになっているので、あまりそれを崩したくない。ちなみに、reactのリファレンスにはrefを使うのに適したケースとして以下が挙げられている。 <ul> <li>フォーカス、テキストの選択およびメディアの再生の管理</li> <li>アニメーションの発火</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A1%BC%A5%C9%A5%D1%A1%BC%A5%C6%A5%A3">サードパーティ</a>の DOM ライブラリとの統合</li> </ul> <a href="https://ja.reactjs.org/docs/refs-and-the-dom.html">Ref と DOM – React</a> が、仕方ない場面はあるのでこういった方法を採用することもある。 下記のようにして、子<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>のstateにアクセスできる。 <pre class="code lang-javascript" data-lang="javascript" data-unlink>// クラスA内にBという子コンポーネントがあるとする class A extends React.Component { constructor(props) { super(props); // stateを取得したい子コンポーネントにtestRefを渡すために、ここで作成 this.testRef = React.createRef(); } // クラスB内に作成したtestRefを渡す {this.testRef} /> // Bコンポーネント内の value というstateにアクセスできる handleBstate = () => { const test = this.testRef.current.state.value } } </pre> 繰り返すが、あまりおすすめはしない。瞬間的に子<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>の値を取得したい、関数を利用したいというケースでもなければあまり使わない方が無難だと思う。

dayjsのduration.format()まだマージされていない

2020/11/27 22:53

JS系で、時間・日時を取り扱うライブラリにdayjsというものがある。（他の有名どころだとMoment.js<a href="#fn:1" rel="footnote">1</a>とか） <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fday.js.org%2F" title="Day.js · 2kB JavaScript date utility library" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://day.js.org/">day.js.org</a></cite> ある時、formatを使って秒数を「HH:mm:ss」の形式で表現したくなった。例えば、144,930秒で表現すると「40:15:30」となる。 momentだと上記のようなケースに対応したライブラリがある。 <a href="https://github.com/jsmreese/moment-duration-format">GitHub - jsmreese/moment-duration-format: Format function plugin for the Moment Duration object.</a> momentと似た感じで、 <code>dayjs.duration({ seconds: time }).format('HH:mm:ss')　※timeは任意の秒数</code> でフォーマットできないかと思ったけど、まだdurationでformatは使えないらしい。ただ、最近devブランチに <code>duration().format</code>を使えるようにしたブランチがマージされたらしいので、これがmasterにマージされれば晴れて上記のようなフォーマットができるようになると思われる。 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fiamkun%2Fdayjs%2Fissues%2F965" title="How we can format the duration in dayjs. · Issue #965 · iamkun/dayjs" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/iamkun/dayjs/issues/965">github.com</a></cite> ちなみに、dayjs()で生成したものにシンプルにformatを使用しただけだと、24時間ごとに一日とカウントされ、24時間以上のカウントには対応できない。 <pre class="code lang-javascript" data-lang="javascript" data-unlink> const time = 144930 * 1000 // dayjs(time)のtimeはミリ秒で計算されるため、秒数をミリ秒に変換している dayjs(time).format('HH:mm:ss') => 16:15:30 </pre> <h4>2021/2/11追記</h4> どうやら上記のような対応の予定は無いらしい。残念。 <a href="https://github.com/iamkun/dayjs/issues/1376">Request - Format duration days as more than 24h · Issue #1376 · iamkun/dayjs · GitHub</a> <div class="footnotes"> <hr/> <ol> <li id="fn:1"> ただし、Moment.jsは近い将来新しい開発が停止になるそう　<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fcpoint-lab.co.jp%2Farticle%2F202009%2F17020%2F" title="【JavaScript】Moment.js の新規機能開発が停止。新規プロジェクトへの採用は非推奨へ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://cpoint-lab.co.jp/article/202009/17020/">cpoint-lab.co.jp</a></cite><a href="#fnref:1" rev="footnote">↩</a></li> </ol> </div>

非同期処理のデバッグ（Rails）

2020/07/25 21:54

<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>における非同期処理の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>方法を備忘録としてまとめた。 なお、非同期処理はSidekiqを用いて実現しているものとする。 <ul> <li>gemを使って処理を止める</li> </ul>非同期処理中でも以下のgemを使用すれば、バックグラウンドで動いているプロセスを<code>binding.remote_pry</code>で止められるらしい。（まだ試したことはない） <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FMon-Ouie%2Fpry-remote" title="Mon-Ouie/pry-remote" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/Mon-Ouie/pry-remote">github.com</a></cite> <ul> <li>Workerを直接実行させたうえで、binding.pryを使って処理を止める</li> </ul>例えば<code>TestWorker</code>というWorkerがあるとして、そいつを直接実行するには<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a> consoleで以下を実行すればいい。（非同期処理を無理矢理同期的に実行させている） この方法であれば、<code>binding.pry</code>でも処理を一時停止させることができる。 <pre class="code lang-ruby" data-lang="ruby" data-unlink>TestWorker.new.perform </pre>

ActiveSupport一時調べ

2020/07/11 09:45

<h3>Active Supportとは</h3> Active Supportは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>であり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>言語の拡張、ユーティリティ、その他横断的な作業を担っています。 Active Supportは言語レベルで基本部分を底上げして豊かなものにし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>アプリケーションの開発と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby%20on%20Rails">Ruby on Rails</a>それ自体の開発に役立てるべく作られています。（引用：Active Support コア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%B5%A1%C7%BD">拡張機能</a>） <a href="https://railsguides.jp/active_support_core_extensions.html">https://railsguides.jp/active_support_core_extensions.html</a> StringやInteger、Date、Datetimeなどのコアなクラスのメソッドを拡張してくれるもの <hr /> <h3>拡張対象</h3> Active Supportが拡張する対象をざっと挙げてみました（全部ではないです） <ul> <li>Object</li> <li>Module</li> <li>Class</li> <li>String</li> <li>Numeric <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/BigDecimal">BigDecimal</a></li> <li>Integer</li> </ul> </li> <li>Enumerable</li> <li>Array</li> <li>Hash</li> <li>Range</li> <li>Date</li> <li>Time</li> <li>File</li> <li>NameError</li> <li>LoadError</li> </ul> ... <hr /> <h3>全てのオブジェクトで使える拡張</h3> <ul> <li>Object#blank?</li> <li>Object#present?</li> </ul> <a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>にあるのは<code>nil?</code>と<code>empty?</code>のみ <pre class="code" data-lang="" data-unlink>nil.nil? => true [].empty? => true ''.empty? => true</pre> <hr /> <ul> <li>Object#blank?</li> </ul> <code>nil?</code>と<code>empty?</code>の合わせ技 <pre class="code" data-lang="" data-unlink>nil.blank? => true [].blank? => true ''.blank? => true nil.blank? => true</pre> <ul> <li>Object#present?</li> </ul> <code>!blank?</code>と同じ意味 <pre class="code" data-lang="" data-unlink>nil.present? => false [].present? => false [1,2,3].present? => true</pre> blank?とpresent?の定義は下のURL先 <a href="https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/object/blank.rb">https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/object/blank.rb</a> <hr /> <ul> <li>Object#try</li> </ul> おなじみtryメソッド。レシーバが<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>、もしくはメソッドが定義されていない時には<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>を返す。<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>でないなら引数で渡されたメソッドを実行。 <pre class="code" data-lang="" data-unlink>"test".try(:name) => nil "test".try(:size) => 4</pre> <ul> <li>Object#try!</li> </ul> <code>try</code>と違う点は、レシーバが<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>なら<code>nil</code>でなく例外を返すところ。 <pre class="code" data-lang="" data-unlink>"test".try!(:name) NoMethodError: undefined method `name' for "test":String # NoMethodErrorクラスの例外が発生</pre> <hr /> <ul> <li>Object#with_options</li> </ul> オプションを一つにまとめられる。 <code>validates</code>メソッドのオプションを一つにまとめたりとかもできると思うよ。 <pre class="code" data-lang="" data-unlink>class Company < ApplicationRecord ... has_many :contracts, dependent: :destroy has_one :billing_address, dependent: :destroy has_many :billings, dependent: :destroy ... end ↓ class Company < ApplicationRecord ... with_options dependent: :destroy to |comp| comp.has_many :contracts comp.has_one :billing_address comp.has_many :billings ... end </pre> <hr /> <ul> <li>tapの補足</li> </ul> ブロックを渡した場合には、<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>でない場合のみブロックの評価を行い、tryの返り値はブロックの評価結果となる。 <pre class="code" data-lang="" data-unlink>array => [["test1", 1], ["test2", 2]] array.try do |a| a.to_h end => {"test1"=>1, "test2"=>2} array.try do |a| a.to_h end.values => [1, 2] # Object#yield_selfも同様の挙動 array.yield_self do |a| a.to_h end.values => [1, 2]</pre> <hr /> <h3>Classの拡張</h3> <h4>class_attribute</h4> 継承可能なクラス属性を定義する。以下のようなことができるようになる。 <ul> <li>子クラスで上書きが可能</li> <li>アクセサメソッドを自動で定義</li> <li>子クラスで定義されていなければ親クラスの値を参照</li> </ul> 親クラスの定数を汚染する恐れがない。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>メソッド内からでもアクセスできる。 <pre class="code" data-lang="" data-unlink>class A class_attribute :x end class B < A; end class C < B; end A.x = :a B.x # => :a C.x # => :a B.x = :b A.x # => :a C.x # => :b C.x = :c A.x # => :a B.x # => :b # インスタンスからもアクセス・書き換え可能 # インスタンスからクラスのclass_attributeを書き換えることはない test = B.new test.x = :t test.x # => :t B.x = :b </pre> <hr /> <h3>Stringの拡張</h3> <ul> <li>活用系</li> </ul> レシーバに対して何かしら操作を行う系 <pre class="code" data-lang="" data-unlink>"tomato".pluralize => "tomatoes" "katsui".pluralize => "katsuis"</pre> <hr /> 活用系の続き <pre class="code" data-lang="" data-unlink>"admin_user".camelize => "AdminUser" "admin_user".camelize(:lower) => "adminUser" "account/financial_account".camelize => "Account::FinancialAccount" # camelizeと反対の操作を行うのがunderscore "Backoffice::UsersController".demodulize => "UsersController" "::UsersController".demodulize => "UsersController"</pre> <hr /> <h3>Numericの拡張</h3> <ul> <li>バイト</li> </ul> 全ての数値が以下のメソッドに対応している。 <pre class="code" data-lang="" data-unlink>bytes kilobytes megabytes gigabytes terabytes petabytes exabytes</pre> <pre class="code" data-lang="" data-unlink>2.bytes => 2 2.kilobytes => 2048 2.megabytes => 2097152</pre> <hr /> <ul> <li>書式設定</li> </ul> 指定した形式で数値をフォーマットできる <pre class="code" data-lang="" data-unlink># 電話番号 1234567.to_s(:phone) => "123-4567" 1234567891.to_s(:phone) => "123-456-7891" 1234567891.to_s(:phone, area_code: true) => "(123) 456-7891" // 桁区切り 12345678.to_s(:delimited) => "12,345,678" pry(main)> 12345678.to_s(:delimited, delimiter: ".") => "12.345.678" // 丸める 111.2345.to_s(:rounded) => "111.235" 111.2345.to_s(:rounded, precision: 2) => "111.23" 1112903.to_s(:rounded, precision: 3) => "1112903.000"</pre> <hr /> <h3>Enumerableの拡張</h3> <pre class="code" data-lang="" data-unlink># sum # 要素の合計値を返す # 数値でない場合は+を使ってsumを計算する [2,3,4].sum => 9 (1..10).sum => 55 %w(rb yml haml).sum => "rbymlhaml" # many? # collection.size > 1　の短縮系 [1,2,3,4].many? => true # many?ではブロックの評価も行える # ブロックの場合、評価結果のcollection > 1かどうか判定する [1,2,3,4].many? { |a| a % 2 == 0 } => true [1,2,3,4].many? { |a| a % 3 == 0 } => false # pluck # 指定したkeyに基づく配列を返す [ { id: 1 }, { id: 2 }, { id: 3 } ].pluck(:id) => [1, 2, 3]</pre> <hr /> <h3>Hashの拡張</h3> <pre class="code" data-lang="" data-unlink># deep_merge # レシーバと引数に同じkeyが存在し、かつ値がHashの時に下位のHashをmergeする {a: {b: 1}}.deep_merge({a: {c: 2}}) => {:a=>{:b=>1, :c=>2}} # exceptとexcept! # 引数で指定したkeyがあればレシーバのHashから取り除く {a: 1, b: 2}.except(:a) => {:b=>2} # stringify_keysとsymbolize_keys # レシーバのHashのkeyをシンボル→文字列に変換（stringify_keys） # レシーバのHashのkeyを文字列→シンボルに変換（symbolize_keys） {nil => nil, 1 => 1, a: :a}.stringify_keys => {""=>nil, "1"=>1, "a"=>:a} {nil => nil, 1 => 1, "a" => "a"}.symbolize_keys => {nil=>nil, 1=>1, :a=>"a"} </pre> <hr /> <h3>まとめ</h3> <ul> <li>あなたが実装しようとしているメソッドは、既にActive Supportが提供しているかもしれないので、一旦落ち着いて探しましょう</li> <li>比較的Active Supportのドキュメントは読みやすく、発見も色々とあるので読んでみるといいよ！</li> </ul>

tap,yeild_selfについて

2020/07/11 09:43

tapとyield_selfの使い分けについて <ul> <li>tapについて</li> </ul> tapはレシーバ自身を返すため、元々のレシーバの値を変更することなくメソッドチェーンをつなげることができる。他の処理を行いながら、メソッドチェーンを行いたい時などに便利。 <pre class="code" data-lang="" data-unlink>result = [] test = [1, 2, 3] kekka = test.tap { |t| result << t.sum }.join('/') result => [6] kekka => "1/2/3"</pre> <ul> <li>yield_selfについて</li> </ul> yield_selfはブロック内の処理結果を返すため、 他の処理を行いながら、メソッドチェーンを行いたい時などに便利。