FujjimaBlog

業務上の備忘録（主にRails,npmパッケージ）

2020/01/21 14:02

<ul> <li>worker</li> </ul>アプリケーション要求サイクルの外側で実行されるプロセスのことで、非同期通信でリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トを処理する。 Webサーバーについて話している場合、「ワーカー」という単語はスレッドまたはプロセスと同じ意味で使用される。<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.oiax.jp%2Frails%2Fzakkan%2Fresque_worker_as_daemon.html" title="Resqueワーカーをデーモンとして動かす - Rails 雑感 - Ruby on Rails with OIAX" 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://www.oiax.jp/rails/zakkan/resque_worker_as_daemon.html">www.oiax.jp</a></cite> <ul> <li>プロセス・スレッドの違いについて</li> </ul><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmilestone-of-se.nesuke.com%2Fsv-basic%2Farchitecture%2Fcpu%2F" title="【図解】CPUのコアとスレッドとプロセスの違い・関係性、同時マルチスレッディング、コンテキストスイッチについて" 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://milestone-of-se.nesuke.com/sv-basic/architecture/cpu/">milestone-of-se.nesuke.com</a></cite> <ul> <li>認証と認可の違いについて</li> </ul>punditを使っていて、改めて調べた。 下記サイト様が非常に分かりやすい。 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdev.classmethod.jp%2Fsecurity%2Fauthentication-and-authorization%2F" title="よくわかる認証と認可 | Developers.IO" 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://dev.classmethod.jp/security/authentication-and-authorization/">dev.classmethod.jp</a></cite> <ul> <li>core-jsについて</li> </ul>babelのモジュールが読み込むpolyfile集を提供しているライブラリ。<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Faloerina01.github.io%2Fblog%2F2019-06-21-1" title="Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法" 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://aloerina01.github.io/blog/2019-06-21-1">aloerina01.github.io</a></cite>

postgresでテナント（schema）を切り替える際の備忘録

2019/12/01 22:24

<h3>tableplusについて</h3> 使用したDBクライアントツールは「tableplus」 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftableplus.com%2F" title="TablePlus | Modern, Native Tool for Database Management." 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://tableplus.com/">tableplus.com</a></cite> 無料版だと、タブが二つしか開けないのが最大のデメリットか。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/SQL">SQL</a>入力で一つは常に使用している状態なので、実質一つのタブしか自由に使えない感じ。 <h4>tableplus設定時のメモ</h4> DBの接続する際に<code>host</code>と<code>port</code>を入力する必要があるのだが、私はこの二つに関してあまりいい思い出がないので、設定時の確認方法をメモしておく。 <ul> <li>hostの確認について</li> </ul> ターミナルで<code>ifconfig</code>と入力　→　色々表示されるので「en0」のところを見る　→　「inet」のところに表示されているの<a class="keyword" href="http://d.hatena.ne.jp/keyword/IP%A5%A2%A5%C9%A5%EC%A5%B9">IPアドレス</a>を使用する。 <ul> <li>portの確認ついて</li> </ul> 自分は<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a>の人間なので、DBのportの設定とかは「database.yml」を見ればいい。他の確認方法について分かったら追記していくつもり。 <h3>schema表示</h3> コマンドは下に全部載っていた。 tableplusでの簡単なschemaの切り替えについても画像付きで載っていたので見れば分かるかと。 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftableplus.com%2Fblog%2F2018%2F04%2Fpostgresql-how-to-list-all-schemas.html" title="PostgreSQL - How to list all available schemas?" 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://tableplus.com/blog/2018/04/postgresql-how-to-list-all-schemas.html">tableplus.com</a></cite> <ul> <li>利用可能なschemaの列挙</li> </ul> 下記の2つの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SQL">SQL</a>文で使用可能なschemaの一覧が表示できる。 <pre class="code" data-lang="" data-unlink>SELECT schema_name FROM information_schema.schemata SELECT nspname FROM pg_catalog.pg_namespace;</pre>

一年弱を振り返り

2019/10/17 00:30

