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

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

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

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

• $1,500以上の残高、もしくはセービングス口座や定期預金口座との合算で$5,000以上の残高があれば、口座維持手数料は無料となる。
• https://www.unionbank.com/personal-banking/japanese/jpn/ca-account-pac-rim-benefits-terms.jsp

レギュラー・セービングス（Regular Savings）

• $300以上の残高、もしくは毎月$25ドル以上の預け入れが1回以上あれば、口座維持手数料は無料となる。
• https://www.unionbank.com/personal-banking/checking-savings/savings/compare-savings-accounts-rates.jsp

参考

• https://ameblo.jp/nekobancho/entry-12123111280.html
• https://ameblo.jp/fostercity/entry-11235368639.html

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

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

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

• 09:09 - 10:49 フライト
  • Alaska 407: サンノゼ国際空港（SJC） → ポートランド国際空港（PDX）
• 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 フライト
  • Alaska 402: ポートランド国際空港（PDX） → サンノゼ国際空港（SJC）

Mission Peak 春と夏の景色

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

参考

• http://www.ebparks.org/parks/mission

Load modules in Node.js

When we create modules in Node.js, we can use "module.exports" or "exports" objects. However, I didn't understand the difference of them. In this article I have sorted out when to use each object. Note: I don't mention the detailed difference of the two in this article, you can find it in the link described below.

Which to use, "module.exports" or "exports"?

Use "module.exports" to export single class function or object.

class MyClass {
    ...
}
module.exports = MyClass;

Use "exports" to export multiple functions or objects.

function myFunc1 {
    ...
}
function myFunc2 {
    ...
}
exports.myFunc1 = myFunc1;
exports.myFunc2 = myFunc2;

* "module.exports" can also be used, but using "exports" is simpler.

module.exports = {
    myFunc1: myFunc1,
    myFunc2: myFunc1
}

The behaivior when executing "require" mutilple times.

The script loaded by "require" is evaluatted only the first time and "require" returns cached object from the second time.

• module.js

var _var = Math.random();
function func() {
    console.log(`module.js - func : _var=${_var}`)
}
exports.func = func;

• main.js

const module1 = require('./module.js')
const module2 = require('./module.js')
module1.func()
module2.func()

• Result

module.js - func : _var=0.7381836391077983
module.js - func : _var=0.7381836391077983

Reference

• https://nodejs.org/api/modules.html#modules_exports_shortcut

React Quick Start Cheat Sheet

I came up with a new web application idea, and I tried to use React in the development this time. Although React has a rich document for developers, I don't have good memory. Therefore I always take a note when I study a new library to remember the usage. I guess this note may be also useful for others, and like to share it in this article.

This time I made a sample program wrapping up React Quick Start. Also I have registered it sample code to 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')
);

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')
);

Object Oriented Programming in JavaScript

Although I'm familiar with Object Oriented Programming (OOP) as I has been using Java for a long time, I've never tried to use it in JavaScript. When I researched OOP in JavaScript, I found it a little complicated because there exist a few ways to implemnt. In this article, I sorted out and simplified them.

• Use function as class cannot be used in JavaScript before ES5.

var ES5Class = (function() {

    // constructor
    var ES5Class = function(member) {
        // Cope with the following usage which doesn't use new operator.
        // var instance = ES5Class();
        if(!(this instanceof ES5Class)) {
            return new ES5Class(member);
        }

        // members
        // Conventionally prefix an under score to the name of private variables.
        // (Although it can be accessed from outside the class.)
        this._member = member;
    };

    // Declare a method with prototype.
    // Methods can be declared in following way, but it's not efficient
    // because functions will be created every time an instance is generated.
    //   this.printMethod = function... 
    var p = ES5Class.prototype;
    
    // methods
    p.printMember = function () {
        console.log(this._member);
    }

    return ES5Class;
})();

module.exports = ES5Class;

• With JavaScript later than ES6, class syntax can be used to declare classes.

class ES6Class {

    // constructor
    constructor(member) {
        // memners
        // Conventionally prefix an under score to the name of private variables.
        // (Although it can be accessed from outside the class.)
        this._member = member;
    }

    printMember() {
        console.log(this._member);
    }
}

module.exports = ES6Class

• class syntax can also define static methods but cannot define static members.

// As there is no way to declare static members in class syntax,
// define global-scope variables instead.
var _member = 0;

class ES6StaticClass {

    // static methods
    static printMember() {
        _member++;
        console.log(_member);
    }
}

module.exports = ES6StaticClass