2016-08-16

Vue.jsこそ私が求めていたフレームワーク

Angularとの今までの生活

去年よりJavaScriptの世界に入門し最初に触れたフルスタックフレームワークであるAngular JSは、正直解らないことだらけでした。解らないなりに書籍を読み漁り、ネットの情報に目を通し、チュートリアルをやりました。ですがやれControllerだFactoryだDirectiveだComponentだの新しい概念が入り乱れる中自分に身についたものは薄く、フロントエンドに高い壁を感じてしまった半年でした。

そこでであったVue.js

そんな中、SPAを構築するためのフレームワークについて調べているとAngular以外にもたくさんあることを知り、その中でもVue.jsに惹かれます。その理由はVue.jsが売りにしている学習コストの低さ。面白いくらい簡単にリアクティブなWeb画面が作成できます。ガイドが日本語で用意されているのもポイントです。 Angular.jsはフルスタックフレームワークであり、Angular Wayと良い意味でも悪い意味でも呼ばれるような独特なコードの書き方を求められます。これが正直JavaScript初心者である自分にとっては鬼門でした。しかもAngularはバージョン毎にAPI仕様が大きく変わっていたり、ベストプラクティスがかなり変遷していたりします。これはかなりググラビリティが悪く初心者には更なる追い打ちとなっていました。 Vue.jsはフルスタックではなくその名の通りView(vueと同音)レイヤーのフレームワークです。よってロジック側は通常のJavaScriptで書いていきます。なのでJavaScriptの特別な書き方などは必要ありません。また、ライブラリとの組み合わせも自由なので自分のレベルにあった利用方法がしやすいです。

はじめて作れたWebアプリ

そして真剣に取り組んで週末2日間でクイズアプリを作成することができました。

Quiz-vue https://github.com/TakahiRoyte/quiz-vue

中身はまだまだショボいですが、一人で何かを作成するということを今までしたことがなかったので一つ大きな自信に繋がりました。社内の合同学習の為に作っているので当該アプリはこれからもブラッシュアップしていく予定です。そしてこれとは別にVue.jsをメインに個人的なWebアプリの作成も続けていきたいと思っています。

2015-12-11

AngularJS blur&focus時にフォーマットするDirective

JavaScriptで書くとこんなかんじの動きになるディレクティブを作成してました。ここで動作に重要になってくるのがngModelControllerなのですが、動作を理解するのに少し時間がかかってしまいました。

demo

JavaScript

'use strict';

function applyFormat(value) {
  return value.substring(0, 4) + "/" + value.substring(4, 6) + "/" + value.substring(6, 8);
}

function removeFormat(value) {
  return value.match(/[0-9]+\.?[0-9]*/g).join('');
}

angular.module('app').directive('dateInput', () => {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: (scope, elem, attrs, ctrl) => {

      ctrl.$parsers.push(() => {
        return removeFormat(ctrl.$viewValue);
      })

      ctrl.$formatters.push(() => {
        return applyFormat(ctrl.$modelValue);
      })

      // onBlur - make 8 digits number into yyyy/mm/dd format
      elem.bind('blur', () => {
        if (!ctrl.$modelValue || !ctrl.$viewValue) return;

        ctrl.$setViewValue(applyFormat(ctrl.$modelValue));
        ctrl.$render();

      })

      // onFocus - make yyyy/mm/dd styled data to 8digits num yyyymmdd
      elem.bind('focus', () => {
        if (!ctrl.$modelValue || !ctrl.$viewValue) return;

        ctrl.$setViewValue(ctrl.$modelValue);
        ctrl.$render();

      })
    }
  }
})

HTML

<input type="text" ng-model="value" date-input>

イメージ図

DOM =$setViewValue()=> $viewValue =($parsers)=>    $modelValue
DOM   <=$render()=     $viewValue <=($formatters)= $modelValue

2015-11-16

このワークステーションとプライマリドメインとの信頼関係に失敗しました、という重いメッセージ

WIndows7 で特定のドメインにログインできない

協力会社の社員さんが突然Windows7のアカウントでログインできなくなったと報告を受けました。確認してみると表題のエラー。なんじゃこりゃ……？

根本的な原因はセキュアチャンネルの破損

問題はActive Directoryにおけるサーバーとクライアント間の認証用セキュアチャンネルの破損らしいです。一度壊れると作り直す必要があるらしく面倒の香りが漂ってきます。

ローカルのadministrator権限がないとツライ

解決方法は意外と簡単に見つかりました。Microsoft公式の方法ですが、ローカル管理者権限が必要とのこと。一度ドメインを抜けて入り直すなんて面倒だなと思いつつ下記の手順通りの作業をお願いしました。

