[TypeScript] Vue.jsでVuexを使わないでstate管理をしたい

2018/01/27

こんにちは。きんくまです。

前回 Vue.js+TypeScriptのパターンを書きました。
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい -> 成功した

今回は、「Vuexを使わないでstate管理をしたい!」です。

Vuexは、fluxパターンのReact向け実装のReduxをVue向けに作ったものです。
>> What is Vuex?

で、Vueを使った時の状態管理の定番みたいに扱われています。

ただ、ReduxもVuexもチュートリアルをやったり、実際にそれを使って書かれたソースを読んでみたのですが、どうにも好きになれませんでした、、。好きな方がいたらすみません。
理由としてはいくつかあるのですが、一番の理由は冗長なこと。後からソースを追うのに関係ファイルが増えすぎること。
たぶん数学的なのかプログラム的にはとても素晴らしいライブラリだと思うのですが、私にはオーバースペックでした。
で、普通のクラスでStoreを作って状態管理をしたくなりました。

自前でやるとき、fluxパターンの肝となるのは、

1. イベントの方向性
viewからイベント -> api -> store -> view更新

2. storeの外でstateを操作しない
(例えばcomponent内で直接いじるのはNGで、store内に操作メソッドを作る)

だと思いました。なのでこれを守れば大丈夫なのではないかと。

※2018/01/31 クラス名を変更したり、stateのアクセス方法をgetter,setterに変更しました

クラスでStore作って状態管理

いろいろと試してみて、失敗ばかりだったのですが、公式ドキュメントに載っている方法でうまくいきました。
>> State Management

できたもの

Storeクラス

Storeクラスです。Modelのルートになります。
newしたインスタンスをexportしているので、どこからでもアクセス可能なのですが、基本は親コンポーネントからpropsで子供コンポーネントに渡していく方が良いかと思います。

countプロパティを保持しているだけで特別なことはしていません。

Store.ts

import Count from "./Count";

export class Store {
    count:Count = new Count();

    constructor(){
    }
}

const store = new Store();
export default store;

この投稿の続きを読む »

LINEで送る
Pocket

[TypeScript] Vue.jsをTypeScriptで使ってみたい -> 成功した

2018/01/27

こんにちは。きんくまです。

ちょっと前にVue.jsをTypeScriptで使うのを試してみたら、うまくいったのでメモです。

実は今までに何度か挑戦してみているのですが、理想の形になっていなかったのでダメでした。
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい2

ところがそれから、Vue.jsもTypeScriptもバージョンアップしてうまくいくようになっていました!

ソースはgithubにアップしました。
>> KinkumaDesign/vue-ts-counter

やりたいこと

・コンポーネントごとにファイルを分けたい
・TypeScriptを使いたい
・SCSSを使いたい
・コンポーネントの中でも、.vue / .scss / .ts ファイルに分割したい

という感じです。

あと、TypeScriptの場合は ES6のような書き方のパターンと、デコレータを使ってclassを使うパターンがあります。
ここは迷うところなのですが、ES6のようなパターンにすることにしました。

参考
>> Microsoft/TypeScript-Vue-Starter

理由としては、デコレータパターンだと微妙に@Componentとclass内にプロパティが分割しちゃったりするのと、ES6パターンの方が他の人に引き継ぎやすいという感じです。このあたりは好みなので、気にしないでください。

そんな感じです。

LINEで送る
Pocket

[日記] 2018年 あけましておめでとうございます

2018/01/4

こんにちは。きんくまです。
あけましておめでとうございます。

冬のオリンピックの年ということで、スキーをしている犬を描いてみました。

フリーランスになって10年経ちました

フリーランスになってから、丸10年経っていたみたいです。
なんだか早いです。

最近こんな本を読みました。

「作曲・編曲・作詞でプロになりたい人が 成功する方法 挫折する理由」

私が作曲家になりたいわけではないのですが、興味があったので。

それで、この本でこんなことが書いてありました。(他にもいろいろと書いてあって面白かった)

・自分を更新していく柔軟性をもつ
・世の中の流行っているものをまずは味わう(聴く・観る・食べる・読む・体験する等々)

