2018-03-12

はじめてのVue.js

Vue.js

化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。

いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い（データの更新の簡素化、記述量を減らしたい）、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。

※実装した診断コンテンツの仕組みは今度書くつもりです。。。

1. Vue.jsとは？

MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う（双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される）

MVVM

「model」「view」「viewmodel」の略。「model」（データの管理、ビジネスロジック）「view」（ユーザーインターフェース）「viewmodel」（ModelからViewへ出力データを渡す、ViewからModelへ入力データを渡す）

2. Vue.jsを使ってみる

はじめてのVue.jsということで

・どうやって文字を表示させるの？
・どうやってdataを変更させるの？
・どうやってイベント処理を書くの？
・クラスのバインドって？

っていうところを今回はまとめています。

※環境設定などは省略してます。。。

1. Vueオブジェクト

まずは文字を表示させてみます。

VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。 Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。

var 変数 = new Vue({　オプション情報　});

el：値を表示する対象のタグ（Element）を指定。タグのID情報を用意。 data：渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。

これでHello world！という文字が表示される。

【html】
<p id="msg">
    {{ message }}
</P>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！'
    }
});

2. HTML側からVueに値を設定する

HTML側から入力した値をVueオブジェクト側に渡すには？

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="message">
  </div>
</body>

v-model

v-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。

v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。

3. イベントとメソッドの利用

イベント処理の方法

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="txt１">
    <input type="button" v-on:click="doaction" value="click">
  </div>
</body>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！',
      txt1: ''
    },
    methods: {
      doaction: function(){
        var str = this.txt１;
        this.message ='you typed: ' + str + '.';
      } 
    }
});

4. methods

Webページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。

this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。

入力フィールドの値がtxt1にバインド
txt1を取り出すことで、入力フィールドの値が得られる。
その値を加工、messeageに設定
messageに表示される。

5. クラスのバインド

v-bind:class="{クラス名：プロパティ}"

プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。

【html】
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>

【css】
.active{
  color:red;
}

公式ガイドを参考に初歩的なところをまとめています。

jp.vuejs.org

今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。

2018-01-14

npm-scriptsを使った開発環境

npm

いつもgulpを使って開発をしていたのですが、ハマってしまうとなぜかいつも抜け出せなくて開発環境を整理するだけで時間がかかってしまうことがありました。

もっとシンプルな環境が作れないかなあ、と調べていて見つけたのが、npm-scriptを使った開発環境です。

npm scriptsって？

そもそもnpm scriptsって何だろう？と疑問に思ったのでメモ。

npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。

具体的にどういうことなのかというと

【package.json】

"scripts": {
    "start": "npm run server",
    "server": "browser-sync start --server ./ --port 3000 --files \"./**/*.html,./assets/css/style.css,./assets/js/bundle.js\"",
  },

このpackage,jsonの記述を例にすると

$ npm startでサーバーが立ち上がり、ファイルの監視がはじまります。

このようにシェルスクリプトやエイリアスコマンドを「scripts」というフィールド登録できます。

手順

1. $ npm init
2. $ npm install module名
3. package.jsonのscriptsを編集

実行

$ npm run scripts名 でscirptを実行できます。

この例でいうと$npm run serverでserverが実行されます。

serverはbrowser-syncを使ってローカルサーバーを作って、ファイルの変更を監視オートリロードするタスクです。

予約語

npm-scriptsには予約語が4つあります。それらはrunをつけずに実行できます。さっきの例だと$ npm startで serverタスクが動きます。

$ npm start
　appを起動するようなshell scriptのエイリアスとして用いる。
$ npm restart
　appを再起動させるためのshell scriptのエイリアスとして用いる。
$ npm stop
　appを停止させるためのshell scriptのエイリアスとして用いる。
$ npm test
　appをテストするようなshell scriptのエイリアスとして用いる。

npm-scriptのメリット、デメリット

npm-scriptsのメリット、デメリットをまとめてみます。

メリット

