2019-01-25

Vue CLI3のproductionでconsole.logを消した方法

やりたかったこと

本題の通りなのですが、productionの状態でbuildしたソースからよろしくconsole.logを消せないかなと思ったのでいろいろ調べてみました。

結論

uglifyjs-webpack-plugin を入れて、vue.config.jsにconsole.logを消す設定を書く。

pluginのインストール

npm i -D uglifyjs-webpack-plugin

vue.config.jsに書き足す

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProd = process.env.NODE_ENV === "production";
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: isProd ? [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true
            },
          }
        })
      ] : []
    }
  }
}

こちらで発見しました

forum.vuejs.org

所感

これを試したのは個人的につくった実装物なので、一旦これでいいんですが、もう少し大きい実装で、コードを難読化したら発生したbugとかに関してはlogがでなくてちょっとつらいのかなと思いました。
もう少しいろいろ設定ができそうなので、折を見て試して追記できたらと思います

2019-01-24

IEでreadonlyのinputにcssを当てたくなった時の対処

日々大きな壁として立ちはだかるIEくんに対して頑張ったお話のひとつです。

よくある実装のひとつだと思うのですが、そのinputがreadonlyだったときに、ぱっと見でreadonlyだと識別できるようにスタイルを変えたいというところの実装をしていました。

結論

input[readonly] {
  background-color: gray
}

で対処できました。
(正直当たり前といえば当たり前なのですが)

もともとやっていたこと

input:read-only {
  background-color: gray
}

Chromeだとこれで動いていたんですよね。
そしていざIEで確認してみたところ、ちゃんと効いてない。

調べてみたところ、 :read-only の擬似クラスはIEではサポートされてないとのことでした。
(なるほどそれは動かない笑)

developer.mozilla.org

興味深かったところ

input[type="text"][readonly] {
  background-color: gray
}

といった形で [ ] を２つつなげても動いた・・・
まあ確かに

input:read-only.hoge-class {
  background-color: gray
}

みたいな形でつなげても動作するので、こちらも当たり前といえば当たり前か・・・(CSSのセレクターももう少し勉強が必要ですね)

いつまで動いてるかわかりませんが、下記のjsFiddleは実験物

jsfiddle.net

2019-01-19

はじめてのレポジトリにgit pushするときのお作法

やりたいこと

gitでレポジトリ作って、ローカルでひとまずの実装をしたあとにgitにあげる
なんだかんだ頻度がそんなに高くないので忘れてしまう・・・

0. gitのレポジトリつくり

割愛。
そういえばgithubもprivateのレポジトリがタダで使えるようになったのはありがたい。

1. git init

ローカルのリポジトリとして機能させるために

git init

その後適当に実装

2. add と commit

git add .
git commit -m "messages"

で修正をcommit作成

3. remote add

git remote add origin git@github.com:....

でremoteに登録

4. push

あとは

git push

ついでに

別ブランチきって最初にpushしようとするとそのときもまた怒られる。その際は

git push --set-upstream origin branch-name

でリモートブランチをつくる

gitの関連書籍

正直基本的な操作はぐぐったらすぐ出てくるので本読んでまでどうにかするものでもない気がしている。(もちろんちゃんと学ぶことは重要)
下の本は個人的には読みやすかったが SourceTree ベースでgitの操作が進んでいたので、コマンドラインでの操作について学びたかったときには少し違った。 www.amazon.co.jp

こちらについては結構詳細に書いてあったのでよかった印象 www.amazon.co.jp

mitsuのぶろぐ

基本的にはプログラミングの話のつもり。