unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

H2O Wireless 着信転送設定

KDDIから提供される利用ガイドには記載されていませんが、以下の方法で着信を転送することができます。

不在着信のみ転送する
  • 設定:**004* + 転送先電話番号 + # に発信する。
    • 1234567890 に転送する場合:**004*1234567890#
  • 解除:#004# に発信する
全ての着信を転送する
  • 設定:**21* + 転送先電話番号 + # に発信する。
  • 解除:#21# に発信する
参考

http://www.prepaidphonenews.com/2017/07/call-forwarding-now-supported-on-all.html

帰国時のアメリカ銀行口座(Union Bank)手続き

アメリカからの帰国時に必要な諸々の手続きについてまとめています。今回は銀行口座の手続きについてです。

  • Form W-8BENの提出
  • パシフィックリム・カンパニーベネフィット・プログラム(Pac Rim)への切り替え
    • 日本企業の海外子会社に勤務している場合は、チェッキング口座の種類をパシフィックリム・カンパニーベネフィット・プログラムに変更すると良いとのこと。
    • Ready to Go・プログラムなどの支店開設の口座よりもコールセンター(電話)でできる手続きが多くなる、もしくはプロセス(書類など)が簡単になる。
    • 口座維持手数料免除条件などは大体同じだが、その他のパシフィックリムのメリットはカリフォルニア州以外での提携ATMでの手数料が無料になること。
    • セービングス口座はチェッキング口座に紐づく形で引き続き維持できる。
  • 口座切り替えは支店もしくはコールセンターで依頼できる。
    • 切り替え後に送金用のトークンを申請する書類が届く。(トークンの申請は帰国後でも可能。)
  • 一定期間の利用がないと口座が凍結されるため、チェッキング口座からセービングス口座への毎月の自動送金を設定しておくとよい。

パシフィックリム・カンパニーベネフィット・プログラム

レギュラー・セービングス(Regular Savings)

参考

サンノゼからポートランドへのお手軽日帰り旅行

飛行機のチケットが安く取れたので、ポートランドまで日帰り旅行をしてきました。気軽に飛行機で旅行ができるのは国内線が発達しているアメリカの良いところです。

朝ゆっくり出て夕方早めに帰るというのんびりプランでしたので、有名な観光スポットを短時間で周れるように計画して行きました。日帰り旅行だけでなく、出張ついでにポートランドで暇な時間がある、という方にもご参考になるかもしれませんので、私の観光プランをご紹介します。

  • 09:09 - 10:49 フライト
  • 11:12 - 11:55 路面電車ダウンタウンへ移動
    • Portland Int'l Airport Station → Galleria/SW 10th Ave
  • 12:00 - 12:30 フードカート(Food Carts)
    • フードカートが多く集まっている場所で世界中の料理が食べられる。
  • 12:35 - 13:05 エースホテル(Ace Hotel Portland) & スタンプタウン・コーヒー(Stumptown Coffee)
    • エースホテル古いホテルをリニューアルしたデザインホテル
    • ホテルの1階にはポートランドサードウェーブコーヒーの代名詞ともいえるスタンプタウン・コーヒーがあります。
  • 13:10 - 13:40 ユニオン・ウェイ(Union Way)
    • 工芸品などを売っているお店が道沿いに集まっています。
  • 13:45 - 14:25 Powell’s City of Books
    • 増築を重ねて迷路のようになった本屋さん。
  • 14:35 - 15:05 ブードゥー・ドーナッツ(Voodoo Doughnut)
    • ブードゥー・ドール(Voodoo Doll)という人型のドーナツが定番のドーナツショップ。
    • 休日は行列ができるため、30分程度待つことを覚悟した方が良い。
  • 15:10 - 15:45 ポートランド・サタデー・マーケット(Portland Saturday Market)
    • 大規模な野外アート・クラフト・マーケット。 ライブイベントも開催される。
  • 15:53 - 16:26 路面電車で空港へ移動
    • Skidmore Fountain MAX Station → Portland Int'l Airport Station
  • 17:50 - 19:31 フライト

ReactとMaterial-UIでControlled Componentを実現する

ReactとMaterial-UIを使ってフォームを作るときにどのようにControlled Componentを実現するかで少し悩んだので、ご参考までに自分なりの解決策をご紹介します。

理想の実装方法

通常のHTMLの場合と同様に下記のように実装できると理想的です。

  • JSX
<input name="number" type="number" value={this.state.value} onChange={this.handleChange} />
handleChange(event) {
    this.setState({value: event.target.value});
}

ところがMaterial-UIのコンポーネントではいくつかの問題が発生します。