シンプルな開発環境
タスクランナー独自のルールを学習しなくて済む
豊富なnode_modulesを直接叩ける

タスクランナーを使うと、タスクランナーの勉強コストがかかってしまったり、タスクランナー用のnode_modulesの開発が止まったりして、詰まってしまうことがあります。

npm-scriptsだと、package.json だけで設定と処理が完結するのでとてもシンプルです。

デメリット

環境依存
可読性が悪くなる

実際に使ってみて、macでは動くのにWindowsでは動かない問題に直面してしまいました。原因はmacだとUnixのコマンドラインで動作、WindowsだとWindowsのコマンドラインで動作するので同じ記述だと動作しなかったのです。。。記述を変えて解決しました。。。

また、多くのタスクを増やそうとすると、可読性が悪くなります。。。

まとめ

お仕事ではまだ使っていないのですが、npm-scriptsを使った開発環境は気に入っています。

案件によってケースバイケースだなあと思い、今年は、 LPを作る時はnpm-script、ページものを作成する時はgulpを使おうかなあ（ejsを使ったり、複数人で開発のため環境依存や可読性が悪いのはやだなと思ったため）と個人的に考えています。

最後に作った環境をあげておきます。

github.com

2018-01-04

2017年と2018年

日記音楽

書こう、書こうと思って2018年になってしまいました。。。

2017年の音楽のこと、本のこと、お仕事のこと、2018年頑張ることをまとめていこうと思います。

音楽のこと

2017年はずっと音楽を聴いていた気がします。出社してPCをつけてイヤホンをつける、退社してエレベーターに乗ったらイヤホンをつける、家に着いたらPCをつけて音楽をかける。

そんな1年でした。

今年たくさん聴いたなあ、と思うアルバムをとりあえず

Healing

In Love With a Ghost
エレクトロニック
¥1528

たしか春くらいにリリースされて（3月？だったかな）、東京で過ごすはじめての春にたくさん聴きました。

Are You Anywhere [12 inch Analog]

アーティスト:Submerse
発売日: 2017/10/20
メディア: LP Record

前の記事でも書いたけどsubmerseは大好きなので、もう一度。

Jersey Devil

アーティスト:Ducktails
発売日: 2017/10/06
メディア: CD

迷ったんだけど、今年の秋はこのアルバムをよく聴いたので。

WILLOWBANK

アーティスト:YUMI ZOUMA
発売日: 2017/10/04
メディア: CD

10月にリリースされたアルバム。たくさん聴いたのは12月です。

その他に今年たくさん聴いた曲たち

Ｂｅｆｏｒｅ　Ｔｏｄａｙ

アーティスト:THE NOVEMBERS ノベンバーズ
発売日: 2017/09/12
メディア: CD

https://itunes.apple.com/jp/album/i-cant-tell-you-how-much-it-hurts/1312972569?uo=4&at=10l8JW&ct=hatenablog

Thursday - Single

Luby Sparks
オルタナティブ
¥255

1 Hour of Relaxing Zelda: Breath of the Wild Music

NieR Automata OST Full Complete 「ニーアオートマタ Original Soundtrack」

ゲームのサントラを今年はたくさん聴いた気がします...
特にゼルダとニーアオートマタのサントラはすごくよかったです...

去年はあまりライブに行かなかったのですが、2018年はいろんなライブに行ってみたいなあ、と思っています。とりあえず、1/6のsubmerse とTeen Dazeのミニライブには行きたいと思っています。（行ければいいのだけれど。）

本のこと

2017年は小説を読む量が減りました。お仕事を変えたこともあると思うのですが、技術書を読むことが増えた気がします。

とりあえず読んだ小説

朝顔の日

作者:高橋弘希
発売日: 2015/07/31
メディア: 単行本

言葉ひとつひとつがとても綺麗でした。

お目出たき人 (新潮文庫)

作者:実篤, 武者小路
発売日: 1999/12/27
メディア: 文庫

池袋にある梟書茶房で。

楽園のカンヴァス (新潮文庫)

