Month: November 2019

ElementUI 1

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import locale from 'element-ui/lib/locale/lang/ja'

Vue.config.productionTip = false
Vue.use(ElementUI, {locale})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <div class="block">
      <span class="demonstaration">スライダー</span>
      <el-slider v-model="value1"></el-slider>
    </div>

    <div>{{ value1}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      value1: 50,
    }
  },
}
</script>


jQueryでもあるんだろうけど、書き方としてはこういうことね。

Vue.js 5

vue-cliの中身を見ていきましょう

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

あああああああ、react+webpackと同じような仕組みですね。

ん？　これはviewの部分か？
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

コンポーネントのルーティング
src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

気を取り直してkeep going

Vue.js 4

ElementUIとは
=>Vue.jsのコンポーネントライブラリ
Vue CLIを使う？
=>インタラクティブなプロジェクトの作成

$ sudo npm install -g vue-cli
$ vue –version
2.9.6

vue init template project-name　でプロジェクトを作成する

$ vue init webpack test

? Project name test
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

vue-cli · Generated “test”.

$ npm run dev
Your application is running here: http://localhost:8080

なに？表示されない？
/config/index.jsのhostを編集

host: '192.168.34.10', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

ほう

Vue.js 3

(function(){
	'use strict';

	var likeComponent = Vue.extend({
		template : '<button>like</button>'
	});

	var app = new Vue({
		el: '#app',
		components: {
			'like-component': likeComponent
		}
	});
})();

(function(){
	'use strict';

	var likeComponent = Vue.extend({
		data: function(){
			return {
				count: 0
			}
		},
		template : '<button @click="countUp">like {{ count }}</button>',
		methods: {
			countUp: function(){
				this.count++;
			}
		}
	});

	var app = new Vue({
		el: '#app',
		components: {
			'like-component': likeComponent
		}
	});
})();

(function(){
	'use strict';

	var likeComponent = Vue.extend({
		props: {
			message: {
				type: String,
				default: 'Like'
			}
		},
		data: function(){
			return {
				count: 0
			}
		},
		template : '<button @click="countUp">{{ message }} {{ count }}</button>',
		methods: {
			countUp: function(){
				this.count++;
			}
		}
	});

	var app = new Vue({
		el: '#app',
		components: {
			'like-component': likeComponent
		}
	});
})();

(function(){
	'use strict';

	var likeComponent = Vue.extend({
		props: {
			message: {
				type: String,
				default: 'Like'
			}
		},
		data: function(){
			return {
				count: 0
			}
		},
		template : '<button @click="countUp">{{ message }} {{ count }}</button>',
		methods: {
			countUp: function(){
				this.count++;
				this.$emit('increment');
			}
		}
	});

	var app = new Vue({
		el: '#app',
		components: {
			'like-component': likeComponent
		},
		data: {
			total: 0
		},
		methods: {
			incrementTotal: function(){
				this.total++;
			}
		}
	});
})();

Vue.js 2

<p>Hello {{ name.toUpperCase() }}</p>
		<p><input type="text" v-model="name"></p>

(function(){
	'use strict';

	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos:[
				'task1',
				'task2',
				'task3'
			]

		},
		methods: {
			addItem: function(){
				// e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			}
		}
	});
})();

<div id="app" class="container">
		<h1>My Todos</h1>
		<ul>
			<li v-for="(todo, index) in todos">
			{{ todo }}
			<span @click="deleteItem(index)" class="command">[x]</span>
		</li>
		</ul>
		<form @submit.prevent="addItem">
			<input type="text" v-model="newItem">
			<input type="submit" value="Add">
		</form>
	</div>

(function(){
	'use strict';

	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos:[{
				title: 'task1',
				isDone: false
			},{
				title: 'task2',
				isDone: false
			},{
				title: 'task3',
				isDone: true
			}]

		},
		methods: {
			addItem: function(){
				var item = {
					title: this.newItem,
					isDone: false
				};
				this.todos.push(item);
				this.newItem = '';
			},
			deleteItem: function(index){
				// e.preventDefault();
				if(confirm('are you shure')){
					this.todos.splice(index, 1);
				}
				
			}
		}

	});
})();