1. SelectFieldではイベントハンドラのevent.targetにMenuItemが設定される

event.targetには選択したMenuItem(実際にはMenuItemが変換されたdiv要素)が指定されます。 このため、SelectFieldのname属性に他のコンポーネントと同じようにアクセスできません。

2. イベントハンドラのコールバック関数の形式がバラバラである

コンポーネント コールバック関数の形式
TextField function(event: object, newValue: string) => void
SelectField function(event: object, key: number, payload: any) => void
DatePicker function(null: undefined, date: object) => void

3. イベントハンドラを登録する属性名がバラバラである

コンポーネント 属性名
Checkbox onCheck
RadioButton onChange
Toggle onToggle
TextField onChange
SelectFiled onChange
DatePicker onChange
TimePicker onChange

4. id属性もしくはname属性を設定しないと警告メッセージが表示されるコンポーネントがある

RadioButton、TextField、Timepickerにid属性もしくはname属性を設定しないと下記の警告メッセージが表示されます。

Warning: Material-UI: We don't have enough information to build a robust unique id for the TextField component. Please provide an id or a name.

これは既知のバグのようで、現在のところは特に設定する理由がなくても属性を設定しておくのが良さそうです。

参考:https://github.com/callemall/material-ui/issues/4659

解決策

色々と悩んだ結果、イベントハンドラで直接stateを変更するのではなく、フォームの名前を渡してstateを変更する関数を返す、という実装で上記の問題を回避しました。

  • JSX
<TextField
    name="tf" 
    value={this.state.tf} 
    onChange={this.handleChange('tf')}
/>
handleChange(name) {
    var _this = this;
    return function(event, a, b) {
        if(typeof b === 'undefined') {
            _this.setState({[name]: a});
        } else {
            _this.setState({[name]: b});
        }
    }
}

Mission Peak 春と夏の景色

ベイエリアでは11月頃~3月頃が雨季でこの期間はよく雨が降るのですが、それ以外の時期にはほとんど全くと言って良いほど雨が降りません。
サンノゼから少し北に行ったところにMission Peakという人気のハイキングトレイルがあり、この山は雨季に青々と成長した草が、夏には一気に枯れて茶色に変化します。
このわずか2、3ヵ月の間の変化を記録してみるとおもしろいのではと思い、春(4月)と夏(7月)に同じ場所から写真を撮って比較してみました。

f:id:unhurried:20170721153121j:plain:w500

f:id:unhurried:20170721153432j:plain:w500

f:id:unhurried:20170721153458j:plain:w500

参考

React Quick Startを簡単に復習できるサンプルコード

Webアプリのアイデアがふと思い浮かんだので、開発するときにこれまで使ったことのないライブラリを導入してみようと、Reactに挑戦しています。
Reactはドキュメントが充実していて大変素晴らしいのですが、私は物覚えが悪いので一度読んでもすぐに忘れてしまうことが多いです。ですのでいつも後でさっと見返せるように自分用に簡単なメモを作るのですが、このメモがもしかするとどなたかの役に立つかもしれないと思いましたので、ご紹介します。

