2018-09-27

Vue.js入門を読んでて

基本的にはすごく良い本じゃないかなと思うんですが

読むのが苦手な人を突き放すような書かれ方があってイラっとする箇所があります。

例えば

5.4.3 の createElement関数のあたり

第二引数の呼び方が毎回違う

オプションを含むデータオブジェクト
属性オブジェクト
オプション
データオブジェクト

第二引数について書いてあるのかどうかを判断できない

同じ文脈の中に「省略可能」って意味（だと思う）のオプションというワードも出てきて

これはすでに知っている人じゃないとすごく伝わりにくいと感じました。

それとは別に第一引数の説明も「非同期にそれらを解決する関数」について書かれているのか書かれてないのか

実際に「非同期にそれらを解決する関数」がどういうものなのか知らない人からするとわからない。

書かれてない気がするんだけど・・・別の呼び名で実は説明されているのかもしれない。わからない。。。

読むのが下手な私には難しい

2017-05-31

好きなボーカリストさん

歌

なんとなく好きor尊敬or神な人を忘れないように書き出しておこうと思った

skin(スカンク・アナンシーの元ボーカル）　歌声が全てをねじ伏せる。なんだか大好き
angraの初代ボーカル　アンドレ・マトス
マイクベゼーラ
メタリカのジェイムス。声が好きすぎる。シャウトばっかり目立ってるみたいだけど単純に歌が上手い
稲葉浩志
kokia　調和という曲のライブ映像がやばすぎる。神なんぞ信じてないけどこの人に神のお告げとか言われたら信じない自信がない。
玉置浩二
宇多田ヒカル　デビュー当時はブレスが日本人っぽくなくて好きだなと。休業前のライブ音源はやばかった。歌がキレキレ。
槇原敬之　ザ・ミックスボイス！
平井堅　ザ・ミックスボイス２！
秦基博（TVの生歌は疲れが出てる事あるけど）
いきものがかりの人
ドリカムの吉田さん
ニッケルバックの人

映像なし。声がかっこよすぎて曲が頭に入ってこない

2017-05-30

Vue2系とTypescript2系

本格的にTypescriptを勉強したいし、何か作りたいんだけど、何をどう初めていいのかよくわからない今日この頃。

vue２系
typescript２系
webpack ２系
nodeは確か７系で検証
.vueファイルを使っとこう
sassを使っとこう
vuexはあとにしとこう
vue-routerはいらないかな
SSRっていまいち何がしたいのかわかってない

ってな感じで雛形ってみた。参考にさせてもらったのは

Vue.jsとTypeScript - Qiita

と

GitHub - Microsoft/TypeScript-Vue-Starter: A starter template for TypeScript and Vue with a detailed README describing how to use the two together.

自分で色々触りながら理解を深めるための雛形としてメモを残そうと思います。

はい、完全に自分用。WEBに漂うゴミっす。

setup step

1. `yarn init`

2. add lib to dev

    yarn add -D css-loader extract-text-webpack-plugin html-webpack-plugin node-sass sass-loader ts-loader typescript
    vue-template-compiler vue-template-loader webpack tslint-language-service vue-ts-plugin vue-loader file-loader url-loader

3. add lib

    yarn add tslib vue vue-class-component vue-property-decorator vuex vuex-class

4. create template.html

        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <title>Vue Type 君</title>
            </head>
            <body>
                <div id="app"></div>
            </body>
        </html>

5. create tsconfig.json

    {
        "compilerOptions": {
            "module": "es2015",
            "moduleResolution": "node",
            "target": "es5",
            "noImplicitAny": true,
            "sourceMap": true,
            "strictNullChecks": true,
            "typeRoots": [
                "./node_modules/@types"
            ],
            "lib": [
                "dom",
                "es5",
                "es2015"
            ],
            "noEmitHelpers": true,
            "experimentalDecorators": true,
            "importHelpers": true,
            "allowSyntheticDefaultImports": true,
            "emitDecoratorMetadata": true,
            "plugins": [
                {
                    "name": "tslint-language-service"
                },
                {
                    "name": "vue-ts-plugin"
                }
            ]
        },
        "include": [
            "./src/**/*"
        ]
    }

6. create tslint.json

    {
        "defaultSeverity": "error",
        "extends": [
            "tslint:recommended"
        ],
        "jsRules": {},
        "rules": {
            "quotemark": [
                true,
                "single"
            ],
            "indent": [
                true
            ],
            "interface-name": [
                false
            ],
            "arrow-parens": false,
            // Pending fix for shorthand property names.
            "object-literal-sort-keys": false
        },
        "rulesDirectory": []
    }

7. create webpack.config.js

    var path = require("path");
    var webpack = require("webpack");
    const HTMLWebpackPlugin = require('html-webpack-plugin')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')

    module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "build.js"
    },
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
            options: {
            appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            test: /\.vue$/,
            loader: "vue-loader",
            options: {
            loaders: {
                scss: ExtractTextPlugin.extract({
                use: ['css-loader', 'sass-loader'],
                fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
                })
            }
            // other vue-loader options go here
            }
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: "file-loader?name=assets/[name].[ext]"
        }
        ]
    },
    resolve: {
        extensions: [".ts", ".js", ".vue", ".json"],
        alias: {
        vue$: "vue/dist/vue.esm.js"
        }
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: "#eval-source-map",
    plugins: [
        new HTMLWebpackPlugin({ template: './template.html' }),
        new ExtractTextPlugin('styles.css')
    ]  
    };

    if (process.env.NODE_ENV === "production") {
    module.exports.devtool = "#source-map";
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
        "process.env": {
            NODE_ENV: '"production"'
        }
        }),
        new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
        }),
        new webpack.LoaderOptionsPlugin({
        minimize: true
        })
    ]);
    }

