パステル色な日々

気ままに綴るブログ

2016年もやってきたng-japan春のAngular祭り

自分がng-kyotoコミュニティに参加しているのもあって、はじめてng-japanに行ってきました。
心の師(たくさんいる)である @laco0416 さんの発表に刺激されたので早速アウトプットすることにします。
いろいろ学びはありましたが、一番心に残っているのは皆さん口をそろえて「TypeScriptの静的型付けはいいぞ。」といってたことじゃないですかね。
今はBabel一辺倒なんですがTypeScriptに戻りたくなりました。Babel始めた頃と状況も違いますからね。
セッションは2トラックに分かれていて40分のセッションを最大6つ受講できました。
全体的に長いセッションが多かったので聴講する側も疲弊していましたが、
それだけ濃い内容でした。Angularの未来は明るいと感じましたよ。
発表は当日配信されていたみたいなんですけど、あとからでも見れるんですかね……?
まあとにかく学ぶことの多いイベントでした。

Angular2の失敗しない始め方(@laco0416)

laco0416.github.io

@laco0416 さんの"Angular2の失敗しない始め方"を聴講しました。
Angular2に関する現時点でのよくある質問や、誤解についてひも解き
Angular2をもっと身近に感じて欲しい、そんな気持ちがビシビシ伝わってきました。
個人的にはドストライクの内容で、これからAngular2を触ろうとしていた身としては
たまらないセッションだったのは間違いないです。
(reveal.jsスライド内容をコピペできるのでいいなと思いました。)

Q&A形式で進んだ前半、Angularに対する突っ込んだ内容ではないものの
よく見る疑問に対して丁寧に解説されていました。
@laco0416 さんの見解ですが、Angular2のコードも全て読んだと聞いたので
すごく説得力がありましたね……。
とはいえそこは自分で確かめてみないといけません(できるだけがんばる)。

で、本セッションで一番強烈に響いたのが次のお言葉。

「Web技術が進化しているのにAugularが変わらないわけがない(意訳)」

言葉についてはうろ覚えで意訳なんですが、
つまり、Angular2はAngularJSとかなり違うということについて
AngularJSが生まれた2009年ごろと比較してWebは随分大きな変革を迎えたので
Angular2がそれを踏まえたフレームワークならば変化するのは当然でしょ?というお言葉です。
そんなとき僕達エンジニア個人個人がどう付き合っていくのか考えないといけませんが
個人的には「やらなくちゃ!」と奮起させてもらえる良いお言葉に感じました。

Progressive Web Apps(@dynamitter)

www.slideshare.net

聞き慣れない言葉でした。知らなかったです。ごめんなさい。
Progressive Web、はて?なんのことかと思って聞いていたのですが、これがかなりワクワクする話でした。
いくつかすでに試されている事例も出てきて、ホームに追加メニューとか知りませんでしたよ……。
Webもネイティブアプリと同じようなことができるようになってきました。
お手軽にいろいろな体験をしてもらえる時代がすぐそこまで迫ってきているのかもしれませんね。

Angular2実践入門(@Shumpei)

www.slideshare.net

前半はライブコーディングをベースにAngular2の書き方の解説、
後半は実際に使ってみて得られた知見をまとめられていました。
とても丁寧な解説で、はじめてAngularを見るという方にも聞きやすかったのではないでしょうか。
コンポーネント指向の設計方法についての考察はどうなんでしょうね。
状態はどこが持ってイベントに対する振る舞いどこに書くのかというあれです。
Fluxという解決策はAngular2でも活かせるのでしょうか。
そもそもそんなもの必要なくなにかいい方法があるのか悩ましいですね。

クリエイティブの視点から探るAngular2の可能性(@clockmaker)

www.slideshare.net

すでに3つのプロダクトでAngular2を実践されてました……。
そういった話を聞けるのはありがたいというか願ったり叶ったりだったのです。
しょっぱなから実装期間1週間とかいうプロダクトが出てきて、すごすぎました。
canvasとの連携だったりとかかなり細かい実践例が飛び出てきて 触ってない身としては口を開けて眺めていました。ええ、もう本当に、Angular2は可能性の獣ですね。