たぶん自分の本当の芯となるものは無くしちゃいけないし、無くせないものだと思います。
(消そうとしてもにじみでてしまうものが、個性というのかなと)
でも、かたくなに今の自分を守るばっかりで、新しいことを受け入れないのはダメだよ。
味わった上で、好き嫌いを言って、取り入れるか取り入れないのは自由。
まずはどうしてそれが流行っているのか、体験して考察してみよう。

という感じかなと思いました。

プログラマーという職業にあてはめてみるとこういう感じかな。

1. 新しい技術が流行る
2. 試してみる
3. どこがスゴイのか、どうして流行っているのか考える(好き嫌いは別)

2の試してみるタイミングは人それぞれだと思います。興味の度合いやその時の時間の有無もあると思います。
新しいものを見つけた瞬間に片っ端から試してみたり、よく見かけて興味があるからやってみたり、無視できないほど広まっているからやってみたり、案件で使うことになったからやってみたり。

共通点としては、ともかくやってみるってことですね。

なんでこんなこと書いたかっていうと、長く職業プログラマーをやっていたいからです。
これまでの経験もあるので、古い技術のまま実装することもできるけど、やっぱり新しいことも少しずつでも取り入れていきたいなと。
一応これまでも意識してやってきたつもりですが、気持ちをひきしめてやっていこうと。

私の場合、受託の案件の業界が教育とか保険だったりすることが多く、ちょっと古めの環境でも動かさないといけなくて、最新の技術というよりは、ちょっと枯れてきたぐらいのものを使うことが多いです。
技術をチェックするときも、どのバージョンのOSやブラウザで動くのかをまずチェックします。
でも今すぐには使わないとしても、触ってみるのは大事かなと。直接触って動かさなかったしてもAPIを眺めたりするだけでもよいかもしれないですね。

というわけで、特にまとまりがないんですが、こんな感じで今年もやっていきたいと思っております。
よろしくお願いします。

LINEで送る
Pocket

[AS3 | Excel] ExcelのRGBの計算方法はAnimate(Flash)と違ってたよ

2017/12/28

こんにちは。きんくまです。

もう年末ですね。

さて、今回はExcelのRGBの計算方法についてです。誰トクなのかわからない情報なのですが、誰かの役に立つかもしれないので、、、。

ExcelのVBAでセルに色を塗るときに RGBを使って

Cells(1, 1).Interior.Color = RGB(255, 100, 30)

とかってできます。それで、RGBを使わずに数値に置き換えることも可能です。
ロング型の整数を入れてあげれば良いみたいです。ここではテキストをロング型に変換して設定しています。

'値は上のとイコールじゃないです
Cells(1, 1).Interior.Color = CLng("123456")

それで、AS3とかJavaScriptだとRGBを整数に変換するときはこうなると思います。

var red:int = 200;
var green:int = 100;
var blue:int = 30;
var rgb:int = red * 256 * 256 + green * 256 + blue;
//ビット演算を使うとこうゆう風にも書ける
var rgb:int = red < < 16 | green << 8 | blue;

でも、調べてみるとExcelのRGBは計算方法が違っていました。
青(B)が16ビット分あがって、赤(R)はそのままなんですね。

var rgb:int = red + green * 256 + blue * 256 * 256;
//ビット演算を使うとこうゆう風にも書ける
var rgb:int = red | green < < 8 | blue << 16;

ビットマップデータBitmapDataからExcelのRGB用のCSVテキストに変換する

この投稿の続きを読む »

LINEで送る
Pocket

[JavaScript] JavaScriptで円周率を計算したい!

2017/12/23

こんにちは。きんくまです。

今回のお題は「JavaScriptで円周率を計算したい!」です。

ネットで調べてみると円周率計算には様々な方法があることがわかりました。

例)
>> 円周率 – Wikipedia

ガウス=ルジャンドルのアルゴリズム

それで、今回はいろいろと調べた結果、実装方法が簡単でパフォーマンスもそこそこ出る「ガウス=ルジャンドルのアルゴリズム」を使ってみることにしました。

>> ガウス=ルジャンドルのアルゴリズム – Wikipedia

見ていただくとわかると思うのですが、非常に計算式が簡単です。