8. create ./src and ./dist directory

9. create index.ts

    import Vue from "vue";
    import App from "./components/App.vue";

    let v = new Vue({
        el: "#app",
        render: h => h(App)
    });

10. create components/App.vue

    <template>
        <div>
            Name:
            <input v-model="name" type="text">
            <hello-component :name="name" :initialEnthusiasm="5" />
        </div>
    </template>
    <script lang="ts">
    import Vue from "vue";
    import Component from 'vue-class-component'
    import { Prop } from 'vue-property-decorator'

    import HelloComponent from "./Hello.vue";

    @Component<App>({
        components: {
            HelloComponent
        }
    })
    export default class App extends Vue {
        name = 'わたしだ'
    }

    </script>
    <style lang="scss">
    @import '../assets/style/main.scss';
    </style>

11. create components/Hello.vue

    <!-- src/components/Hello.vue -->
    <template>
        <div>
            <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
            <button @click="decrement">-</button>
            <button @click="increment">+</button>
        </div>
    </template>

    <script lang="ts">
    import Vue from "vue";
    import Component from 'vue-class-component'
    import { Prop } from 'vue-property-decorator'

    @Component<Hello>({
    })
    export default class Hello extends Vue {
        @Prop() readonly name: string;    
        @Prop() readonly initialEnthusiasm: number;

        enthusiasm = this.initialEnthusiasm;

        increment() { this.enthusiasm++; };

        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        };

        get exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }

    </script>

    <style lang="scss">
    .greeting {
        font-size: 20px;
    }
    </style>

12. create assets/style/main.scss

    body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url("../assets/images/logo.png");
    }

13. create assets/images/logo.png

exec webpack command. check dist directory.

2017-02-08

Vueのコンポーネントをテストするのにmockを使いたい時

sinonの使い方を一生懸命調べようとしてたんだけどinject-loaderを使えばいいのね。

へー！！

Testing with Mocks · GitBook

2016-11-02

Swift2とSwift3の違いメモ

ほんきで学ぶSwift+iOSアプリ開発入門　写経中メモ

この本はSwift2で書かれているのでSwift3の環境だとそのまま動かない。

URLを使って画像を表示する

Swift2

let url = NSURL(string: "http://hogehoge.png")!
let imageData:NSData = NSData(contentsOfURL: url!)!
let image2 = UIImage(data:imageData);