ngUpgradeと移植戦略(@armorik83)

speakerdeck.com

我らが代表による発表です。
AngularJSからAngular2への移行方法として提唱されている
ngUpgradeについて具体的にどうやっていくのかについてのセッションでした。
Angular2への移行戦略はng-forwardというもう一つの戦略があった気がしますがどこいったんですかね……?
中身についてはかなり具体的な内容になっています。
とはいえ、AngularJSからAngular2への道のりについて一から書き直さず
段階的に移植していく方法についての考察ははじめて聞いたので、新事実が多かったです。 思ったよりも移植コストは大きそうですね……。
AngularJSでngMockを使ってテストを書くこともあるので 資産を生かせない時どうするか考えておいたほうが良さそうです。
mochaとはバイバイしてくださいとかも聞こえました……(マジで?)。

Angular1.5 Component & ngComponentRouter(@albatrosary)

AngularJSドキュメントに詳細がなかったngComponentRouterについてのセッション。
しかし、この数日前にまさかの公開というハプニング。

AngularJS

そこでcomponentの話を中心に再構成されたようです。 componentはdirectiveの書き方がより簡単になったもの程度にしか捉えられてないのですが
componentに沿って書いておくとAngular2移植が簡単になったりするんでしょうか。
ngComponentRouterについては @albatrosary さんご自身の記事に使ってみる方法について書かれてますので参考にさせてもらうと良さそうです。

albatrosary.hateblo.jp

Angular2、今日を終えて

Angular2いいですねぇ! 気づいたらAngularはもはや単なるフレームワークというよりプラットフォームになっていましたよ……。 だからこそ末永く付き合っていくためにもこのセッションで語られた次のWeb技術は抑えておこうと思いました。 Angular以外でもWebの技術は生きるので学ばない手はなさそうです。

  • Observable
  • Zones
  • Decorators

連続したPromiseによる非同期処理が辛いと感じていたので、 Observableについては掘り下げたいですねえ。

componentごとにChange Detectionを動的に生成して かなり高速に変更を検知して反映することができるAngular2。 この辺のロジックは興味深いです。 各コンポーネントは親コンポーネントを持ち親コンポーネントに変更がない場合 子コンポーネントのChange Detectionは実行されません。 reactのpropsの説明の時によく見たような木構造の図が出てきて、
「お、あれだ」と思ったけど、変更検知した後に変更後の値を伝える方法についてわからないので これも調べる必要がありそう。

そうそう、実はイベント中に(ITパティシエなる人から)お菓子が配られたんですが、 とても美味しかったです。食べたら「ウーピー」と言ってしまうほどに。 来年、ng-japanがあったら行きましょう。Angular2やりましょう!来年はもっと盛り上がってるかもしれませんよ!

プログラミングの自主学習をはじめて1年が経った

なんやかんやあって、プログラミングの自主学習をはじめて1年が経過した。
それまではPHPがかける(ただし中身はお察し)。だったので今でもへっぽこであるのは間違いない。
でもできるようになったことは増えた。

なにか変わったか?

  • 勉強会に行くようになった
  • 業務に対してもっといい方法があると思うようになった
  • 情報を積極的に収集するようになった

自分に起きた変化はたしかにあったように思う。
トリガーになったのは勉強会への参加だ。
自分一人だとモチベーションを上げるのは難しいが、
勉強会に参加することで「自分は年齢に対して技術を学び足りない」と強く感じた。
井の中の蛙だったことを知ったことが最も影響を与えたように思う。

自主学習何をした?

  • 本を読んだ
  • 仕事を家で持ち帰って考えたりした
  • サンプルコードを書いた

本を読むきっかけになったのはTypeScriptリファレンスだ。

www.amazon.co.jp

なぜTypeScriptの学習を始めたのか今ではおぼろげになってしまったけど、
当時は今までよりずっと書きやすいJSに感動していた。