作者:原田マハ
発売日: 2014/06/27
メディア: 文庫

ラストの"夢をみたんだ"っていう言葉が印象的でした。

渦森今日子は宇宙に期待しない。（新潮文庫）

作者:最果タヒ
発売日: 2016/08/26
メディア: Kindle版

かわいくてポップな感じがしました。

グレート・ギャツビー (村上春樹翻訳ライブラリー)

作者:スコットフィッツジェラルド
発売日: 2006/11/01
メディア: 単行本（ソフトカバー）

アメリカンドリーム

気になる本、技術書、漫画

[asin:B075JFVLCK:detail]

星の子

作者:今村夏子
発売日: 2017/06/07
メディア: 単行本

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

作者:山本陽平
発売日: 2010/04/08
メディア: 単行本（ソフトカバー）

きちんと読みたい。

Webフロントエンドハイパフォーマンスチューニング

作者:久保田光則
発売日: 2017/05/26
メディア: 単行本（ソフトカバー）

会社に置いてあるので読みたい

モブ子の恋　1巻 (ゼノンコミックス)

作者:田村茜
発売日: 2017/10/20
メディア: Kindle版

七つの大罪（２８） (週刊少年マガジンコミックス)

作者:鈴木央
発売日: 2017/11/17
メディア: Kindle版

毎週気になる...

お仕事のこと

1年間を振り返ってみると、化粧品案件で診断コンテンツを作ったり、大企業のコーポレートサイトを作成したり、 100ページ規模のサイトをcss設計を含めて作成したり、とても充実した一年になりました。

振り返ると土日も家に帰ってからもコード書いてたなあ、っていう印象です。何かを学ぶのに人の倍しないと覚えられないのでほんとうに辛かったのですが、コードを書くことが楽しくて、何か新しいことができた瞬間が嬉しくて、作ったページを先輩が褒めてくれる瞬間が大好きで 1年間頑張れた気がします。

2017年の目標は、フロントエンドエンジニアとして自信を持って名乗れるように技術力をあげていきたいなあ、と漠然と思っています。

ES6をきちんと書けるようになりたい。
React,Vueでwebアプリを作ってみたい。
ReactNativeでアプリを作ってみたい。
サーバーサイドのことも勉強したい。（PHP）
npm scriptを使った開発環境を完成させたい。

漠然としているけれど、今年は難しいことにも挑戦していきたいです。

2018年

2018年新しくはじめたことなのですが、仮想通貨をはじめてみました。怖くてなかなか始められなかったのですが、やっとはじめました。

とりあえずですが、Zaif、coincheck、Binance、Cryptofolioに登録して少額ですがはじめてみました。

2017年は個人的に仮想通貨、決済システムが大きく変化したなあ、という印象です。

去年気になったのが、Payment Request API です。 developers.google.com

ネットで買い物するときにめんどうな住所の入力、クレカ番号の入力が簡単になるみたいです。

なんだか送金システムのニュースだったり、仮想通貨のニュース記事を見ているといつのまにか、紙のお金が本当にただの紙になってしまう日がきてしまうのかなあ、と感じます。

今年は少しずつですが、資産運用もはじめていきたいと思っています。

今年はすてきな思い出がたくさんとできるといいなあ、

2017-12-10

MAMPを使わずにlocalhostを作る

environment

macに標準でインストールされているApacheとPHPを使ってlocalhostを作ったのでメモです。
せんぱいに教えてもらったのと、黒い画面に苦手意識があるので少しずつですが克服したいなあ、と思って練習です。

準備

以下の3つのファイルを編集します。

/etc/apache2/httpd.conf
/etc/hosts
/etc/apache2/extra/httpd-vhosts.conf

手順

1. /etc/apache2/httpd.confの編集

viに慣れたいのでviで編集しました。
ターミナルでこのコマンドを叩きます。
sudo vi /etc/apache2/httpd.conf

1-1.まずバーチャルホストが使えるようにコメントアウトを外します。

160行目付近

#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
↓
LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