Swift3

let url = URL(string: "http://hogehoge.png")!
let imageData = try? Data(contentsOf: url)
let image2 = UIImage(data:imageData!)

NSURLがURL、NSDataがDataに変わった模様。そしてtry-catch使わないと怒られるようになった模様

CGRectMakeが無くなっている

// CGRectMake関数を用意してSwift2と同じように呼べるようにする
func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
    return CGRect(x: x, y: y, width: width, height: height)
}
var button = UIButton(frame: CGRectMake(0,0,100,50))

// CGRectを使う。
var button2 = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))

XCPlaygroundが無くなっている

Swift3

import UIKit
import PlaygroundSupport

let datePicker = UIDatePicker()
datePicker.datePickerMode = UIDatePickerMode.date
datePicker.backgroundColor = UIColor.white
PlaygroundPage.current.liveView = datePicker

2016-10-25

Vue2 + TypeScript2 を使ったサンプル

javascript

やりたいこと

vue.js2ではTypeScriptに対応したらしいのでどんなもんなのかを試したい。

試すものたち

vue.js 2.0.3
vuex
typescript 2.0.3
vue-ts-loader
av-ts
kilimanjaro

参考サイト

http://herringtondarkholme.github.io/2016/10/03/vue2-ts2/

作ってく

プロジェクトの作成

mkdir vue-ts-test
cd vue-ts-test
npm init -y
npm i -S vue typescript

ここまででpackage.jsonとnode_modulesが出来ている

STEP1:テンプレートのindex.htmlとちっちゃいVue

index.html

<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="app.js"></script>

app.ts

declare var Vue: any
new Vue({
    el: '#app',
    render(h) {
        return h('h1', 'hello world')
    }
})

app.tsをコンパイルする

./node_modules/.bin/tsc app.ts

ブラウザでindex.htmlを開き"hello world"が表示されることを確認する

STEP2: webpack使って.vueファイルでコンポーネントを作る

npm i -D webpack vue-loader css-loader
npm i -D vue-ts-loader

webpack.config.js

module.exports = {
    entry: { app: './app.ts', },
    output: { filename: 'app.js' },

    // resolve TypeScript and Vue file
    resolve: {
        extensions: ['', '.ts', '.vue', '.js']
    },

    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue' },
            { test: /\.ts$/, loader: 'vue-ts' }
        ],
    },
    vue: {
        // instruct vue-loader to load TypeScript
        loaders: { js: 'vue-ts-loader', },
        // make TS' generated code cooperate with vue-loader
        esModule: true
    },
}

app.vue

<template>
<h1 @click="hello">hello world</h1>
</template>

<script>
export default {
    methods: {
        // type annotation!
        hello(): void {
            alert('hello world')
        }
    }
}
</script>

app.ts

declare var require: any

import Vue = require('vue')
var App = require('./app.vue').default

new Vue({
    el: '#app',
    components: { App },
    render: h => h('app')
})

ここでwebpackコマンドでコンパイルしてindex.htmlを表示したときにhello worldをクリックしてアラートが出ればOK

STEP3:もっと型を

npm i -S av-ts

app.vueを改造

<template>
<h1 @click="hello">hello {{name}}</h1>
</template>

<script>
// av-tsからVue関連のインポート
import {Vue, Component} from 'av-ts'

@Component
export default class App extends Vue {
name = 'kuroko'
// type annotation!
hello(): void {
    alert('hello ' + this.name)
}
}
</script>

ここでwebpackコマンドを叩いて動作確認

STEP4:Vuex導入

npm i -S kilimanjaro

store.tsの追加

import { create } from 'kilimanjaro'

var store = 
create({count: 0})
.getter('count', s => s.count)
.mutation('increment', s => () => s.count++)
.mutation('decrement', s => () => s.count--)
.done()

export default store

app.vue修正

<template>
<h1 @click="hello">hello {{name}} now count is {{count}}
<button @click.stop="add">+</button>
<button @click.stop="sub">-</button>
</h1>
</template>

