FujjimaBlog

近況について

2021/05/20 23:17

こんにちは、fujjimaです。 ブログの方は、管理画面側は終わったんで一般画面の方作ってます。全部<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>なので特殊なことは何もしてないです。月別<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AB%A5%A4%A5%D6">アーカイブ</a>作ってみて思ったけど、あれって結構実装面倒なんだね。 最近の近況だけ言うと、一応仕事はしています。 2ヶ月ぐらい前から仕事再開し出しました。まだ当分は今の現場で働きます。 基本的に設計の議論とかをメンバー内で行うのが通例になっているので、疑問点とかをそこでシェアできるのが私的にはいいと思います。今の現場にどれぐらいいるかは分かりませんが、在籍している間はチームの生産性に少しでも寄与できればと考えています。

近々ブログを移設します

2021/03/08 22:47

そういやブログの自作をしていなかったと思い立ったので、近々自分のブログを作ってそっちに引っ越そうと思います。今のところ全部<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>で作る予定で、簡単に済ませたい。 というか転職しないといけないんだよ、俺は。

Material-UIのSelect内のテキスト部分のスタイルをいじる

2021/02/13 18:19

<h3>したいこと</h3> Material-UIのSelect<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>内にあるテキスト部分のスタイルを変更したかった。具体的には、下図のようにテキストエリアの範囲を縮小したかった。 変更前 <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210208/20210208121616.png" alt="f:id:fujjima:20210208121616p:plain" title="" class="hatena-fotolife" itemprop="image"> 変更後 <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210208/20210208121722.png" alt="f:id:fujjima:20210208121722p:plain" title="" class="hatena-fotolife" itemprop="image"> <h3>タグ構造</h3> Select周りの構造は下記の通りになっているとする。今回「ここから〜ここまで」で囲まれている範囲のスタイルを変更することを目的とした。該当部分のReact<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>も記載しているが、jsx用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトを当てていないので、雰囲気でおなしゃす。 <pre class="code lang-html" data-lang="html" data-unlink> <div class="MuiInputBase-root MuiOutlinedInput-root makeStyles-statusMenu-16">  <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="demo-simple-select-filled" id="demo-simple-select-filled" > 未着手 </div>  <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="waiting" /><svg class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined" focusable="false" viewBox="0 0 24 24" aria-hidden="true" > <path d="M7 10l5 5 5-5z"></path> </svg> <fieldset aria-hidden="true" class="PrivateNotchedOutline-root-29 MuiOutlinedInput-notchedOutline" style="padding-left: 8px" > <legend class="PrivateNotchedOutline-legend-30" style="width: 0.01px"> <span><200b></span> </legend> </fieldset> </div> </pre> <pre class="code lang-javascript" data-lang="javascript" data-unlink><Select id="demo-simple-select-filled" value={task.status} variant="outlined" className={classes.statusMenu} > <MenuItem value="waiting">未着手</MenuItem> <MenuItem value="working">作業中</MenuItem> <MenuItem value="completed">完了</MenuItem> <MenuItem value="pending">保留</MenuItem> </Select> </pre> <h3>方法</h3> <code>MenuItem</code>のinput部分の<code>MuiOutlinedInput-input</code>に対してスタイルを設定する <pre class="code lang-css" data-lang="css" data-unlink>statusMenu: { '& .MuiOutlinedInput-input': { paddingBottom: '7px', paddingTop: '7px', }, }, </pre>

JSのbind、及び`this`について理解を少し深める

2021/01/05 20:24