499行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

1-2.PHPが使えるようにコメントアウトを外します。

169行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

2. /etc/apache2/extra/httpd-vhosts.confの編集

sudo vi /etc/apache2/extra/httpd-vhosts.confで編集します。

一番下の行に以下を記述します。

<VirtualHost *:80>
    ServerName cidermitaina.localhost

    CustomLog "/private/var/log/apache2/access_log_[projectname]" common
    ErrorLog "/private/var/log/apache2/error_log_[projectname]"

    DocumentRoot "/Users/[name]/[directory]/[projectname].localhost"
    <Directory "/Users/[name]/[directory]/[projectname].localhost/">
        AllowOverride All
        Options FollowSymLinks Indexes
        DirectoryIndex index.php index.html
        Require all granted

        Order Allow,Deny
        Allow from all
    </Directory>
</VirtualHost>

[name],[directory],[projectname]は適宜変更してください。

3./etc/hostsの設定

sudo vi /etc/hosts

以下の記述を追加します。

127.0.0.1 localhost [projectname].localhost

4 Apacheを再起動

httpd.confの文法チェック

sudo apachectl configtest

Apacheを再起動

sudo apachectl restart

5 確認

[projectname].localhostにアクセスしてページが表示されたら成功です。

memo

viに慣れていないのでviで使ったコマンドメモ

i　
→ カーソルの左からインサートモードへ移行

a
→ カーソルの右からインサートモードへ移行

Esc
→ コマンドモードに帰る／インサートモード解除

:q
→ 終了

:wq
→ ファイルに保存して終了

/検索したい文字列 
→ 前方検索

少しずつ黒い画面に慣れよう計画中です。。。
viも少しずつですが、慣れていきたいなあ、と思っています。
（あわあわしながらviでファイルを編集してました。）

2017-11-27

gulp4.0にしました。

gulp

大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。

悩んでたこと

ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。

原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。

そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。

やりたかったこと

gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、

・ run-sequenceを使う方法

・ gulpのバージョンを4.0にあげて'gulp.series'を使う方法が見つかりました。

run-sequence
複数タスクの並列／直列処理が設定できます。

www.npmjs.com

せっかくなのでgulp4.0の勉強も兼ねてバージョンをあげてみることにしました。

gulp v4.0

そもそもgulpのタスクは非同期で実行されるから高速なのかなあ、と勘違いしていたのですが、ドキュメントを読んでみると

If more than one task is listed, Gulp will execute all of them concurrently, that is, as if they had all been listed as dependencies of a single task.

タスクは非同期ではなくて並列で実行されるみたいです。勘違いをしていました。

並列で実行されることを踏まえてgulp4.0の気になった変更点を軽くまとめます。

gulp.series,gulp.parallelで直列/並列の処理
タスクに渡す関数の制約
gulp.taskの引数

その他の変更点は以下で確認してください。。。
https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md

1.gulp.series,gulp.parallel

gulp.seriesでタスクの直列処理、gulp.parallelでタスクの並列処理ができるようになりました。

gulp.series

gulp.task('default', gulp.series('build', 'server'));

buildのタスクが終わってからserverのタスクが動きます。

gulp.parallel

gulp.task('build', gulp.parallel('css', 'js', 'html'));

css,js,htmlのタスクは並列に実行されます。

2.タスクに渡す関数の制約

タスクに渡す関数の制約ができたみたいです。

最後にcallbackを実行する
streamを返す
Promiseを返す
child processを返す
observableを返す

をしないとエラーになってしまいます。

例えば、 sassのタスクですが、