学習しているといってもイケてるエンジニアの方に比べると全然出来てないほうだと思う。

振り返ってみて

はじめて勉強会に参加してなければきっと自主的に勉強することなくだらだらしてたと思う。
大したことやってないけど、それでも少しだけ成長できたはず。

ではまたねヽ( ´ー`)ノ

AngularJSのテストでカバレッジを計測する

おはこんばんちは、pastelIncです。
AngularJSのテストといえばKarmaを使う方も多いと思います。
その設定に少しハマったので今日は忘備録的な何かを残しておきます。

依存モジュールの紹介

$ npm i -D angular-mocks karma karma-mocha karma-browserify babelify power-assert babel-plugin-espower browserify-istanbul browserify karma-mocha-reporter mocha karma-coverage babel-preset-es2015 phantomjs-prebuilt karma-phantomjs-launcher isparta

なかなかの多さです。
babel-preset-es2015とか知りませんでした。未だbabel5しか使ってないのです。
presetを使うには設定の必要があるようでpackage.jsonにこのように書きました。

{
  ...
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  ...
}

karmaの設定

karma.conf.jsを書きます。

module.exports = function(config) {
  config.set({
    basePath  : '',
    frameworks: ['mocha', 'browserify'],
    files     : [
      'test/**/*.test.js',
    ],
    exclude: [
      '**/*.swp',
    ],
    preprocessors: {
      'test/**/*.test.js': 'browserify',
    },
    browserify: {
      debug    : true,
      transform: [
        [
          'babelify', {
            plugins: ['babel-plugin-espower'],
          },
        ],
        [
          'browserify-istanbul',
          {
            instrumenter      : require('isparta'),
            instrumenterConfig: {
              embedSource: false,
            },
          },
        ],
      ],
    },
    reporters       : ['mocha', 'coverage'],
    coverageReporter: {
      dir      : 'coverage/',
      reporters: [
        { type: 'html' },
        { type: 'text' },
        { type: 'lcov' },
      ],
    },
    port       : 9876,
    colors     : true,
    logLevel   : config.LOG_INFO,
    autoWatch  : true,
    browsers   : ['PhantomJS'],
    singleRun  : false,
    concurrency: Infinity,
  });
};

僕はソースコードもテストコードもbabelを使って書くので、
両方に対してbrowserifyをpreprocessorsとして設定しています。
angular-mocksとかはテストコードに直にimportするスタイルなので、
ここではfilesの中に含めてません。

embedSourceの設定をtrueにすることで、
トランスパイル済みのコードをカバレッジの結果に出力することができます。

この辺を参考ください、経緯を追うことができます。

テストを行う

ソースコードです。

import angular from 'angular';

const modName = 'app.components.main';

class MainComponent {
  constructor() {
    this.name = 'Angular1.5';
  }
}

angular.module(modName, []).component('main', {
  controller: MainComponent,
  template  : '<h1>Hello {{$ctrl.name}}</h1>'
});

export default modName;

テストコードです。

import assert from 'power-assert';
import 'angular-mocks';
import mainModule from '../src/components/main';

describe('MainComponent', () => {
  let  component, scope;

  beforeEach(angular.mock.module(mainModule));

  beforeEach(inject(($rootScope, $componentController) => {
    scope = $rootScope.$new();
    component = $componentController('main', {$scope: scope});
  }));

  it('should be had name', () => {
    assert(component.name === 'Angular1.5');
  });
});

Angular1.5がめでたくリリースされました。
せっかくなのでcomponentメソッドを使ってみたソースをテストしています。
componentはdirectiveでかくよりもいろいろ書式を省略できます。

directiveのテストはcustom elementを$compileした結果からcontrollerを取得していました。

参考

componentをテストするときには$componentControllerを使って簡易に書くことができます。

あとがき

AngularJSのテストの記事をあまり見かけないので書いてみました。
依存モジュールが多くて何が何をしているのか把握するのが大変でしたが、
初めてカバレッジを使ってテストコードをかけるようになりました。
AngularJS1.5もリリースされてAngular2への移行準備がはじまったなという感じがします。
着々と進めていきましょう。ではまたねヽ( ´ー`)ノ