今回はReact Quick Startをポイントをまとめたサンプルコードです。
(CodePenにも登録しています:React Cheat Sheet

// React Element

// Tag syntax like "<p> ... </p>" is called JSX, and JSX produces a React element.
// React elements are the descriptions of what you want to see on the screen.
// React elements are imuutable and they can't be changed once they are defined.
// (See following React components for how you can update the DOM.)
const singleLineElement = <p>Hello World.</p>;

// When you split JSX over multiple lines, 
// it is recommended to wrap it in parentheses to avoid automatic semicolon insertion by editors.
// Expressions can be embedded in JSX. (JSX itself is also an expression.)
// React escapes any values embedded in JSX before rendering them to prevent injection attacks.
const href = "https://www.time.gov/";
const multipleLinesElement = (
    <p>
        <a href={href} >Current Time: {new Date().toLocaleTimeString()}</a>
    </p>
);

// React Component
// React components accept inputs (props) and return React elements.
// They can be defined with "function" or "class", and used in JSX format like "<MyComponents />".

// React component in the "class" style
// React component extends React.Component class.
// Component name (= class name) must be started with a capital letter.
class ClassComponent extends React.Component {

    // Constructor recieves JSX attributes as a single props object.
    // React component must not modify its own props.  
    constructor(props) {

        // Constructor should always call the base constructor with props.
        super(props);

        // this.state is a special object used to store the state of the component.
        // this.state can be initialized only in the constructor.
        this.state = {value: 1};

        // Assign "this" to methods to handle events.
        this.handleChange = this.handleChange.bind(this);
    }

    // Define a method to handle an event.
    // React passes SyntheticEvent according to the W3C spec.
    handleChange(event) {

    // Use setState() method to modify the state.
    // setState() merges the object you provide into the current state.
    this.setState({value: event.target.value});
    // Use callback when you modify the state based on previous state.
    // (The update of the state may be asynchronous.)
    //     this.setState((prevState, props) => ({
    //         counter: prevState.counter + props.increment
    //     }));
    }
    
    // render() returns a single root React element which will be shown in the DOM. 
    // If render() returns null, the component will not be rendered.
    render() {
        return (
            <div>
                <form>
                    <input type="number" value={this.state.value} onChange={this.handleChange} />
                </form>
                <FunctionComponent number={this.state.value} />
            </div>
        );
    }

    // componentDidMount() is called after the component output has been rendered to the DOM.
    componentDidMount() {
        console.log("componentDidMount()");
    }

    // componentWillUnmount() is called when the component is being removed from the DOM.
    componentWillUnmount() {
        console.log("componentWillMount()");
    }
}

// React component in the "function" style
function FunctionComponent(props) {

    const number = props.number;
  console.log(number);
    var listItems = [];
    // When you define a list, a "key" attribute needs to be specifined in every element of the list.
    // (Keys help React identify which items have changed, are added, or are removed.)
    // Keys used within arrays should be unique among their siblings.
    for(var i=0; i<number; i++) {
// for(var i=0; i<number; i++) {
        listItems.push(
            <li key={i.toString()}>{i+1}</li>
        );
    }

    return (
        <ul>{listItems}</ul>
    );
}

// ReactDOM.render() renders React components (or elements).
// Pass a component or an elemment to render and root DOM where you want to show it.
// React DOM updates only necessary parts of the DOM.
ReactDOM.render(
    <ClassComponent />,
    document.getElementById('root')
);

JavaScript エラー処理(独自エラー・条件分岐)

Javaで例外処理と言えば、Exceptionクラスを継承したクラスを定義して、instanceof演算子で条件分岐するのが定番です。JavaScriptの定番について調べてみたところ、大きくは下記の2パターンがあるようです。

  1. Errorオブジェクトを継承する

    • Errorオブジェクトを継承したクラス(ES5以前の場合はprototypeを継承したオブジェクト)を定義して、instanceof演算子で条件分岐します。
    • instanceof演算子で比較するため、文字列比較と異なり確実に比較ができますが、条件分岐をするコードでも独自Errorクラス(オブジェクト)をロードする必要があります。
  2. Errorオブジェクトのnameプロパティを変更する

    • Errorオブジェクトを生成して、nameプロパティを変更して、nameプロパティに設定した文字列一致で条件分岐します。
    • 手軽に記述できる一方、文字列一致のため予期せず依存するモジュールに定義されているエラーとnameプロパティが重なってしまう可能性があります。

サンプルコード

error.js

var ERROR = {};

// Errorを継承したままではnameプロパティは「Error」のままであるため、
// nameプロパティを独自のエラークラスの名称に変更する。
ERROR.Error1 = class extends Error {}
ERROR.Error1.prototype.name = "Error1";

// ES5以前の場合はprototypeを使って継承する。
ERROR.Error2 = function (message) {
    this.message = message;
}
ERROR.Error2.prototype = new Error;
ERROR.Error2.prototype.name = "Error2";

module.exports = ERROR;

module.js

const ERROR = require('./error.js');

class MyClass {
    static myMethod(arg) {
        if (arg === 1) {
            throw new ERROR.Error1("Error1 occured.")
        } else if (arg === 2) { 
            throw new ERROR.Error2("Error2 occured.")
        } else if (arg === 3) { 
            const e = new Error("Error3 occured.")
            e.name = "Error3";
            throw e;
        }
    }
}

module.exports = MyClass;

main.js

const MyClass = require('./module.js');
const ERROR = require('./error.js');

try {
    MyClass.myMethod(1);
} catch(e) {
    if (e instanceof ERROR.Error1) {
        console.log(e.name);
        console.log(e.message);
    }
}

try {
    MyClass.myMethod(2);
} catch(e) {
    if (e instanceof ERROR.Error2) {
        console.log(e.name);
        console.log(e.message);
    }
}

try {
    MyClass.myMethod(3);
} catch(e) {
    if (e.name === "Error3") {
        console.log(e.name);
        console.log(e.message);
    }
}

実行結果

$ node main.js
Error1
Error1 occured.
Error2
Error2 occured.
Error3
Error3 occured.

参考