JSのnullチェック

掘り起こし整理案件

[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita
javascriptでオブジェクト({ }とか連想配列であるobject)の判定をしたいがnullや配列([ ])に悩まされる問題をまじめに自分用まとめ - tweeeetyのぶろぐ的めも

チェック

f:id:danker512:20180111232357p:plain

f:id:danker512:20180111232503p:plain

val() は String

競技プログラミング

競技プログラミングを始めるために参考にさせてもらった記事

TopCorder登録

TopCoderの設定 - ferinの競プロ帳

Adventer

「競プロ!!」 競技プログラミング Advent Calendar 2017 - Adventar
C# で競プロをする話 - うにゅーん、って感じだ
競技プログラミングのための C# (4.0 以降) の Tips 詰め合わせ - C♯の勉強

環境構築

MacでC#のコードをコンパイルして実行する - Qiita
MacのAtomでOmniSharpを使う | C# / note.nkmk.me

Tips

[Sy] Topcoder SRM に初参加してハマったこと&感想 | Syntax Error.
競技プログラミングのための C# (4.0 以降) の Tips 詰め合わせ - C♯の勉強

PC机が欲しい

デンマーク産L字型ワークデスク 北欧デザイナーズ家具 | 【公式】LOWYA(ロウヤ)|家具・インテリアのオンライン通販

例外処理

例外処理

例外処理とは、本来ならばプログラム中で起こってはいけないことが起こってしまうことを言う。 例外が起こったときでもプログラムが異常な動作をしないよう、例外処理(exception handling)を行う必要がある。 例外をキャッチするのは、異常な状態を回復させ、処理を継続する場合のみ。

例外が発生する可能性のある側では、 throw 文を使って例外が起こったことを利用側に知らせる。

throw 例外クラスのインスタンス

この throw 文は想定外のことが起こった場所に挿入する。 throw 文によって投げられる例外は、 System.Exception クラスの派生クラスのインスタンスである。 それ以外のクラスのインスタンスを throw することは出来ない。

ex:

try
{
  例外が投げられる可能性のあるコード
}
catch(例外の種類)
{
  例外処理コード
}
finally
{
  例外発生の有無にかかわらず実行したいコード
  リソースの破棄などを行う
}

別の例外をスローする

try {

} catch (FileNotFoundException ex) {
    throw new MyAppException("ファイルが見つかりませんでした", ex)
}

変数 ex には例外オブジェクトが格納されている。
例外オブジェクトを参照することで、例外の詳細情報を知ることが出来る。

例外が発生したことを把握したい場合・例外の再スロー

try {

} catch (FileNotFoundException ex) {
    Log.Write(ex.ToString()); // Log出力
    throw;
}

特定の例外発生時に、それを無視して処理を継続させたいケースもある。 その場合は、なんの目的でその例外をキャッチするのか、なぜその例外を無視するのかをコメントで残すようにする。 例外を throw する場合、InnerException を破棄してはいけない。

参考: 例外処理 - C# によるプログラミング入門 | ++C++; // 未確認飛行 C 実戦で役立つ C#プログラミングのイディオム/定石&パターン:書籍案内|技術評論社

touch/mouseイベントに関して

Chrome61にてmouseDownがmouseUp/Moveによりキャンセルされてしまったため、調べた記録

yuitaku.hatenadiary.jp

developer.mozilla.org

qiita.com

【Vue.js】DOM から取得してきた値を配列/連想配列化、動的に値を操作する

はじめに

Vue.js に初チャレンジしてみたので、書き残し!

デモ: https://jsfiddle.net/se1yn/tt9fffps/

.ts

var app = new Vue ({
  el: '#app',
  data: {
    itemList: [],
    totalValue: 0,
    selectVal1: 0,
    selectVal2: 0,
    selectVal3: 0,
  },
  computed:{
    isDisabled: function() {
        return ((Number(this.selectVal1) === 0) && (Number(this.selectVal2) === 0) && (Number(this.selectVal3) === 0));
    }
  },
  created: function() {
    this.calc();
  },
  methods: {
    calc: function() {
      let itemList = [];
      let itemListValues = [10, 100, 1000];
            
      $("[id^=name]").each(function () {
        // id から連番取得
        let itemNum: number = Number($(this).attr("id").match(/\d/g));
        
        // 配列にオブジェクトをpush
        itemList.push({
          "name": $("#name" + itemNum).html(),
          "hasNum": Number($("#has-num" + itemNum).html()),
          "selectValue": Number($("#select" + (itemNum)).val()) * itemListValues[itemNum - 1],
          "afterHasNum": Number($("#has-num" + itemNum).html()) - Number($("#select" + (itemNum)).val())
        });
      });

      this.itemList = itemList;
      
      if(!$.isEmptyObject(itemList)) {
        this.totalValue = itemList.map(function(row){
          return [row["selectValue"]]
        }).reduce(function(prev, current){
          return prev.concat(current);
        }).reduce(function(prev, current){
          return prev + current;
        });
      }
    },
    comfirmModal: function(isDisabled, event) {
      if(isDisabled) {
        event.preventDefault();
        return false;
      }
      alert("この内容でアイテムを換金しますか?")
    }
  }
})

勘所

data は初期値、 created で初回に一発 calc メソッドを走らせる
v-on:click="comfirmModal(isDisabled, $event)" の第2引数で event が取得できる
computed で確認ポップアップの enable/disable をセレクトボックスの値に依存させて(ウォッチさせて)切り変える

所感

・公式のガイドライン強い
・ViewModel的な値は, computed を使って get/set した方が良いのかな

参考
computed: 算出プロパティとウォッチャ — Vue.js
component: ミックスイン — Vue.js

http://qiita.com/phi/items/723aa59851b0716a87e3http://qiita.com/phi/items/723aa59851b0716a87e3
https://javascript.programmer-reference.com/jquery-isemptyobject/
http://qiita.com/_shimizu/items/dd72a0f32647abd40fd7

Vue.js 事始め

環境

node: v6.11.0
npm: v3.10.10

Install

下記のコマンドで package.json を作成、
webpack, vue のインストールを行う。

npm init
npm install -g webpack
npm install --save-dev vue

webpack.config.json

const path = require('path');

module.exports = {
    entry: {
        'js/main': './src/js/main.js'
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js'
    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.common.js'
+        }
+    }
}

npm でインストールした vue はランタイム限定ビルドのため、 完全ビルドを利用する場合は、バンドラでエイリアスを設定する必要がある(上記のコードの + 部分)。
https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い

index.html

<div id="app">
  {{ message }}
</div>

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

webpack コマンドを打って、

> webpack

index.html をブラウザで開き、 Hello Vue! が画面に出力されれば OK

Hello Vue!

参考にさせていただいた記事:
はじめに — Vue.js
webpackを利用したVue.jsのビルド環境を作成する | GoodLife.tech