Sublime Text3でTypeScript使うときが来た

Advent Calendar 2015でAngular2の記事を書きました。 で、その際にTypeScriptを久々に使ったのでメモ程度に記事にしておきます。 Template Syntaxの読み方を解説したので良ければ見てやってください。

qiita.com

プラグイン何使うのか

以前の記事でTypeScriptのプラグインはArcticTypescriptを使うといいよって紹介したんですが 今見るとコミット止まってて( ゚д゚)ってなった。 んで、何使うのかって話なんですがMSが提供しているプラグインを使いましょう。

github.com

入力の自動補完から型推論の情報、Syntaxのチェックまで今のところ不便なく面倒見てくれてます。 導入の際にnodeバージョン管理方法によって環境変数を定義しないといけなくてつまりました。

NODE_PATHを設定する

NODE_PATHはモジュールの設置場所解決に使用されますがこれがないとnodeがないといってSublime Text3上のログにエラーが出ているはずです。 Node.jsのバージョン管理といえばWindowsならNodist、Linux系ならNodebrewを使っています。 使うNode.jsのバージョン決めたらNODE_PATHを設定しましょう。 Windowsならコンピュータから環境変数の設定でできますし、Linuxならbashrcに書くことで設定できます。 参考までにNodebrewならこう書きました。

export NODE_PATH=$HOME/.nodebrew/current/lib/node_modules:$NODE_PATH

TypeScriptグローバルにインストール

$ npm i -g typescriptしましょう。先ほど設定したNODE_PATHのnode_modulesにtypescriptがインストールされるはずです。 これで無事tsserver.jsが実行されてプラグインが使えるようになります。

まとめ

  • Sublime Text3でTypeScript使うならMS提供のやつを使う
  • NODE_PATHを設定する
  • typescriptをグローバルインストールする

それでは皆様ごきげんよう。

Angular Meetup #3で発表した

先日、活動してるコミュニティng-kyotoが主催する勉強会の3回目が行われました。

ng-kyoto.connpass.com

行って発表してきたのはいいものの何とも反省の多い形になりました。
そんな発表を振り返ってみます。

speakerdeck.com

何がダメだったのか

  • 知識不足
  • まとまりのない資料
  • 何がしたかったのか不明瞭
  • こわばる顔
  • 言いたいことが何なのかわからない
  • 身振り手振りなし

何より発表し終わって聴きに来てくださった方に申し訳ない感じがしました。
もちろん、自分の発表を聞きに来てくれたという珍しい方がいるなどとは思ってもないんだけど
それでもやっぱり発表は満足いくものではなかったです。

何を得たのか

  • Dockerへの知識
  • 発表力の低さを実感

扱った題材の知識はもちろん身についたんだけど、少し学習開始するのが遅すぎました。
学習した知識の浅さはそのまま資料へと滲み出るので今度はもっと早くから学習開始したいと思います。
あと発表の機会がいつ来てもいいように日常から疑問に思ったこと、調べたことは事細かく文章として残しておくことが大事だと思いました。
このブログをしれっと再開したのもそういうわけです。続くかはわからないです。 (オイ) あとは発表力の衰え。人を見て発表するということがかなり下手になっていました。

まとめ

題材を決めるのが難しかった。
Angularはフレームワークでそれだけだと使い方やTips中心の話、アーキテクチャの話に偏ると思っています。
自分の興味ある分野に引きづり込むかAngular2の知識など自分に不足しているところと絡めるとうまくいきそうな気がしたので
まずは発表を通して何を言いたいのかシンプルに考えて、何より早めに行動できるようにしたいと思いました。

SublimeText3でTypeScriptのAutoComplete

SublimeText3でTypeScriptが使いたいか…。

