Motomichi Works Blog

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

制作

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&amp;type=style&amp;index=0&amp;lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り…

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…

webpack4.x+vue.js 2.x+vue-loaderでビルド環境を構築する その0001 導入

参考にさせて頂いたページ vue-loaderを使うときのwebpack.config.jsの記述内容について Getting Started | Vue Loader .babelrcについて 1年前に作ったフロントエンド環境を色々新しくした - Qiita 包括的にwebpack 4 入門 webpack 4 入門 - Qiita 包括的に…

vue.js 2.x その0004-02 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

はじめに 以下の記事で書いたコードを少しマシな感じに書き直しました。 vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る) - Motomichi Works Blog サーバーサイドから動的な値がwindow.itemsで書き出される想定で書いてい…

RSpec+Capybaraその0002 radioやcheckboxの状態を検証する

参考にさせて頂いたページ RSpecについて 使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita Capybaraについて 使えるRSpec入門・その4「どんなブラウザ操作も自由自在!逆引きCapybara大辞典」 - Qiita Capybaraチートシート -…

RSpec+Capybaraその0001 インデックス

参考にさせて頂いたページ RSpecについて 使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita Capybaraについて 使えるRSpec入門・その4「どんなブラウザ操作も自由自在!逆引きCapybara大辞典」 - Qiita Capybaraチートシート -…

railsその0003-011 第九章、第十章完了

rails 5のチュートリアルをやってみる日記です。 今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。 昨日と今日で第九章、第十章のコード書き終えました。 永続的ログイン、ユーザー情報の更新、ユーザーの削除などができるようになりま…

railsその0003-010 第七章、第八章完了

rails 5のチュートリアルをやってみる日記です。 今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。 第七章、第八章のコード書き終えました。 会員登録、ログイン、ログアウトができるようになりました。

railsその0003-009 第六章完了

今日の日記 rails 5のチュートリアルをやってみる日記です。 今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。 第六章のコード書き終えました。 Userモデルを作成して、name、email、passwordフィールドのバリデーションとそのtestを作…

webpack3.x+vue.js 2.x+vue-loaderでビルド環境を構築する

参考にさせて頂いたページ Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita 最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA ベーシックなWebpackの導入と設定 - Qiita 過…

railsその0003-008 第五章完了

今日の日記 rails 5のチュートリアルをやってみる日記です。 今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。 平日の電車の中とか寝る前とかにコツコツ読んで、読み終えました。 第五章のコード書き終えました。 routes.rb書いたり、ra…

絵を描くことについて考えてみる その0003 写真や絵を線で分割してから模写する

はじめに 絵心が無いとはよく見聞きしますが、多くの場合は以下の2点が大きな要因であると考えています。 絵を描くための学習、練習に費やした時間が少ない 費やしている時間は多いが効果的な学習方法、練習方法でない 効果的な学習方法、練習方法とはどうい…

JSでテストコードを書く その0002-02 sinon.jsのstubでapiのテストを書いてブラウザでテストを実行する

参考にさせて頂いたページ sinon.jsのstubを使ったajaxテスト - Qiita 以前書いた記事 mochaとchaiを使うことについて以前書いた記事です。 この続きという感じでsinon.jsのstubを使っていきます。 JSでテストコードを書く その0002-01 mochaとchaiでテスト…

railsその0003-007 第四章完了

今日の日記 rails 5のチュートリアルをやってみる日記です。 今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。 平日の電車の中とか寝る前とかにコツコツ読んで、読み終えました。 第五章も読み終えたけど、第五章は読むだけじゃなくてコ…