今日の環境 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 -…

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

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

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

参考にさせて頂いたページ gpasswdについて dockerコマンドをsudoの付与無しに実行できるようにする – guro_chanの手帳 newgrpについて Dockerでユーザーをdockerグループに追加することの危険性を理解しよう - Qiita http://www.turbolinux.co.jp/products/…

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

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

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

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

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

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

node-sassでディレクトリごとwatch(監視)する 例えば以下のような感じです。 $ node-sass src/entry_points/ -o public/stylesheets/ -w 一応解説すると以下の通りです。-w はwatchです。 $ node-sass [監視したいディレクトリ] -o [書き出したいディレクト…

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

参考にさせていただいたページ 【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>…

参考にさせて頂いたページ テストを実行する環境の構築 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.…

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

参考にさせて頂いたページ Configuring ESLint - ESLint - Pluggable JavaScript linter はじめに 業務でIE9に対応したJSを書くことになりました。 babelは導入されていないのですが、つい癖でうっかりES6のシンタックスで書いてしまいます。 それがそのまま…

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