<h4>bindそのものについて</h4> JSのbindの用法を知り、「どういう時に使われるのか」が漠然とイメージできるようになりたかったため、概要と使われ方を調べた。 とりあえず以下のサイトのデモコードを自分なりにいじってどういう挙動なのかは調べた。 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind() - JavaScript | MDN</a> <pre class="code lang-javascript" data-lang="javascript" data-unlink>const module = { a: 50, b: 30, text: 'this is test', showText: function(){ return this.text; }, }; const moduleShow = module.showText; console.log(moduleShow); // moduleから抜き出した関数にmodule自体をbindする // moduleShow内のthis = bindされたmoduleとなる // そのため、this.text = module.text、になる const boundGetX = moduleShow.bind(module); console.log(boundGetX()); </pre> その他、bindの概要、callとの違いについては下記の記事を見てイメージは出来た。 <a href="https://itsakura.com/js-bind">JavaScript thisの内容を指定する(bindメソッド) | ITSakura</a> ただ、こいつがどういう目的で使われるかは分からなかった。<a href="#f-81413229" name="fn-81413229" title="こういったサンプルを見て、「じゃあこういうものにも応用できるな」と考えつく能力もプログラマに必要不可欠な能力だよな、と最近感じている">*1</a> 単純に、関数内のthis（thisがない場合はbind内の第一引数にnullを指定する）を特定のものに設定する（=undefinedにしない）場合にbindを使う、という使い方でいいのだろうか。 <h4>アロー関数内でのthisの扱われ方とbindの比較</h4> ここまで調べて、そういえばJSの通常関数とアロー関数ではthisの指すものが異なる、という話しを思い出した。 <a href="https://qiita.com/mejileben/items/69e5facdb60781927929">【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita</a> <a href="https://qiita.com/suin/items/a44825d253d023e31e4d">JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita</a> 両者の<code>this</code>に関する違いとしては、アロー関数は<code>this</code>を束縛し、通常関数は<code>this</code>を束縛しない（=関数呼び出し元（レシーバ）をthisとする）という点である。 下記のコードを例に比較する。 <ul> <li>通常関数</li> </ul> <pre class="code lang-javascript" data-lang="javascript" data-unlink> this.name = "globalName"; // 通常関数 function showName() { console.log(this.name); } let arrowFunc = { name: "john", func: showName, }; arrowFunc.func(); => john // bindを使った場合 showName.bind(arrowFunc)(); => john </pre> <code>arrowFunc.func()</code>の返り値が<code>john</code>となっており、これはarrowFunc.nameの値であることが分かる。このことから、<code>arrowFunc.func()</code>、つまりは<code>arrowFunc.showName()</code>のshowName内部のthisはarrowFunc（レシーバ）を指していたことが分かる。 <ul> <li>アロー関数</li> </ul> <pre class="code lang-javascript" data-lang="javascript" data-unlink> this.name = "globalName"; // アロー関数 const showName = () => { console.log(this.name); }; let arrowFunc = { name: "john", func: showName, }; arrowFunc.func(); => globalName </pre> <code>arrowFunc.func()</code>の返り値が「globalName」となっている。これは最初に定義した<code>this.name = "globalName"</code>のnameの値が表示されていることが分かる。ここで、アロー関数内のthisについてのリファレンスを見てみる。 <blockquote>アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。つまり、アロー関数内の this 値は通常の変数検索ルールに従います。このためスコープに this 値がない場合、その一つ外側のスコープで this 値を探します。</blockquote> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">アロー関数 - JavaScript | MDN</a> アロー関数である<code>showName</code>が定義された際、関数内のthisは更に外側のthisを見ていたことになる。今回Node上で上記コードを実行したため、thisとして定義されていたのは<code>{name: "globalName"}</code>だったため、<code>showName</code>関数内のconsole.logで表示されたthis.nameは、コードの最初に定義したthis.nameだった、ということになる。 ちなみにトッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%EC%A5%D9">プレベ</a>ル、グロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープあたりはここを参考にした。 <a href="https://qiita.com/qeema/items/0b7e2ff4e33703a42a40">JavaScriptのトップレベルスコープは常にグローバルスコープではなかった - Qiita</a> <h4>まとめ</h4> 改めて<code>bind</code>、通常関数とアロー関数それぞれでのthisの使い方を確認した。通常関数とアロー関数の違いについては他にも色々あるが、一旦知りたいと思っていたことを確認することができた。 <div class="footnote"> <a href="#fn-81413229" name="f-81413229" class="footnote-number">*1</a>:こういったサンプルを見て、「じゃあこういうものにも応用できるな」と考えつく能力も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE">プログラマ</a>に必要不可欠な能力だよな、と最近感じている </div>

需要が薄いMaterial-UIのvalidationの一例

2021/01/04 12:54

空文字を許容しない、というバリデーションを一部分だけ書きたい、しかしそのために本格的なバリデーションの機構を組むのはめんどくさくて死にそう、という時にその場しのぎで書いたもの。 <pre class="code lang-javascript" data-lang="javascript" data-unlink> <TextField label="名前" variant="outlined" margin="normal" required // input.valueに入力された文字が入っているものとして、空文字の場合は input.value はfalseを返す // 上記の場合に{ error: true }を返すことで <TextField error /> と書いた時と同じようになる // { error: false } の場合はerrorは指定されていない状態になる {...(!input.value ? { error: true } : { error: false })} /> </pre>

Material-UIのTextFieldをtype="date"にした際のdefaultValueに指定する日付のフォーマットについて備忘録

2021/01/01 14:50

material-uiの<code>TextFiled</code>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の中で、<code>type="date"</code>のようにタイプを指定することでDate pickerのように使用することができる。 <a href="https://material-ui.com/components/pickers/#native-pickers">Date picker, Time picker React components - Material-UI</a> その際、デフォルトの日付を<code>defaultValue</code>というオプションで設定できるが、この部分で少し詰まったので備忘録として残す。 <h4>ダメだった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // 年、月、日の区切りがスラッシュになっているとdefaultValueとして認識されない const today = dayjs().format('YYYY/MM/DD') <TextField label="testDay" type="date" defaultValue={today} margin="normal" /> </pre> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144435.png" alt="f:id:fujjima:20210101144435p:plain" title="" class="hatena-fotolife" itemprop="image"> <h4>良かった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // 年、月、日の区切りがハイフンだときちんとdefaultValueとして指定できる const today = dayjs().format('YYYY-MM-DD') <TextField label="testDay" type="date" defaultValue={today} margin="normal" /> </pre> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144333.png" alt="f:id:fujjima:20210101144333p:plain" title="" class="hatena-fotolife" itemprop="image"> 詳細は調査中だが、同じようにdatapickerとして使用できる<code>KeyboardDatePicker</code>ではformatに<code>format="MM/dd/yyyy"</code>のように指定してもいける感じなので、どうしてこのような仕様にしているかはよく分からない。しかも表示される時には<code>YYYY/MM/DD</code>形式だし。スラッシュどこに行った。 <a href="https://material-ui.com/components/pickers/#material-ui-pickers">https://material-ui.com/components/pickers/#material-ui-pickers</a>

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あたりはこういったケースをきちんとメモしておいてその都度理解を深めるのがいいかなと感じる。実装周りが落ち着けば一度きちんと見たい。