ただ、これを普通に実装するだけだと何回ステップ数を重ねても14桁ぐらいにしかなりません!
はっきりと理由はわからないのですが、たぶんJavaScriptのNumberの精度の問題なんじゃないかと思います。

そこで計算ライブラリを使います。

この投稿の続きを読む »

LINEで送る
Pocket

[iOS] Swift4 で追加された Codable で、 ?とか配列とかBoolも含んだJSONを読み書きしたい

2017/11/24

こんにちは。きんくまです。

ジッピー電卓の中で、計算履歴の保存などにJSONファイルを利用しています。

これまで使っていたライブラリがあったのですが、Swift4からはネイティブでJSONが簡単に扱えるようになったみたいなので、そちらでコードを書き直しました。(いま申請中)

Swift4のJSONについて

どういうものかは下の参考サイトを見ていただくとすぐわかります。

参考)
>> [Swift 4] SwiftyJSONを使わずにシンプルにJSONをデータ構造化する
>> Swift4 CodableでJSONが扱いやすくなる? – Qiita
>> Swift 4からFoundationに採用されるCodableプロトコルに感動した #wwdc2017
>> Swift 4でJSONの扱い – Galapagos Engineering Blog

で、ちゃんと記事を読み込んでいないせいかもしれないのですが、Optionalの? とか、 配列だとか、Boolのときにうまくできなかったので、それの対応方法を書こうと思いました。

こんな感じのJSONを読み込みたいです。

    //全部あるパターン
    let sampleJSON1 = """
{
    "name":"株式会社サンプルジェイソン",
    "address":"東京都サンプル区",
    "employees":[
        {
            "name":"田中さとし",
            "age":28,
            "is_retired":false
        },
        {
            "name":"さくらい太郎",
            "age":48,
            "is_retired":false
        },
        {
            "name":"元ぶちょう",
            "age":83,
            "is_retired":true
        },
    ]
}
"""

この投稿の続きを読む »

LINEで送る
Pocket

[iOS] swiftでクロージャーに@escapingをつける場合を調べてみた

2017/10/18

こんにちは。きんくまです。

自分でクロージャーを使ったメソッドを作りたかったときに、@escapingのことをよくわからなかったので調べたメモです。

参考サイト
>> The Swift Programming Language (Swift 4): Closures
>> What Do @escaping and @noescape Mean In Swift 3

@escapingしない場合

まず、@escapingしないクロージャーの場合を作ってみました。

class MathUtil{
    var num1:Int
    var num2:Int
    
    init(num1:Int, num2:Int){
        self.num1 = num1
        self.num2 = num2
    }
    
    //クロージャーの返り値を10倍する
    func tenTimes(equation:((Int, Int)->Int)) -> Int {
        return equation(num1, num2) * 10
    }
}

class ViewController: UIViewController {
    
    var num3:Int = 2
    var util:MathUtil? = MathUtil(num1: 5, num2: 3)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        test_tenTimes1()
        test_tenTimes2()
        test_tenTimes3()
    }

    func test_tenTimes1(){
        guard let util = self.util else { return }
        let result = util.tenTimes { (num1:Int, num2:Int) -> Int in
            return num1 + num2
        }
        print("test_tenTimes1 result = \(result)") //result = 80
    }
    
    func test_tenTimes2(){
        guard let util = self.util else { return }
        let result = util.tenTimes { (num1:Int, num2:Int) -> Int in
            return num1 - num2
        }
        print("test_tenTimes2 result = \(result)") //result = 20
    }
    
    func test_tenTimes3(){
        guard let util = self.util else { return }
        //selfをつけていないことに注目
        let result = util.tenTimes { (num1:Int, num2:Int) -> Int in
            return num1 + num2 + num3
        }
        print("test_tenTimes3 result = \(result)") //result = 100
    }
}

MathUtilというクラスの中で、クロージャーを引数にとるメソッドを作りました。
tenTimes()は、引数のクロージャーの返り値を10倍するメソッドです。

MathUtilを使うのは、実際の場面でありそうなViewControllerが使うことにしました。

この投稿の続きを読む »

LINEで送る
Pocket

ページトップへ戻る