読者です 読者をやめる 読者になる 読者になる

パステル色な日々

気ままに綴るブログ

Angular2ハンズオンに挑むふらいんぐうぃっち

ng-japanとng-kyotoとGDG神戸合同開催のAngular2ハンズオンに行ってきました。
そして実はこのハンズオン、先週東京でも行われたんです!東西で同じネタを扱う勉強会って珍しくないですかね?

connpass.com

gdgkobe.doorkeeper.jp

会場のサイボウズ株式会社様には、25名ほどの方が来ていました。
会場がとても過ごしやすく広さ的にはどことなく学校の教室を思わせる感じでしたね。

で、肝心のハンズオンの教材はAngular2サイトのチュートリアルを題材としており、
手を動かし、解説を交えながらAngular2のことをたくさん教えていただけました。
ハンズオンの教材は口頭による解説がなくてもドキュメントが整備されているのでおうちで取り組むこともできます。
Angular2について少しでも気になっている読者の方がいればトライしてくださいね。

github.com

ハンズオンの前には @shin_v1 さんと @laco0416 さん(東京から来ていただきました!)からAngular2に関する
紹介とAngular2とECMAScriptについての発表がありました。

speakerdeck.com

laco0416.github.io

まとめるとこんな感じ

  • Angular2はAngularJSより高速に変更を検知してViewに反映できる
  • Angular2はフロントエンドフレームワークの概念に収まらない
  • Angular2にさえ乗っかれば大抵のことはできる
  • ドキュメントの整備も進んでいる
  • Angular2は5月ごろにRCリリースかも!?
  • Angular2学ぶなら今
  • Angular2を学ぶことは書き方よりもまずECMAScriptを学ぶことである
  • Angular2でECMAScript2015は当たり前、知らないとかは許されないくらいしっかり利用されている
  • ECMAScriptは今後1年刻みで勧告されるので6年分をまとめたECMAScript2015はしっかり押さえておこう
  • Webを理解して学び続けましょう

うん、まずはWebについての理解を深めようかな...。

ハンズオンは用意された教材をテキパキと片付け先へ先へ行ってしまう人や質問を交えながらじっくり取り組む人など様々でした。

個人的な感想ですが、AngularJSのころと比べると書きやすくなったなあと実感しました。
それは @laco0416 さんがおっしゃっていたようにECMAScriptの最新の仕様をどかっと盛り込んでるからこそだと思うんですよね。
もはや知らなかったでは通用しない世界が来てもおかしくはないと思うので今後も必要な情報を見極めてキャッチアップし続けていきましょう。

VSCodeでnpm scriptsのタスクを実行する

VSCodeを使い始めました。1.0がリリースされるのが楽しみですね。
ところでTypeScriptを使う上でビルドタスクの設定に困ったので書いていきます。

tasks.json

VSCodeはビルドタスクを設定できます。
プロジェクト内で設定すると .vscode ディレクトリの中に tasks.json が作られます。
そのあたりの概要は公式サイトに書いてあるのですが npm scripts に書いたタスクを設定する方法について書かれていないのでここで紹介します。

{
  "version": "0.1.0",
  "command": "npm",
  "windows": {
    "command": "npm.cmd"
  },
  "isShellCommand": true,
  "suppressTaskName": true,
  "tasks": [
    {
      "taskName": "build",
      // Make this the default build command.
      "isBuildCommand": true,
      "args": ["run", "build"],
      // Show the output window only if unrecognized errors occur.
      "showOutput": "silent"
    }
  ]
}

これは npm run build コマンドの設定です。
それぞれのプロパティの意味については公式サイトに書いてあるので参照してください。
日本語なら以下のサイトを参考にすると幸せになれるかもしれません。

www.atmarkit.co.jp

tsconfig.json

VSCodeは tsconfig.jsonfilesGlob プロパティを設定しても認識してくれてないみたいです。
全然関係ないんですが angular のリポジトリにある tsconfig.json を見ると fileGlobs となっているんですよね。
エディタやそのプラグインによって違うのでしょうか?

Symbol と Iterator の型定義

どうやって解決するのかわからなかったのです。
どのファイルで解決できるのか探してたんですがなにかいい方法あるのでしょうか。
結局、以下の様な感じになりました。

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": true,
      "sourceMap": true,
      "outDir": "tsc"
    },
    "files": [
      "./typings/main.d.ts",
      "./node_modules/typescript/lib/lib.es6.d.ts",
      "./src/index.ts"
    ]
}

"./node_modules/typescript/lib/lib.es6.d.ts" これで解決しました。
(これでいいのかはわからないです!)

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の知識など自分に不足しているところと絡めるとうまくいきそうな気がしたので
まずは発表を通して何を言いたいのかシンプルに考えて、何より早めに行動できるようにしたいと思いました。