<script>
// av-tsからVue関連のインポート
import {Vue, Component} from 'av-ts'
import {Vuex, getHelper} from 'kilimanjaro'
import store from './store'

const { getters, commit } = getHelper(store)

@Component
export default class App extends Vue {
@Vuex count: number = getters('count')
@Vuex add:Function = commit('increment')
@Vuex sub:Function = commit('decrement')
name = 'kuroko'
// type annotation!
hello(): void {
    alert('hello ' + this.name)
}
}
</script>

webpackコマンドを叩いて動作を確認する。

webpackコマンドを叩くとerror TS2304: Cannot find name 'Promise'.というエラーがいくつがでる。

単純にこのエラーを消したい場合はtsconfig.jsonのcompilerOptions.targetをes6に変えればエラーは出なくなる。

しかし、それが根本的な解決なのかはわからない。

次に確認したいこと

vue-cliのwebpack相当の構成でnpm run devでデバッグしながらリアルタイムにプレビューできるようにするにはどうすればよいのかを調べたい。

が・・・ちょっとvue-cliで生成したプロジェクトを使って改造していくのは僕には歩幅が大きすぎて挫折したので小さくすすめる。

フォルダ構成を./srcとか./src/componentsとか./src/storeとかにわけれるようにしたい
sass使えるようにしたい
TypeScript -> ES5じゃなくてTypeScript -> ES6 (babelで) -> ES5にしたい。TypeScriptでES6チックにかければ不要か？
propなど今回使用していないvueの機能はどうやって書くのかを調べたい

今回のサンプルを作ってみてまだわからないこと

webpack.config.jsにあるvue:の指定は一体なんなのか？
vuexのgitterとかあんまり馴染みがない（ただの勉強不足）
tsconfig.jsonの中身全般。そもそもTypeScriptに関する知識が殆ど無い。

2016-10-20

最近やったことやら色々メモ

memo

haskell挫折中。タイミングを見てまた集中して学習したい。
やりたいこととに対してSpring batchはtoo much だったので素のSpringを使うことにした。
Springのトランザクション周り（requires_newしたときのテストの書き方とか）いろいろ面倒だった。
ラムダ乱用は良くないと思うけど、まず乱用できるほどラムダの使い方わかってない
Doma2良かった。
Gradleでマルチプロジェクトできたけどプロダクトのバージョン管理とかよくわからん。
githubとgitに関して簡単な操作はできるようになったけどまだあまり理解できていない
java8っぽい書き方をなんとなくわかるようになってきた。がまだまだ。
年内はSwiftやiOS関係の開発についてお勉強することにした。
Dockerをちゃんと理解して開発時のDBとかそのた環境まわりとかをスマートに準備したいなぁ
- Docker for mac発表されてからだいぶ経ったけど全然さわれてないわ
- Docker上にCI環境作っておいてgithubにPushしたらテスト動いてくれるようになんないかな
Typescript2がリリースされたけど全然チェックできてないわ
Vue.jsの2が発表リリースされたけど全然チェックできてないわ
軽度肥満から標準体型になったぞー

なんとなく好きor尊敬or神な人を忘れないように書き出しておこうと思った

setup step

1. yarn init

2. add lib to dev

3. add lib

4. create template.html

5. create tsconfig.json

6. create tslint.json

7. create webpack.config.js

8. create ./src and ./dist directory

9. create index.ts

10. create components/App.vue

11. create components/Hello.vue

12. create assets/style/main.scss

13. create assets/images/logo.png

URLを使って画像を表示する

Swift2

Swift3

CGRectMakeが無くなっている

XCPlaygroundが無くなっている

Swift3

やりたいこと

試すものたち

参考サイト

作ってく

プロジェクトの作成

STEP1:テンプレートのindex.htmlとちっちゃいVue

index.html

app.ts

app.tsをコンパイルする

STEP2: webpack使って.vueファイルでコンポーネントを作る

webpack.config.js

app.vue

app.ts

STEP3:もっと型を

app.vueを改造

STEP4:Vuex導入

store.tsの追加

app.vue修正

次に確認したいこと

1. `yarn init`