computed: {
			remaining: function(){
				var items = this.todos.filter(function(todo){
					return !todo.isDone;
				});
				return items.length;
			}
		}

(function(){
	'use strict';

	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos:[]
		},
		watch: {
			todos: {
				handler: function(){
					localStorage.setItem('todos', JSON.stringify(this.todos));
				},
				deep: true
			}
		},
		mounted: function(){
			this.todos = JSON.parse(localStorage.getItem('todos')) || [];
		},
		methods: {
			addItem: function(){
				var item = {
					title: this.newItem,
					isDone: false
				};
				this.todos.push(item);
				this.newItem = '';
			},
			deleteItem: function(index){
				// e.preventDefault();
				if(confirm('are you shure')){
					this.todos.splice(index, 1);
				}
				
			},
			purge: function(){
				if(!confirm('delete finished')){
					return;
				}
				this.todos = this.remaining;
				
			}
		},
		computed: {
			remaining: function(){
				return this.todos.filter(function(todo){
					return !todo.isDone;
				});
			}
		}

	});
})();

Vue.js 1

Vue.jsとは？
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク
双方向データバインディング
web:https://jp.vuejs.org/v2/guide/index.html
-> 「はじめに」のdemoを見ると、フレームワークとしてはAnglarJSに凄く似ているように見える

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link ref="stylesheet" src="css/styles.css">
</head>
<body>
	<div id="app">
		<p>Hello {{ name }}</p>
	</div>


	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

(function(){
	'use strict';

	var vm = new Vue({
		el: '#app',
		data: {
			name: 'yoshi'
		}
	});
})();

anglarの場合は、inputをそのままdomに書いていたけど、vueはjs側で記述する必要がありそうですね。

TypeScript 3

class User {
	constructor(private _name: string){
	}

	public sayHi(): void {
		console.log("hi i am" + this._name);
	}
	get name(){
		return this._name;
	}
	set name(newValue: string){
		this._name = newValue;
	}
}

var tom = new User("Tom");
console.log(tom.name);
tom.sayHi();
console.log(tom.name);
tom.sayHi();

class User {
	constructor(protected _name: string){
	}

	public sayHi(): void {
		console.log("hi i am" + this._name);
	}
}

class AdminUser extends User {
	private _age: number;
	construtor (_name: string, _age: number){
		super(_name);
		this._age = _age;
	}
	public sayHi(): void {
		console.log("my age: " + this._age);
		console.log("my name: " + this._name);
		super.sayHi();
	}
}

var bob = new AdminUser("Bob", 23);
bob.sayHi();

class User {
	name: string;
	constructor(name: string){
		this.name = name;
		User.count++;
	}
	sayHi(): void {
		console.log("hi! i am" + this.name);
	}
	static count: number = 0;
}

var tom = new User("Tom");
var bob = new User("Bob");
console.log(User.count);

// interface
interface Result{
	a: number;
	b: number
}

function getTotal(result: Result){
	return result.a + result.b;
}

var result = {
	a: 32,
	b: 55
};

console.log(getTotal(result));

// interface
interface SpringResult {
	a: number;
}
interface FallResult {
	b: number;
}
interface FinalResult extends SpringResult, FallResult{
	final: number;
}


function getTotal(result: FinalResult){
	return result.a + result.b + result.final;
}

var result = {
	a: 32,
	b: 55,
	final: 67
};

console.log(getTotal(result));

interface GameUser{
	socre: number;
	showScore(): void;
}

class User implements GameUser {
	name: string;
	score : number = 0;
	constructor(name: string){
		this.name = name;
	}
	sayHi(): void {
		console.log("hi, i am" + this.name);
	}
	showSchore(): void {
		console.log("score" + this.score);
	}
}

// generics

function getArray<T>(value: T): T[]{
	return [value, value, value];
}

console.log(getArray<number>(3))

class MyData<T>{
	constructor(public value: T){}
	getArray(): T[]{
		return [this.value, this.value, this.value];
	}
}
var v1 = new MyData<string>("hello");
console.log(v1.getArray());
var v2 = new MyData<number>(234);
console.log(v2.getArray());

