N予備校プログラミング入門メモ14

はじめに

ここ（はじめに）を書くのだんだんだるくなってきた。

4章 実践サーバーサイドプログラミング

04.テスティングフレームワーク

• MOCHAを使う
  • 見たことあるやつだ！

test/test.jsを作成しておくと自動で実行してくれる。

'use strict';
const assert = require('assert');
const dc = require('../');

describe('#effectiveDamage()', () => {

  it('正常なダメージ計算ができる', () => {
    assert.equal(dc.effectiveDamage(100, 50, 30), 83);
  });

});

以上をtest/test.jsに置いておいてmochaを実行すると

  #effectiveDamage()
    ✓ 正常なダメージ計算ができる


  1 passing (11ms)

となる。

describe関数の第一引数の文字列'#effectiveDamage()'を他の文字列に変更すると

  テスト
    ✓ 正常なダメージ計算ができる


  1 passing (16ms)

みたいになるのでなんでも良さそう。講座テキストの通りに具体的な名前を書くのがいいとは思う。

この講座では要件からテストを書き実行すると機能の漏れが分かりそれを実装する、ということを何度か繰り返した。ニコニコ動画に某氏のTDD動画が上がっていていつか見ようと思ってたのを思い出した。今度こそ見よう（見るとは言ってない）。

05.継続的インテグレーション

個人的「よく聞くけど一体どこからどこまでのことを指して言う言葉なのか分からない」NO.1。

あとJenkins対応に追われることを「介護」「介護疲れ」と表現してるクラスタを観測して笑った。

CircleCIを使うのだが講座テキストと雰囲気が違くて困った。

困ったのでNext Stepsの通りにやってみることにする。

.circleciディレクトリを作り、その中にconfig.ymlを作る。

config.ymlに以下を張り付ける（Next Stepsに書いてある通りのやつ）

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:7.10
      
      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
        
      # run tests!
      - run: yarn test

編集したら.circleciディレクトリをpushして「Start building」する。

できたのかな？

yarn testになってるけどエラーは講座テキストと同じっぽいのでたぶんできてる。うんできてる。（暗示）

2017年度のブランチに切り替え、typoを修正してpushしてからCircleCIのダッシュボードを確認するとさっき修正したブランチがRUNNINGになっていたのでクリックして結果を待っているとnpm testが正常に終わりました。

そういえばこっちのブランチはnpm testになってる。masterブランチでさっき作ったconfig.ymlのテストのところがyarnになってたのが原因っぽい。

講座テキストでは通知のメールがくると書いてあるがまだ来ていない。Notification設定を確認したけどよくわからない。Slack通知の設定はあったので、通知を受け取りたかったらそっちで良さそう。

さらっと出てきたけど、--save-devするとpackage.jsonのdevDependenciesに追加されるし、.ymlはYAMLっていうマークアップ言語。

JUnitというテスティングフレームワークの形式で出力する設定をする。

npm install mocha-junit-reporter@1.13.0 --save-dev
touch circle.yml

circle.ymlの中身

machine:
   node:
     version: 6.11.1
 test:
   override:
     - mkdir -p $CIRCLE_TEST_REPORTS/mocha
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/mocha/junit.xml node_modules/.bin/mocha test --reporter mocha-junit-reporter

GitHubにpushしてCircleCIのダッシュボードを確認するとTest Summaryのところに情報が表示され……ない！　またこのパターンだ。

Metadata collection in custom test stepsをちゃんと読む。

先に書いておくとうまくいかなかったのでまた今度試してみる。原因は講座テキストがCircleCIの1.0だったのに対して、自分が使ったのが2.0だったので設定が変わっているということなんだけど、せっかくなので2.0を勉強したい。

まずはさっき適当にコピペした.circleci/config.ymlの中身をプロジェクトに合わせて書き換える。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:6.11.1
      
    working_directory: ~/repo

    steps:
      - checkout

      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          - v1-dependencies-

      - run: npm install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
        
      - run: npm test

それから以下も追加する

    steps:
      # 中略
      - run: mkdir -p $CIRCLE_TEST_REPORTS/mocha
      - run:
          command: node_modules/.bin/mocha test --reporter mocha-junit-reporter
          environment:
            MOCHA_FILE: $CIRCLE_TEST_REPORTS/mocha/junit.xml
          when: always
      - store_test_results:
          path: $CIRCLE_TEST_REPORTS/mocha
      - store_artifacts:
          path: $CIRCLE_TEST_REPORTS/mocha

pushしてCircleCIを確認してみると、Test Summaryは表示された？　がステータスがFAILEDになった。

#!/bin/bash -eo pipefail
mkdir -p $CIRCLE_TEST_REPORTS/mocha
mkdir: cannot create directory ‘/mocha’: Permission denied
Exited with code 1

FAILEDのときはメールで通知された。なるほど。

素直にホーム配下にフォルダを作成するように変更してみるも、うまく表示されなかった。また後日ということで。

05.クライアントのフレームワーク

webpackを使う。

webpack.config.jsを作成してコンテキスト、入り口になるJSファイル名、出力先などを設定する。

設定した状態で、require関数を使ってほかのモジュールに依存したコードを書いてwebpackを通すと依存したファイルを含むJSが生成された。

06.DOM 操作のフレームワーク

• jQueryを使う
  • 懐かしい
• divの四角い領域とボタンを用意
• animate関数で大きくしたり小さくしたりした

ずっとnpm installで失敗していたが試しにyarnしてみたらうまくいった。今後こっちにしてみて様子見ることにする。

07.AJAX

• 非同期でリクエストして結果をUIに反映させるようなあれ
• /server-statusにアクセスするとロードアベレージを返すように実装する
  • ロードアベレージは1 CPU における単位時間あたりの実行待ちとディスク I/O 待ちのプロセス数、とのこと
• 一定時間で何度も確認することをポーリングという
• 同一生成元ポリシー
  • AJAXは生成元（Origin）が異なるリソースにはアクセスできない

osというモジュールが出てきた。サンプルでos.loadavg関数を呼び出してロードアベレージを取得している。

ちょっと休憩する。