こんにちは。最近もコードを書く毎日です。 今の会社に入社してから、そろそろ1年になる勢いです。あと2ヶ月ぐらいですかね。一旦、この一年弱でやってきたことを整理してみたんですが、ざっと下記のようなことをしてきました。 <ul> <li>ちょっとしたフロント側のデザイン変更</li> </ul> <ul> <li>そこそこ大きな機能の実装・リリース</li> </ul> <ul> <li>料金計算部分の修正</li> </ul> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Salesforce">Salesforce</a>との連携部分の実装</li> </ul> <ul> <li>gem, npmパッケージの影響調査及びアップデート</li> </ul> <ul> <li>その他細々としたタスク</li> </ul> んで、出来ること自体は増えたんですが、依然「実装力」自体が低いままになっています。 頭の中に画面の動きやデータの流れはイメージできるようになってきたんですが、それをいざ実装しようとすると 途端に詰まることが多いです。これについては実装方法のスタックが自分の中に少ないことが最大の原因です。 こればかりは、コードを書いていく中で引き出しを増やしていくしかないかなと。しかし、やはり今の会社で働き始めてもうすぐ一年になるので、いい加減コ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%E1%A5%F3%A5%D0%A1%BC">アメンバー</a>として実装できるぐらいには 成長していたかったんですが、壁を超えられていない感じです。メンバーの中でも、自分が消化できたタスク数が一際低くなっていることが常なので、ここに関しては本当に早めに改善したいと思っています。 改善されるのが早いか、切られるのが早いか、というのが現実味を帯びてきてしまっているので、是が非でも改善していきたい今日この頃。一旦ここまでで、また技術系の投稿をしていきたいと思います。それでは。

webpackについて（備忘録）

2019/08/12 22:32

htmlのheadにてlodashを<a class="keyword" href="http://d.hatena.ne.jp/keyword/cdn">cdn</a>経由で使用するためのリンクを貼っつける bodyでindex.js<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を使用するための記述を追加するindex.js内では、htmlのbodyに追加するdivの中身を生成して追加する webpackを使うと、index.htmlで必要とされるデータ（画像、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>など）を、個々でサーバーに取得要求しなければならず、 時間がかかってしまうことを解決できる。 npm installした「lodash」をローカルで使うように修正。 npm installした後、index.js内にimport文を書く。src/index.jsを、webpacjkがバンドルして、その成果物「main.js」をdist/に出力する。 なので、index.html側でmain.jsを使用できるように、body内で <code>main.js</code>を読み込んでいる。 <ul> <li>webpack.config.jsについて</li> </ul>config.jsをwebpackに使ってもらうには、exportしないといけない npxコマンドについて ローカルにインストールしたnpmパッケージを、「npx」と入力することで実行可能。 npxはnpmにバンドルされているため、個別のインストールは不要。ひとまず、下記コマンドで対応した。 <pre class="code" data-lang="" data-unlink># 開発環境 npm run dev # 本番環境 npm run build</pre>

2019/08/03 16:23

JSでのnull判定とかundifined判定とか色々あるが、lodashのライブラリに便利なものがあったのでメモ。 <ul> <li>nullかどうかを判定</li> </ul><pre class="code JS" data-lang="JS" data-unlink>_.isNull(value)</pre> <ul> <li>null, およびundifined判定に使える</li> </ul><pre class="code JS" data-lang="JS" data-unlink>_.isNil(value)</pre> 上二つのメソッドは、要はそれぞれ<code>val == null</code>,<code>val === null</code>の判定をしているということですね。 DB上の値をフロントに返す際に、<a class="keyword" href="http://d.hatena.ne.jp/keyword/nil">nil</a>であれば何も返さないという実装にしていることがあるが、そうするとReact側で対応している変数には<code>undifined</code>が入ってしまう。 そこで、null、もしくはundifinedかを検出できる2個目のメソッドが便利という話でした。 参考にしたサイト <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Flodash.com%2Fdocs%2F4.17.15%23isNil" title="Lodash Documentation" 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://lodash.com/docs/4.17.15#isNil">lodash.com</a></cite>

semanticUI(React)のDropdownのplaceholderについての備忘録

2019/07/30 00:03

