tableでtd要素の中のradio checkedによって下のtr要素を表示・非表示に切り替えたい時

tableの入力画面で、例えばradioボタンの選択状況によって、下のtr要素の表示・非表示を変えたいとする

<table>
	<tr>
		<th>
			hpscript
		</th>
		<td>
			<input type="radio" name="a" value="y" checked>yes
			<input type="radio" name="a" value="n">no
		</td>
	</tr>

	<tr>
		<th>
			タイトル1
		</th>
		<td>
			コンテンツ1
		</td>
	</tr>
</table>

これをVue.jsのv-on:${}で実装しようとしたが、上手く行かない

<table>
	<div id="app">
	<tr>
		<th>
			hpscript
		</th>
		<td>
			<input type="radio" name="a" v-on:change="handler" value="y" checked>yes
			<input type="radio" name="a" v-on:change="handler" value="n">no
		</td>
	</tr>
	<div v-if="show">
	<tr>
		<th>
			タイトル1
		</th>
		<td>
			コンテンツ1
		</td>
	</tr>
	</div>
	</div>
</table>
<script>
	new Vue({
		el: '#app',
		data: {
			show: true
		},
		methods: {
			handler: function(event){
				if(event.target.value === 'y'){
					this.show = true
				} else {
					this.show = false
				}
			}
		}
	})
</script>

ガッテム。結局、on.changeで実装することに。

<table>
	<tr>
		<th>
			hpscript
		</th>
		<td>
			<input type="radio" name="a" value="y" checked>yes
			<input type="radio" name="a" value="n">no
		</td>
	</tr>

	<tr class="changeterm displaynone">
		<th>
			タイトル1
		</th>
		<td>
			コンテンツ1
		</td>
	</tr>
</table>

<script>
$('input[name=a]').on('change', function(){
			if($('.changeterm').hasClass('displaynone')){
				$('.changeterm').removeClass('displaynone');
			} else {
				$('.changeterm').addClass('displaynone');
			}			
		});
</script>

.displaynone {
        display:none;
}

なんでtableでVue.jsのv-onだと上手く行かないのかよくわからない。。
教えて欲しい。。🤖

Vue.jsでインスタンスのネスト(if-vの中でv-mode.trim)の表示方法

v-ifで、trueだった場合に、v-model.trimで文字数をカウントしたい場合。
v-ifの中にv-model.trimが入っているので、いわゆるネスト
この場合、new Vueを続けて書いてもうまく行かない

<div id="app">
	<div v-if="display">
		<div id="job">
		    <input type="text" name="title" v-model.trim="message" maxlength="20" placeholder="20文字以内で入力してください">
		    <span class="char-length">{{ message.length }}/20</span>
		</div>
	</div>
	<div v-else>
		<p>表示なし</p>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
		el: "#app",
		data: { 
			display: true
		}
	});
new Vue({
		el: "#job",
		data: { message: "what up bro!"}
	});
</script>

どうするかというと、子供のインスタンスのidに”v-pre”をつける

<div id="job" v-pre>
		    <input type="text" name="title" v-model.trim="message" maxlength="20" placeholder="20文字以内で入力してください">
		    <span class="char-length">{{ message.length }}/20</span>
		</div>

すると、上手く表示されます。
嵌ったー、15分くらい😱

prettier

npm install -D prettier gulp-prettier-plugin

var gulp = require('gulp');
var prettierPlugin = require('gulp-prettier-plugin');
var imagemin = require('gulp-imagemin');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');
var webserver = require('gulp-webserver');

gulp.task('prettier', function(done){
	gulp.src(['./src/sass/*.scss','./src/*.js'])
		.pipe(prettierPlugin({
			prettier:{
				singleQuote:true
			},
		},{filter: true}))
		.pipe(gulp.dest(file => file.base))
	done();
});

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});


gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('js', function(done){
	gulp.src(['./src/*.js','!node_modules/**'])
		.pipe(plumber())
		.pipe(eslint({ useEslintrc: true }))
		.pipe(eslint.format())
		.pipe(eslint.failAfterError())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/js/*.html', gulp.task('js'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('prettier','html','js','img','sass','watch','webserver'));

とりあえず、環境構築はこんなところか。
さー、front書き始めましょうかね^^

ESLint + gulp

$ npm i -D gulp-eslint

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('js', function(done){
	gulp.src(['./src/*.js','!node_modules/**'])
		.pipe(eslint({ useEslintrc: true }))
		.pipe(eslint.format())
		.pipe(eslint.failAfterError())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/js/*.html', gulp.task('js'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('html','js','img','sass','watch','webserver'));

gulpにsass-lintを導入する

stylelintとは？
-lint工程を追加することで、コードを綺麗にし、保守性を高める
-styleの重複を減らす

csslintとは?
$ npm install -g csslint
$ csslint main.css

sasslintを導入
$ npm install gulp-sass-lint –save-dev
$ gulp

var sassLint = require('gulp-sass-lint');

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

src/sass/main.scss
2:2 warning Mixed tabs and spaces indentation
2:20 warning Color ‘red’ should be written in its hexadecimal form #ff0000 no-color-keywords
2:20 warning Color literals such as ‘red’ should only be used in variable declarations no-color-literals
3:2 warning Mixed tabs and spaces indentation
4:2 warning Mixed tabs and spaces indentation
5:1 warning Files must end with a new line final-newline

✖ 6 problems (0 errors, 6 warnings)

ああああああ、これスゲー

gulp + sassの環境を整えよう

## sassをインストール
$ npm i -D gulp-sass

imgを圧縮し、sassとhtmlを編集したら、自動反映にします。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('html','img','sass','watch','webserver'));

あ、これでいいじゃん。あとは、JSとCSSのLint周りか

gulp 4

gulp-webserver
$ npm i -D gulp-webserver

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var header = require('gulp-header');
var webserver = require('gulp-webserver');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(plumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(header('/* copry righ @hpscript */'))
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/coffee/*.coffee', gulp.task('js'))
	gulp.watch('./src/*.html', gulp.task('html'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dist')
		.pipe(webserver({
			host:'192.168.34.10',
			livereload: true
		}));
	done();
});

gulp.task('default', gulp.series('html','img','js','watch','webserver'));

きた。livereloadが動かないと思ったら、htmlタグでないとダメのようね。
OK。では、sass + gulpの環境を考えましょう

gulp 4

watchの使い方

gulp.task('watch', function(done){
	gulp.watch('./src/coffee/*.coffee', gulp.task('js'))
	done();
});

gulp.task('default', gulp.series('html','img','js','watch'));

素晴らしい!
しかしsassの–watchとどうやって一緒に使うんだろうか、これ。

gulp-plumber

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pip(pulumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(plumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(header('/* copry righ @hpscript */'))
		.pipe(gulp.dest('./dest/js'))
	done();
});

/* copry righ @hpscript */(function(){}).call(this),function(){}.call(this);

アジャイル・チーム開発では属人性をなくす為、出来るだけcopy rightは付けたくないんだよなー

gulp 3

gulp-imageminで圧縮する

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('default', gulp.series('html','img'));

e.g. 150.2kb → 80.1kb

$ npm i -D gulp-coffee gulp-concat gulp-uglify

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('default', gulp.series('html','img','js'));

[vagrant@localhost gulp]$ gulp
[10:49:46] Using gulpfile ~/gulp/gulpfile.js
[10:49:46] Starting ‘default’…
[10:49:46] Starting ‘html’…
[10:49:46] Finished ‘html’ after 8.49 ms
[10:49:46] Starting ‘img’…
[10:49:46] Finished ‘img’ after 2.97 ms
[10:49:46] Starting ‘js’…
[10:49:46] Finished ‘js’ after 1.92 ms
[10:49:46] Finished ‘default’ after 17 ms
[10:49:48] gulp-imagemin: Minified 1 image (saved 70.1 kB – 46.7%)

マジかよ、これ。

gulp 2

コピーして転送

var gulp = require('gulp');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('default', gulp.task('html'));

複数のタスクを実行する際には、gulp.seriesと書く

gulp.task('default', gulp.series('html','msg'));

var gulp = require('gulp');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('default', gulp.series('html','img'));

変換して圧縮はwebpackのJS minifyと一緒か。