// 内部モジュール

module UserModule {
	export var name = "sato";
	export moudle AddressModule {
		export var zip = "111-1111";
	}
}
console.log(UserModule.name);
console.log(UserModule.AddressModule.zip);

// 外部モジュール

import User = require("./user_commonjs")
console.log(User.name);

[vagrant@localhost typescript]$ tsc main.ts -m commonjs

TypeScript 2

web:https://www.typescriptlang.org/

typescriptはtsとjsを共存して書ける
main.ts

class User {
	
}
console.log("hello world");

main.js

var User = /** @class */ (function () {
    function User() {
    }
    return User;
}());
console.log("hello world");

変数の後にコロンを入れて型を宣言する

var x: number = 10;
x = "hello";

// number, string, boolean, any
var i: number;
var i = 10; // i:number 型推論

var x; // var x:any

var results: number[]; // 配列の宣言
results = [10, 5, 3];

列挙型

// 列挙型
enum Signal {
	Red = 0,
	Blue = 1,
	Yello = 2
}
var result: Signal;
console.log(Signal[2]);

// 列挙型
enum Signal {
	Red,
	Blue = 3,
	Yello
}
var result: Signal;
console.log(Signal[3]);

enum Signal {
	Green = 6
}

拡張もできる

関数
型制限を間違えるとコンパイル時にエラーになる

function add(a:number, b:number) : number{
	return a + b;
}
console.log(add(5, 3));

function add(a:number, b:number) : number{
	if(b){
		return a + b;
	} else {
		return a + a;
	}
}

関数式

var add = function(a: number, b: number){
	return a + b;
}

var add = (a: number, b: number): number =>{
	return a + b;
}

オーバーロード

function add(a: number, b: number): number; // シグネチャ
function add(a: string, b: string): string;

function add(a: any, b: any): any {
	if(typeof a === "string" && typeof b === "string"){
		return a + " " + b;
	}
	return a + b;
}

class

class User {
	public name: string;

	constructor(name: strin){
		this.name = name;
	}

	sayHi(): void {
		console.log("hi i am" + this.name);
	}
}

var tom = new User("Tom");

TypeScript 1

TypeScriptとは？
– Microsoftによって開発されたJavaScript拡張言語
– 静的型付クラスベースオブジェクト言語
– AngularJSもTypeScript推奨
– TypeScript作者はC#の制作者(マジかよ)

JSでの大規模開発向けか？
TypeScriptの求人を眺めているとロジック実装が多そうではある

$ sudo npm install -g typescript
$ tsc -v
Version 3.7.2

hello.ts

class test{
	constructor(public Text: string){}

	helloShow()
	{
		return this.Text;
	}
}

var msgStr = new test("Hello World!");
document.body.innerHTML = msgStr.helloShow();

[vagrant@localhost typescript]$ tsc hello.ts
[vagrant@localhost typescript]$ ls
hello.js hello.ts node_modules package-lock.json

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
<script src="hello.js"></script>
</body>
</html>

BEMとは

BEMとは
– フロントエンドの設計方法
– Block、Element、Modifier
– 厳格なclass名の命名ルール
https://en.bem.info/methodology/

背景
– スタイルの優先順位の指定が難しい
– !importantの多用
– パーツを別の場所に流用すると表示が崩れる
– 制作者本人しかわからないclass名

制作ボリュームが膨大になった時、全体像を誰も理解できないってのはよくありますね。
特に、長いサービスだと、前任者が全員退職して、知っている人がいないとか。

BEMではパーツをBlockと呼ぶ
Blockはid属性ではなく、classを使う
※idは1ページ1回、classは重複利用可能
Blockは入れ子にしない

ElementはBlockの構成要素
Elementのclass名はblockの構成要素名を入れる

.search
.search__input
.search__button


Modiferは既存のBlockやElementと似た物を作りたいとき

<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

BEMでは、block, element, modiferで一貫したセパレーター(_)を使う

modife: Block_key_value
単語はハイフン(-)もしくはキャメルケースなど

で、BEMはどれ位使われているかというと、50%くらい
50%といえば、かなりの割合ですなー