パステル色な日々

気ままに綴るブログ

プログラミングの自主学習をはじめて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自身をアップデートします。

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

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

AngularJSのテンプレート取得タイミング

 久々の更新です。AngularJSのテンプレートはどのタイミングで取得されるのか。
当たり前のことだったけどわからなかったので調べてみました。

本編

 AngularJSのHTMLテンプレートの読み込みタイミングはどうなっているのかわからなかったので調べました。

  1. 初回アクセス時はまずサーバからHTML、JavaScriptCSSといったコンテンツをダウンロードしてきます。
  2. ng-viewとか使うとそこにはめ込むテンプレートの読み込みが行われます。
  3. AngularJSのルーターにしたがってサーバからテンプレートを読み込みます。

ページング処理でテンプレートが切り替わるときはまたテンプレートを読み込みますがそれは初回だけみたいです。同じテンプレートは再度読み込みませんでした。
使っているときは意識してないんですがいざ実際に考えるとどう動いているのかわからないことだったので勉強になりました。

余談

 最近はAngularJSとTypeScriptにすっかりお熱でのめり込んでいます。プログラマーとして煮え切らない日々を過ごしていましたがこのブログ執筆開始次期から急にエンジンがかかりました。そこからフロントエンド開発の情報を追うようになって改めて感じるのが、フロントエンド開発は恐ろしいスピードで進んでいるということです。突っ込みを入れたくなるスピードで進んでいるので広く浅くあまりのめりこみ過ぎない程度に情報を収集していきます。それではまたねヽ( ´ー`)ノ