Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

2020-01-01から1年間の記事一覧

templateにコメントを書いて「warning 'v-html' directive can lead to XSS attack vue/no-v-html」の警告を個別に無効化する

参考にさせていただいたページ disable eslint in vue template · Issue #260 · vuejs/eslint-plugin-vue · GitHub 範囲を無効化する 以下のように書くと、任意の複数行を無効化できるらしいです。有効化も忘れずにしましょう。 <div class="hoge" v-html="foo" /> あと以下の sanitize-html</div>…

railsのdatetime_selectで生成されるselectタグにスタイルを適用する

参考にさせていただいたページ 【Rails】date_selectタグの使い方メモ - Qiita erb erbには例えば以下のような感じで書きます。セマンティックではないですが、多少なりと読みやすいようにulとliを使用しています。 <ul class="mod-datetime-selector-0001"> <li class="mod-datetime-selector-0001__date-field-wrapper"> <div class="mod-field-type-select-0001"> <%= f.datetime_select :start_at, { d</div></li></ul>…

Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError) の解決

参考にさせていただいたページ Railsの環境構築時にLibrary not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)で苦しんだ - Qiita 今回起こっていた問題 bundle install をしたときに以下のエラーが出ました。 /Users/Hoge/.rbenv/ver…

hexoのcssの編集が反映されない(public/css/style.cssが更新されない)

はじめに 表題の通りですが、hexo generate してもpublic/css/style.cssが更新されませんでした。 まず確認 public/css/style.css の更新日を確認してみました。 このファイル自体の更新日が更新されているのであれば、ブラウザキャッシュなどの可能性があり…

nginx.confの設定でCSSや画像が読み込まれない問題を修正する

参考にさせていただいたページ CSSファイル(等)が読み込まれているのに反映されない!!(Resource interpreted as Stylesheet but transferred with MIME type text/plain) - Qiita nginx.confを書きながら内容を理解する - Qiita Nginx設定のまとめ - Q…

input type="number" の挙動を少しだけ確認してみた

参考にさせていただいたページ HTML5で追加された input[type=number] を使う上での注意 - Qiita Reconsider the behaviour for type="number" - restricting input · Issue #1355 · w3c/html · GitHub スマートフォンで数字キーボードに変更する(2015/01版…

netlifyとhexoでブログを公開する

参考にさせていただいたページ hexoについて Hexo Hexoでローカルに静的なブログを作ってみて基本構成を把握する | Qookie Tech hexoとnetlifyでブログを公開する手順について Hexo でブログを作成して Netlify で公開するまで - to-me-mo-rrow - 未来の自分…

grepコマンドで正規表現を使って文字列を抽出する

参考にさせていただいたページ grep | 正規表現を利用したテキストのパターン抽出 grepコマンドの詳細まとめました【Linuxコマンド集】 パターンにマッチする行を抽出する方法 正規表現を使用するときは-Eオプションを使うと良いです。 ファイル単体なら以下…

IE11でSymbolは定義されていませんとエラーが出る

参考にさせていただいたページ using Symbol causes exception in IE11 · Issue #514 · zloirock/core-js · GitHub reactjs - 'Symbol' is undefined in IE after using babel - Stack Overflow 解決したい問題 IE11で「'Symbol' は定義されていません。('S…

jestのcustom reporterを作成してテスト実行結果をcsvファイルで出力する

参考にさせていただいたページ Configuring Jest · Jest Configuring Jest · Jest GitHub - mas0061/jest-allresult-csv-reporter: A Jest plugin. Output all test results to CSV. はじめに jestのテスト実行結果を出力するためのreporterは比較的簡単に自…

テスト対象でない子コンポーネントをstubで置き換える | Vuex + vue-test-utils その0006

参考にさせていただいたページ mount() | Vue Test Utils サンプルコード たとえばMyComponentの子コンポーネントHogeComponentを置き換えたい場合は、mountするときに以下のようにします。 wrapper = mount(MyComponent, { stubs: { HogeComponent: { templ…

何ミリ秒か待ってからテストする | Vuex + vue-test-utils その0005

はじめに Vue.nextTick()を使ってDOMを更新して解決できるようなことは、Vue.nextTick()を使うのが良いと思います。 実装上setTimeout()を使っている箇所があったので、テストコードでも100ミリ秒待ってから実行するなどしました。 Vue.nextTick()で非同期に…

stateの更新に伴うDOMの更新を待ってからテストする(非同期処理で更新されるstateのテスト) | Vuex + vue-test-utils その0004

参考にさせていただいたページ vue-test-utils公式(英語) Getting Started | Vue Test Utils Testing Asynchronous Behavior | Vue Test Utils vue-test-utils公式(日本語) はじめる | Vue Test Utils 非同期動作のテスト | Vue Test Utils Vue.nextTick()に…

rails sしたらYour Yarn packages are out of date!と表示された

問題のメッセージ rails s したら以下のようなメッセージが表示されて、rails server起動できませんでした。 ======================================== Your Yarn packages are out of date! Please run `yarn install --check-files` to update. =========…

JavaScript学習日記 その0007 文字列の中に半角文字が混ざっているか判定する

参考にさせて頂いたページ 半角かどうかの判定について 半角を判別する 全角文字、あるいは半角文字が含まれているかチェックする | JavaScript Tips 半角カナかどうかの判定について Unicode 内のそれぞれの文字種の範囲 - みちのぶのねぐら 工作室 旧館 第…

JavaScript学習日記 その0006 文字列から改行を削除する

サンプル textareaタグに複数行の文字列が入力された場合などに以下のようにします。 let str = event.target.value; str = str.replace(/\r?\n/g, '');

Visual Studio Code バージョン1.65.2の検索フィールドを下部に移動する(Visual Studio Codeの設定変更)

参考にさせていただいたページ 【Visual Studio Code】v1.12.1 設定のためのSettings.jsonファイルについて - Qiita バージョン1.65.2以降の場合 どのバージョンからなのかわかりませんが、ドラッグすると移動できます。 まずメニューから「View > Debug Con…