T3Sを使うとフリーズする

 フリーズしました(Windows7 64bit)。去年の11月ごろかな。ググるとわりと最初に見つかるプラグインではあるけど、SublimeText3のBuild3065で試みたところautocompleteしようとするとフリーズして( ゚д゚)ってなったのを覚えてます。issueでもいろいろ言われてたみたい(英語苦手でわかってない)。
で、1ヶ月前ほどその辺あさってると新しいプラグイン作ったお( ^ω^)って方がいらっしゃってそちらを使うとうまくいったので紹介します。

ArcticTypescript

 ググっていただくのが早いんですがこちらのリポジトリで公開されています。

GitHub - Phaiax/ArcticTypescript: TS 1.4+: completion, error highlighting, build, snippets, quickinfo, ...
使い方の説明は書いてあるとおりです。いろいろやってみてください。
うまく補完されるとガッツポーズしちゃいます!やったね!

追記(2015/02/24)

TypeScript1.4のUnionTypeにTSSがまだ対応できてません。
なので型定義ファイルが割と最近のものだと「angular symbol not found」とか出てうまい事自動補完されません。

Upgrade to Typescript 1.4 · Issue #39 · clausreinke/typescript-tools · GitHub
いろいろやってくださっているみたいなのでとりあえず私は型定義ファイルをUnionTypeが適用されていないコミットまで巻き戻して使ってみることにしました。
もしくはtesting_ts1.4ブランチを使うのがよさそう?

さらに追記(2015/03/27)

新バージョンが少し前に来ました!typescriptの設定を.sublimetsやx.sublime-projectからtsconfig.jsonに書くことになりました。
rootfileの設定がより簡単になって使いやすくUnionTypeや型のためのガードもうまく機能していて驚きました!

もっと追記(2015/12/13)

追加記事書きましたのでこちらを御覧ください。

pastelinc.hatenablog.com

あとがき

 おはこんばんちはパステルです。前置きやめましたあとがきです。
最近tokyo7thシスターズってゲームをはじめました。アイマスが好きなこともあってまたアイドルコンテンツかぁって言われそうなんですが、ストーリーが面白い。キャラクターが妙に色っぽい。とかいろいろあってちょっとはまってます。
アイマスの場合ブラウザ発のゲームですがこっちはアプリ発こともありちゃんとゲームになってるなって印象です。特に七咲ニコルというドストライクのキャラクターがもう心をcatch me catch meしてくるのがたまらんのです。こういうコンテンツに会うとAndroid開発もやってみたいなってなります。
ってことで久しぶりの更新でした。ヽ( ´ー`)ノ まったね~

Node.js、npmをインストールせずに使う

おはこんばんちは、パステルです。
インストールはしたくないけど使いたい。そんな希望があるのかないのかわかりませんが(自分はあった)そんな希望をかなえるWindows用備忘録。

本編

  1. Node.js(Windows Binary)を公式サイト(日本ユーザーグループ)からダウンロードします。設置しておくディレクトリを作成してそこに移動させます。
  2. 同じく公式サイト(日本ユーザーグループ)のダウンロード>Other releasesからnpmのzipファイルをダウンロードして解凍したディレクトリの中にあるnpm.cmd、npm_moduleを先ほど作成したディレクトリに突っ込みます。
  3. nodeとnpmコマンドにパスを通します。環境変数Path(管理者用でもそうでなくてもどちらでも)に先ほどのディレクトリへのパスを追記します。
  4. コマンドプロンプトを立ち上げてnode -vでパスが通っていることを確認します。次に環境変数NODE_HOMEに作成したディレクトリにあるnode_modulesのパスを設定します。これがnpm -gを実行したときにパッケージがインストールされるパスになります。いやだという方はお好みで設定してみてください。
  5. コマンドプロンプトを立ち上げてnpm -vでバージョン情報が表示されることを確認したらnpm update -gでnpm自身をアップデートします。

まぁこんな流れなんですが、文字起こしにすると長いですね。
コマンドは怠けました。まぁ備忘録だし多少はね。

ではまたねヽ( ´ー`)ノ