"このワークステーションとプライマリドメインとの信頼関係に失敗しました" エラーが Windows 7 を搭載しているコンピューターにログオンすると表示される https://support.microsoft.com/ja-jp/kb/2771040

一安心しようとしていたところに、再び社員さんが来てローカルのアカウントにも入れないとの報告が。何が起きているんだ……PCをセットアップしてもらった時の説明資料などを掘り起こして確認してみて、記載されているユーザー名とパスワードを試してもダメでした。泣きそう。

LANから切断するととりあえず入れる

とりあえずLAN線から切断してローカルとドメインへのログインを試みたところ、なんとドメインへのログインは成功しました。どうやらWindows7では10回までオフラインでもログイン出来るよう情報がキャッシュされるみたいです。ちなみにローカルのアカウントを確認してみたところユーザー名の採番部分にゼロが余計に1個付いていたため入れなかったというオチでした。ローカル管理者権限をゲット出来たので後は先程のMicrosoftの回答で解決。

2015-11-13

スクラム：　少数精鋭のワークスタイルフレームワーク

はじめに

今現場で採用している、開発手法「スクラム」について簡単にまとめました。

スクラム

アジャイル開発において、チームで仕事を進めるためのフレームワーク。
人数は3～10人の小規模グループで動く。チーム全体のセルフマネジメントがキーとなる。

ロール

プロダクト・オーナー

プロダクト・バックログの作成と優先順位付けの最終責任者。チームが生み出す成果物（プロダクト）の方向性を決める「舵取り役」。指示をだすというよりかは方向性を決めて情報提供を行う。

スクラムマスター

チームの仕事の状況の確認役。作業のあらゆる障害を洗い出し、対策を促すドクターのような存在。対策の実施はスクラムマスターのみでなくチームで実施する。

2つのバックログ

プロダクト・バックログ

機能や技術的改善要素に優先順位をつけて記述したもの。ステークホルダ全員が参照し、プロダクトのリアルタイムな状況把握を可能にする。「誰のために」「何のために」「それを実現するのか」について合意を取りながら進み、仕様変更の際にはなぜその変更が必要なのかを理解しやすくなる。

スプリント・バックログ

チームのタスクリスト。チームのスキル全体を駆使してスプリント期間（1～4weeks）内にタスクを終わらせることが現実的かをベースにリストを作成する。進捗の確認にはデイリースクラム（朝会）を開き、下記3点で進捗を確認する。

昨日やったこと
今日やること
障害になっていること

タスクボード

バックログを視覚化したもの。下記3点を管理する。

ToDo（これからやること）
InProgress（着手していること）
Done（完了したこと）

付箋やらRedmineやらを利用して視覚化するとよい。付箋で電子媒体等が使えない場合も見えるような形にするのが最適である。

5分で分かる、「スクラム」の基本まとめ http://www.atmarkit.co.jp/ait/articles/1208/07/news128.html

2015-10-28

lodashのclone(isDeep)とcloneDeepの検証

JavaScript lodash

lodashには_.cloneと_.cloneDeepというオブジェクト複製のコマンドがあります。 cloneの方は基本的にShallowCloneととでも言うのか、参照の複製を行います。一方cloneDeepは参照の複製ではなく、同じ値のオブジェクトを再生成して複製します。ここまでなら解りやすいですね。

ですがcloneにはisDeepというパラメータにtrueを渡すことでdeepにcloneできるというのです。

じゃぁclone(isDeep)とcloneDeepの違いはなんなんだ？ということで簡単に調べてみました。

var users = [
  { 'user': 'john', 'age': 35 },
  { 'user': 'fred', 'age': 29 }
];

var cloneShallow = _.clone(users);
var cloneIsDeep = _.clone(users, true);
var cloneDeep = _.cloneDeep(users);

console.log(users[0] == cloneShallow[0]); // true
console.log(users[0] == cloneIsDeep[0]);  // false
console.log(users[0] == cloneDeep[0]);    // false

JavaScriptの等価演算子でオブジェクトを比較した場合、オブジェクトの参照先が同じかどうかで判断されます。よって、通常のcloneの場合usersとcloneShallowは同じ参照を持っている為trueになりますね。一方clone(isDeep)とcloneDeepは新しいオブジェクトを生成するのでfalseになります。

あれ？同じ？

ちなみに勿論ですが各objの値自体は同じです。

console.dir(users);
console.dir(cloneShallow);
console.dir(cloneDeeper);
console.dir(cloneDeepest);

// 上記の結果は全て以下の通り
// [[object Object] {
//   age: 35,
//   user: "john"
// }, [object Object] {
//   age: 29,
//   user: "fred"
// }]

