Motomichi Works Blog

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

制作

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…

何ミリ秒か待ってからテストする | 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の検索フィールドを下部に移動する(Visual Studio Codeの設定変更)

参考にさせていただいたページ 【Visual Studio Code】v1.12.1 設定のためのSettings.jsonファイルについて - Qiita Settings.json格納先 お使いの環境によって格納先が異なります。 Windows: %APPDATA%\Code\User\settings.json (C:\Users\ユーザー名\AppD…

webpack4.x + sass-loader + postcss-loader + autoprefixerでscssファイルをコンパイルする

今日の環境 Windows10 Home node 12.13.1 npm 6.13.1 webpack 4.41.2 webpack-cli 3.2.3 プロジェクトディレクトリを作成 mkdir webpack_4_scss_introduction cd webpack_4_scss_introduction npm initする npm init グローバルにインストール npm install -…

vue/singleline-html-element-content-newlineのルールを無視するタグを追加する

参考にさせて頂いたページ eslint-plugin-vue/singleline-html-element-content-newline.md at master · vuejs/eslint-plugin-vue · GitHub eslint-plugin-vue/singleline-html-element-content-newline.js at master · vuejs/eslint-plugin-vue · GitHub タ…

sendmailコマンドでメールを送信する

参考にさせて頂いたページ sendmailコマンドで送信してみる 以下のように sendmail [送りたいメールアドレス] を入力してenterを押します。 とりあえず自分のメールアドレスにでも送ってみるのが良いと思います。 $ sendmail hoge@example.com 続けて以下の…

Rails5 erbで画像パスを取得する

参考にさせて頂いたページ ActionView::Helpers::AssetUrlHelper はじめに image_tagメソッドみたいにタグが出力したいわけではなく、src属性に入れるパスだけ欲しかった。 サンプルコード 以下のような感じに書きます。 <%= image_path 'hoge/foo.png' %> …

docker-composeとnginxのdocker imageで簡素に始める

参考にさせて頂いたページ docker-composeを使ってnginx上でVueアプリケーションを動かす - Qiita ディレクトリ構造 以下のようなディレクトリ構造です。docker-compose.ymlからの相対パスで色々指定しています。 hoge/docker-compose.yml hoge/nginx/Docker…

任意の子コンポーネントを入れ子にしてテストする | Vuex + vue-test-utils その0003

参考にさせて頂いたページ マウンティングオプション | Vue Test Utils はじめに テスト対象のコンポーネント内部に子コンポーネントを配置していて、shallowMount()の引数として特に設定を追加していない場合は、本来自分が配置しているコンポーネントでは…

this.$storeを参照している子コンポーネントを単体でテストする | Vuex + vue-test-utils その0002

参考にさせて頂いたページ マウンティングオプション | Vue Test Utils はじめに 子コンポーネント単体でテストをしたいけど、this.$storeを参照しているcomputedなどがあり、テスト実行時にエラーが出たのでどうにかしたかったという経緯があります。 サン…

computedでglobal変数をreturnしているvmをvue-test-utilsでtestする | Vuex + vue-test-utils その0001

参考にさせて頂いたページ Mounting Options | Vue Test Utils 要約すると 要約すると「任意のcomputedを上書きしてからtestを実行する。」ということになります。 例 例えばプロダクトのコードで、 window.gon = { hoge: 'example_value' } を用意して、こ…

環境構築 | Ubuntu18.04 + docker-composeでrailsアプリケーション開発 その0001

参考にさせて頂いたページ docker-composeのインストール Docker Compose のインストール — Docker-docs-ja 17.06.Beta ドキュメント dockerとdocker-composeのインストール(Linux編) - Qiita docker daemonの起動とか systemd と Docker の管理・設定 — Doc…

| Ubuntu18.04 + dockerのCentOSイメージでrails その0001

はじめに 全くまとまってい ない自分用メモです。 この手順通りやっても動くかどうかもわかりません。 そのうち暇なときにまとめ直そうと思います。 dockerのインストールとHelloWorld まず以下の記事の手順でHelloWorldまでやりました。 ubuntu18.04でdocke…

Vue.jsでもデザインと振る舞いを分ける(Presentational ComponentとContainer Component について)

参考にさせて頂いたページ Vue Loader公式 SFC Spec | Vue Loader 色々 React/Reduxを約三年間書き続けてきたので知見を共有します - Qiita Presentational ComponentとContainer Component について 日本語訳: Presentational and Container Components – …

webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004

参考にさせて頂いたページ webpack.config.jsについて Configuration | webpack eslintについて Command Line Interface - ESLint - Pluggable JavaScript linter eslint-loaderのoptionsについて GitHub - webpack-contrib/eslint-loader: eslint loader (f…

.vueファイルの中にscssを書けるようにする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0003

参考にさせていただいたページ 【webpack】vue&type=style&index=0&lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。 <div class="mod-error-messages"> <ul class="mod-error-messages__list"></ul></div>…

vue-test-utils + jestを追加する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0002

参考にさせて頂いたページ テストを実行する環境の構築 GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.…

Vuexを使用する基本的なビルド環境を構築する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0001

はじめに Windowsでもできます。 MacやUbuntuなどでもできると思います。 これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。 webpack4 + babel7 を使ってビルド vue-test-utils + jest を使ってテスト実行 e…

gitその0002 マージ済みのブランチをローカルからまとめて削除する

参考にさせて頂いたページ 【 xargs 】コマンド――コマンドラインを作成して実行する:Linux基本コマンドTips(176) - @IT マージ済みのブランチをローカルからまとめて削除するコマンド git branch の実行結果を一つずつ引数にしてくれます。 このときmast…

RSpec+Capybaraその0003 非同期処理などの後で少し待ってから検証を続行する using_wait_time()

参考にさせて頂いたページ 河西 高明 Tech Blog: Capybara で一時的に非同期処理の待ち時間を調整する using_wait_timeを使う using_wait_time 5 do expect(page).to have_content 'なんかテキスト' expect(page).to have_css '#hoge' end

webpack4.xでjsをビルドする前にeslintで構文チェックをする

参考にさせて頂いたページ eslint-loaderについて GitHub - webpack-contrib/eslint-loader: eslint loader (for webpack) .eslintrcについて ESLint 最初の一歩 - Qiita 今日の環境 Windows10 node 8.11.1 npm 5.8.0 webpack 4.8.1 プロジェクトディレクト…

webpack4.xでscssファイルをコンパイルする

参考にさせて頂いたページ 設定全般 最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA ExtractTextPluginをwebpack 4 で使用する方法について Webpack 4 · Issue #760 · webpack-contrib/extract-text-webpack-plugin · Gi…