こんにちは。fujjimaです。 今回はSemantic UIについて、タイトル通りの備忘録です。 細かい部分については、以下の記事を参照してみてください。 ↓　Semantic UIは何者か？ <iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="まるごとSemantic UIでWebサービスを作った話 - Qiita" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2FYuta_Fujiwara%2Fitems%2F8abeda1b92dcaf505149" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://qiita.com/Yuta_Fujiwara/items/8abeda1b92dcaf505149"> </a></cite> Semantic UIの中に、ドロップダウンを簡単に作るための「Dropdown」<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>があります。 Dropdown<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>には、入力に関するヒントを表示するための「placeholder」オプションが用意されていますが、こいつがどのタイミングで表示されるかがよく分からなかったため、調べました。 結論からいうと、placeholderが表示されるタイミングは下記の通りです。 <ul> <li>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>」属性の値がnull or undifinedの時。</li> </ul> というわけで下記サイトで検証します。 <iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Dropdown - Semantic UI React" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Freact.semantic-ui.com%2Fmodules%2Fdropdown%2F%23types-selection" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://react.semantic-ui.com/modules/dropdown/#types-selection">react.semantic-ui.com</a></cite> 1. 下図のプルダウン中に「Select Friend」と表示されているが、コード内の「placeholder」で指定されていることが分かる。 <img class="hatena-fotolife" title="f:id:fujjima:20190714174556p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20190714/20190714174556.png" alt="f:id:fujjima:20190714174556p:plain" /> <pre class="code lang-javascript" style="font-family: Monaco, Consolas, 'Courier New', Courier, monospace, sans-serif; font-size: 14px; white-space: pre; overflow-wrap: break-word; overflow: auto hidden; border: 1px solid #dde5e8; margin: 0px 0px 1em; padding: 20px; color: #000000; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;" data-lang="javascript" data-unlink="data-unlink">const DropdownExampleSelection = () => ( <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} /> )</pre> 2. options（プルダウンをクリックした際に表示されるの選択肢を指定できる属性）に設定されたオブジェクトの中で一つ、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>」をnullにしておく。 ↓　ここでは、2個目のオブジェクトの<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>をnullにしてみました。 <pre class="code lang-javascript" style="font-family: Monaco, Consolas, 'Courier New', Courier, monospace, sans-serif; font-size: 14px; white-space: pre; overflow-wrap: break-word; overflow: auto hidden; border: 1px solid #dde5e8; margin: 0px 0px 1em; padding: 20px; color: #000000; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-lang="javascript" data-unlink="data-unlink">const friendOptions = [ { key: 'Matt', text: 'Matt', value: 'Matt', image: { avatar: true, src: '/images/avatar/small/matt.jpg' }, }, { key: 'Justen Kitsune', text: 'Justen Kitsune', value: null, image: { avatar: true, src: '/images/avatar/small/justen.jpg' }, }, ]</pre> 選択肢が2つになっていることが分かる。 <img class="hatena-fotolife" title="f:id:fujjima:20190714182431p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20190714/20190714182431.png" alt="f:id:fujjima:20190714182431p:plain" /> 3. <a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>をnullに設定した「Justen Kitsune」を選択してみると、 placeholderで設定した「Select Friend」が表示されていることが分かる。（ここめんどうなので画像略） 使い道としては、以下のようなものが考えられるかなと思います。 選択肢の中に{ <a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>: null, text: "xxxx" }の組み合わせを仕込んでおいて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>がnullの場合に表示させたい文字列やらがある時に、placeholderにも同じように「"xxxx"」を指定しておけば、それを初期表示できる感じですかね。 すごいマニアックな内容ですが、地味に詰まったため備忘録として残しました。

schema.rbについての備忘録

2019/06/09 23:41

業務の中でschema.rbのコンフリクトを起こすことが多々あったため、備忘録として残す。schema.rbは現DBの構造を元に作成され、その後migrationファイルが実行された際に変更点があれば、schema.rbが更新される。この時、 <pre class="code" data-lang="" data-unlink>rails db:migrate</pre>によって一度でも参照されたmigrationファイルは、2回目以降の参照対象から外れてしまう。なので、「このmigrationファイルはこれとまとめられるからまとめておこう」とかいうのは出来ない。 そういう時は、新しくmigrationファイルを作成するか、 <pre class="code" data-lang="" data-unlink>rails db:rollback</pre>とかでDBの状態を該当のmigrationファイル実行前まで戻してから、migrationファイルを修正して、再度 <pre class="code" data-lang="" data-unlink>rails db:migrate</pre>を実行すればいい。