結局ソース見てみたんですが、同じでした。 cloneもcloneDeepもbaseCloneというprivateメソッドを利用していて、それに対してparamのisDeepを引数として渡すか固定で渡すかの違い。

baseClone(obj, isDeep); //clone
baseClone(obj, true); //cloneDeep

2015-10-27

Vimium オススメChrome Extension

Chrome

Vimiumは、Chromeブラウザの操作をVimライクに拡張するExtensionです。

ブラウザの操作をキーボードで完結できます。Macだったらトラックパッドのできが良いからいらないかもしれませんがタッチパッドの感触が残念なSurface Pro2ではかなり重宝しています。

hjkl で上下左右スクロール
F でリンクを開く
O でブックマーク＆履歴検索
yy でURLをクリップボードにコピー
yf でリンクのURLをクリップボードにコピー
P でクリップボードのURLを開く
gf でページ内のiframe要素間のフォーカス移動

使っていて気になったのが以下の点ですかね。

一部ページでは動かない（キーイベントがオーバーライドされてる？）

まれにフォーカスがあたってないのかキーイベントの問題なのか動かないページがあります。そういったページで反応しないと戸惑ってしまうので、通常のChromeのデフォルトコマンドで出来る操作はそのままでやっています。

Ctrl+t 新規タブ
Ctrl+w タブを閉じる
Ctrl+Tab(+shift) タブ移動
Alt+→or← 履歴移動

chrome.google.com

是非使ってみてください。

2015-10-26

フロントエンドに触れて３カ月ほど経過して

考察

私が勤めている会社はエンタープライズの業務システム構築なんかがビジネスの主軸でして、今私が携われているフロントエンドの技術が必要とされる機会があまりないようです。やはりそうなるとJavaを使っていたり、古いプロジェクトではCOBOLを使っていたりして、一度その道に入るとなかなか抜け出せないなんて話もよく聞きます。

そういった点ではフロントエンドの技術に明るい人材ってのは思った以上に少なく、上は人材獲得にも困っていそうだなというなのが若手ながら感じ取れます（だからこそフロントエンド知識ゼロの私が今のPJに放り込まれたのでしょう……）。

フロントエンドは技術革新のスピードがサーバーサイドの技術と比べて圧倒的に早い印象があります。各種ツールも興亡激しいですよね。その分自力で調べて自力で動かせるようになる必要があるので、勉強熱心な人が集まりやすい傾向にあるのも、私がフロントエンドに抱く印象の一つです。みなさんアウトプットがすごいですよね。コミュニティに対しての関心度が高いのも特徴的です。OSSをはじめとしてgithubやstackoverflowやらQiitaやら素晴らしいエコシステムが構築されています。GoogleやMicrosoftもGithubで精力的に活動しています。そういうの見ると、アホ程に単純ですが「なんかいいな」って思っちゃったりしています。

上記を踏まえて思うのは、今後エンタープライズの世界においてもフロントエンドの知識を求められてくるシーンが多くなりそうということです。おそらくこの業界に携わっている方なら数年前あるいは十数年前から感じていることかもしれません。フロントエンドが先行して進み、サーバーサイドを引っ張るというシーンが多くなるでしょう。たとえばWeb Socket APIなんかもHTML5の仕様として追加されていますが、フロントエンドの強化にサーバーサイドが引っ張られるという形なんじゃないでしょうか（単にフロントエンドが貧弱すぎたって話もありそうですが）。この例は微妙というか正しいかも解らないんですが、そういうケースは増えてくると思います。CIとかビルドツールとかの進みはフロントエンドが圧倒しているので、それをサーバーサイドが後追いするようなケースです。

それでここまで長々と述べてきて何が言いたいかっていうと、まだしばらくフロントエンドやりたいなーってことなんですよね。一度手を付けるとやめられないというか、JavaよりもJavaScript、JavaScriptよりもTypeScript、もしくはCoffee Scriptも興味あるなーとか、勉強してあのフレームワーク使ってみたいなーとか、際限がありません。それを勉強している間にも次の技術が出てくるっていうのは、なかなかすごいことだと思います。私は勉強は好き好きなわけではないのですが、新しいことに取り組むことは決して嫌いではないというか、広く浅く色々なことをするのが好きなので向いているような気がします。そんな甘い世界ではないのかもしれませんが、基本的な知識だけは少しばかり血反吐を吐いて学べば、そこから発展して色々なことが出来るようになりそうなわくわく感を感じています。だからしばらくはこっちで勉強していきます。

なのでこのブログも1か月半近くサボってしまっていはいたのですが、自戒の念も込めて、継続的に書いていけたらと思い立って長文を書いてみました。

LS&TK's SE Life Log

SE備忘録