gulp.task("sass", () => {
    gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

この書き方だと

The following tasks did not complete: sass
Did you forget to signal async completion?

こんなエラーが出てしまいます。

そのため非同期タスクにするためにstreamを返すように以下のように変更すると上手くいきました。（returnをつけてあげます）

gulp.task("sass", () => {
    return gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

3.gulp.taskの引数

gulp.taskの引数が最大2つになりました。

gulp v4.0の使い方

1, gulp4.0のインストール

α版なのでローカルにgulp4.0をインストールします。

npm install gulpjs/gulp#4.0 -D

2, npm scriptにgulpを登録

ローカルにインストールしているのでnpm runコマンドでgulpが実行できるようにpackage.jsonを編集します。

"scripts": {
    "gulp": "gulp"
  },

3, gulpfile.jsの編集

好きなタスクを書いてください。

4, 実行

コマンドで npm run gulp と叩くと実行できるはずです。

最後に作ったgulp4.0の環境です。

GitHub - cidermitaina/starter-kit: html5 starter-kit

不具合があるかもですが、誰かの参考になれば嬉しいです。

2017-11-13

9 - 10月に聴いた音楽

音楽

9月から10月に聴いてた音楽について書いてみようかなあ、と思います。

すきなものを紹介したり話すのが苦手なので上手く書けるか分からないのですが、誰かと音楽を話す機会が減ったので読んでくれている誰かと共有できたら、と思っています。

今年の秋は気になるアーティストの新譜がたくさんリリースされて個人的には充実しました。

#submerese / Are you anywhere

Are You Anywhere [PT012]

アーティスト: Submerse
出版社/メーカー: Perfect Touch
発売日: 2017/10/06
メディア: CD
この商品を含むブログを見る

去年リリースしたawakeが好きすぎて2016年はずっと聴いていました。

新しいアルバムは、じめっとした気だるい感じが最高だなあ、と思いました。

#qrion / Just a Part of Life

Just a Part of Life

アーティスト: Qrion
出版社/メーカー: Moving Castle
発売日: 2017/08/30
メディア: MP3 ダウンロード
この商品を含むブログを見る

8月末にリリースされたEP。9月はこのEPをずっと聴いてました。

qrionは好きなアーティストの1人なのですが、彼女のRemixは最高で、ハズレがないです。

特に下の2曲は最高です。

#for tracy hyde / he(r)art

he(r)art

アーティスト: For Tracy Hyde
出版社/メーカー: P-VINE RECORDS
発売日: 2017/11/02
メディア: MP3 ダウンロード
この商品を含むブログを見る

11月リリースのアルバムだけど、最近ずっと聴いているので書いておきたいです、、、

都会がコンセプトみたいで聞いていてすごく東京を感じるときがあります、

去年、1人で東京に引っ越してきて不安と寂しさで東京の街が眩しくて仕方なかったのですが、このアルバムを聴きながら東京の街歩くときらきらして綺麗に見えます。

#a l e x / Growing Up, Vol. 1

なんとなく漁ってたbandcampで見つけてはまったアルバム。

特に no one would miss meの救いのない感じがたまらなくてずっと聴いてます。

夏の終わりから秋にかけて京都にいる友達が東京に来ることか多くて、懐かしさから感傷的になることが多かったです。

なので、今年の秋はなんだか落ち着いた曲ばかり聴いている気がします。

2017-11-10

gitのリモートリポジトリ作成

git

最近になって担当になった案件のgitのリモートリポジトリを自分で作るようになりました。

手順

git用のサーバーを構築してる場合の手順です。

1.リモートのホストにログイン

ssh [user@]hostname -p ポート番号

sshでサーバーにアクセスします。

-p
でポート番号を指定することができます。

ログインの認証方法はパスワード認証か公開鍵認証です。

2.作りたいディレクトリとそのディレクトリの中にrepos.gitを作成

mkdir -p ディレクトリ名/repos.git

3.repos.gitに移動、リポジトリを作成

cd ディレクトリ名/repos.git

git --bare init --shared

いつもおまじないみたいに使ってたのでちゃんと意味を理解したくて調べてみました。

--bare: ベアリポジトリを作成する。ベアリポジトリは、作業ディレクトリを持たないリポジトリで、外部に公開し、作業を中継するリポジトリとして使用。

--shared: リポジトリを他のユーザと共有する場合に、利用する

ふう、これでgitのリモートリポジトリの完成です。