Murayama blog.

プログラミング教育なブログ

Reactだけ学ぶハンズオン 1/5

Reactとは

ReactはUIをつくるためのJavaScriptライブラリです。

  • Declarative
    • 宣言的なプログラミング（たとえばExcelのsum関数みたいな仕組み）
  • Component-Based
  • Learn Once, Write Anywhere
    • 一度学べば、どこでも動く（詳しくはRact Native）

Part1 Hello React - ハンズオン

ここでは次のような画面にHello Worldと表示するReactアプリケーションを作成します。

20170915200549

開発は以下の手順で進めます。

  1. ライブラリの設定
  2. コンポーネント仕様を定義
  3. コンポーネントクラスをレンダリング

1. ライブラリの設定

Reactで配布されてるreact.js、react-dom.jsを使用します。

<script src="https://unpkg.com/react@15.6.1/dist/react.js" charset="utf-8"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js" charset="utf-8"></script>

また、JSXをサポートするためにBabelを使用します。

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>

ここまでの作業をまとめると以下のとおりです。ファイル名は01_hello.htmlという名前で保存しておきます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello React 01</title>
  <script src="https://unpkg.com/react@15.6.1/dist/react.js" charset="utf-8"></script>
  <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js" charset="utf-8"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
</head>
<body>
</body>
</html>

2. コンポーネント仕様を定義

これからJavaScriptをゴリゴリ記述していくので、HTMLファイルのbodyタグの中にdivタグとscriptタグを定義します。scriptタグのtype属性にはtext/babelを指定してください。これでJSXシンタックスが利用できます。

<body>
  <div id="example"></div>
  <script type="text/babel">
  </script>
</body>

divタグはこれから作成するコンポーネントのコンテナとなる要素です。

ここでは画面にHello Worldと出力するコンポーネント仕様を定義し、コンポーネントクラスHelloWorldを作成します。ReactはコンポーネントをJSXで定義可能です。

scriptタグの中に以下のコードを記述します。

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

ここではes6（ES2015）のオブジェクト指向構文から導入されたclass命令を使ってクラスを定義しています。ここで定義したHelloWorldクラスはReact.Componentを継承しています。このようなクラスはReactコンポーネントと呼ばれます。Reactコンポーネントには必ずrenderメソッドを定義しなくてはいけません。

コンポーネントとは部品という意味です。

renderメソッドの内部では、戻り値がHTMLのようになっています。このような表記法はJSXと呼ばれ、コンポーネントを手軽に記述することができます。JSXをサポートするにはbabelライブラリを読み込む必要があります。JSXの利用は任意です。

3. コンポーネントクラスをレンダリング

作成したコンポーネントクラスを画面にレンダリングします。ReactDOM.renderメソッドの引数にコンポーネントクラス、コンポーネントのコンテナとなるDOM要素を指定します。

ReactDOM.render(<HelloWorld />, document.getElementById('example'));

ここまでの作業をまとめると次のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello React 01</title>
  <script src="https://unpkg.com/react@15.6.1/dist/react.js" charset="utf-8"></script>
  <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js" charset="utf-8"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
  class HelloWorld extends React.Component {
    render() {
      return <h1>Hello World</h1>;
    }
  }

  ReactDOM.render(<HelloWorld />, document.getElementById('example'));  
  </script>
</body>
</html>

新米PHPerのための5つのAtomパッケージ

今年もITエンジニア育成の新入社員研修に取り組んでいます。日々の空前絶後のハードなトレーニングのおかげで今年も優秀なPHPerたちがたくさん育っています。

慣れないプログラミングの習得に苦労しつつもポジティブにがんばっているみなさんへ。PHP初心者が効率良くPHPプログラミングを習得するためのAtomパッケージを紹介します。

linter-php

PHPの構文エラーを見つけてくれます。

atom.io

インストールの途中、依存パッケージも求められるので忘れずにインストールします。AtomのLinterパッケージはHTMLやCSSなど様々な言語に対応しているので必要に応じて探してみると良いです。

indent-guide-improved

インデント範囲をわかりやすく表示してくれます。

atom.io

プログラミングを理解できない人の多くはインデントを意識できていません。インデントを徹底すれば条件分岐の範囲や繰り返しの範囲も明確になります。プログラミングに慣れないうちはインデントを見やすくすると良いです。

あとAtomのデフォルト機能のAuto Indentも上手くつかいましょう。

show-ideographic-space

全角スペースを表示してくれます。

atom.io

これで、よくある全角スペース混入エラーともおさらばです。

atom-autocomplete-php

PHPコードの自動補完が強化されます。

atom.io

デフォルトの補完も便利ですが、関数の引数なども表示してくれるのでコーディングがさらに捗ります。

事前にPHPのパッケージ管理ツールであるComposerをインストールしておかないと起動時にアラートが出るようです。最初は無視しておいてもいいですが、気になる方はComposerをセットアップしてAtomのatom-autocomplete-php パッケージの設定画面でcomposerのPATHを指定する必要があります。 https://getcomposer.org/

php-debug

Xdebugでデバッグできるようになります。

atom.io

困ったときはデバッグしましょう。インストールはちょっとややこしいので詳しくは以下の記事で。

murayama.hatenablog.com

おまけ

私が普段使ってるAtomパッケージはこちらで確認できます。

https://atom.io/users/murayama333/stars

activate-power-modeはAtom使っているなら常識だし、個人的にはgist-itとか毎日のように使っています。scriptも昨日入れてみたけど便利だった。

ちなみにAtomにはapmコマンドというパッケージ管理のコマンドが付いています。apmでパッケージ管理すると上記のページのように、お気に入りのパッケージにスターをつけて管理できます。仲間と便利なパッケージを共有したり、別の端末に同じ設定でAtomパッケージをインストールしたり、いろいろできるので触ってみると楽しいと思います。

AtomでXdebugを使ってステップ実行するには

Xdebugをインストールします。

https://xdebug.org/

Xdebugは実行環境やPHPのバージョンによってインストールの手順が異なるので、以下のURLからインストール手順を確認します。

https://xdebug.org/wizard.php

ローカルで php -i した出力結果を上記のページにコピペします。

私の環境（Mac）だと以下のようになりました。Windowsだともっと簡単で、dll落とすだけで済むっぽい。

手順に従ってインストールします。

Xdebugの設定

続いてphp.iniにXdebugの設定を追記します。

[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=off
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

以降ビルトインサーバの起動時には9000番ポートを使うようにします。

php -S localhost:9000

Atomの設定

Atomの拡張パッケージであるphp-debugをインストールします。

https://atom.io/packages/php-debug

インストールが完了すると、AtomのフッターにPHP Debugのアイコンが表示されます。

動作確認

適当なPHPプログラムを書きます。sample.php

<?php
$message = "Hello World";
for ($i=0; $i < 10; $i++) {
  echo $message;
}

上記の4行目（行番号の横）をクリックしてブレークポイントを設定します。またAtomのフッターからPHPDebugアイコンからデバッグ用のウィンドウを表示しておきます。デバッグ用のウィンドウを表示しておかないとブレークポイントは有効にならないので注意です。

PHPプログラムを実行します（ビルトインサーバで動かしてもOK）。

php sample.php

ブレークポイントでコードの実行が停止するので、デバッグ用のウィンドウでコード実行を制御できます。

知る、ということ

朝、出社前にこどもをバス停まで送っていくと、いつも同じ時刻に通りかかるおじいさんがいます。ニコニコとこどもの顔を覗きこんでは何も言わず、とぼとぼと歩いていくおじいさん。

最近私も歩くようにしています。会社帰りに1駅くらい歩くだけ。いつまで続くかな。

脳が壊れた、という本を読みました。

脳が壊れた (新潮新書)

脳が壊れた (新潮新書)

脳梗塞後のリハビリでの体験や、周囲との関わり方、脳梗塞によって今までできていたことができなくなったことで初めてきづいたことを著者は「僥倖」としてポジティブに捉えています。

ぎょうこうと読みます。思いがけない幸運という意味です。

実際に読んでみて「見えない障害」と言われる高次脳機能障害について、私は知らなさすぎでした。

症状の中に、感情失禁というものがあるそうです。感情を抑えることができず泣き出してしまったり、言葉に詰まったり。赤ちゃんを見ると嬉しい気持ちになってニヤニヤしてしまったり。

そういうことだったのか。知らなさすぎた。

もしかしたら、朝のおじいさんも大変な思いをしてリハビリしているのかも。なんだか切なくなってきた。

知らなかったことを知ることで、見え方は変わる。

いろんなことに気づかせてくれる本でした。読んでよかった。僥倖。

クリエィティブに仕事をしよう。

今日のお昼ごはんはいつもと違う"ヘルシーデリ"なるお弁当を買ってみました。

お店の明るい雰囲気の惹かれてふらふらと。

会社に戻ってお弁当を開けてみるとおしゃれなお弁当箱。

入ってるおかずはふつうのお弁当と大差ないんだけど、いつもよりちょっとだけ気分がいい。ヘルシーやし。おしゃれやし。

おかげさまで社内でも「何そのお弁当？」と人気者になれました。

お弁当も入れ物や呼び名ひとつで、その価値は変わるんだなと。

お弁当を売るならこだわるのはごはんやおかずだけじゃない。お弁当の容器ひとつ販売員さんの売り方ひとつが、口コミになってインターネット上に流れて、新しいお客さまを連れてきてくれるかもしれない。

若いころはクリエイティブな仕事とそうでない仕事があると思ってたけど、 年とって思うのは仕事の内容じゃなくてクリエイティブに仕事するかどうかだってこと。

クリエィティブに作られたお弁当を食べてそう思った。

クリエィティブに仕事をしよう。

Java 例外オブジェクトの生成について

ここでは簡単な計算機プログラムを作成して例外処理について考察します。

Part1

次の計算機クラス（Calculator）は0による除算時に例外をスローします。

計算機クラス

package example;

public class Calculator {

    public int divide(int x, int y){
        return x / y;
    }
}

引数 y が0のとき例外が発生します。

Mainクラス

package example;

public class Main {

    public static void main(String[] args) {
        Calculator calc = new Calculator();
        // int result = calc.divide(9, 3);
        int result = calc.divide(9, 0);
        System.out.println(result);
    }
}

実行結果

Exception in thread "main" java.lang.ArithmeticException: / by zero
    at example.Calculator.divide(Calculator.java:6)
    at example.Main.main(Main.java:8)

Arithmeticとは "算数" という意味です。

Part2

次に独自の例外クラス（CalculatorException）を作成してみます。

計算機例外クラス

package example;

public class CalculatorException extends Exception {
}

例外クラスを作成する場合はExceptionクラス（およびそのサブクラス）を継承します。Exceptionクラスを継承すると検査例外クラスになります。RuntimeExceptionを継承した場合は実行時例外クラスになります。

計算機クラス

package example;

public class Calculator {

    public int divide(int x, int y) throws CalculatorException{
        if (y == 0) {
            throw new CalculatorException();
        }
        return x / y;
    }
}

CalculatorExceptionは検査例外クラスであるため、例外処理（try-catch or throws）が必須になります。

Mainクラス

package example;

public class Main {
    public static void main(String[] args) {
        Calculator calc = new Calculator();
        try {
            // int result = calc.divide(9, 3);
            int result = calc.divide(9, 0);
            System.out.println(result);
        } catch (CalculatorException e) {
            e.printStackTrace();
        }
    }
}

CalculatorクラスのdivideメソッドはCalculatorExceptionをスローします。CalculatorExceptionは検査例外クラスであるため、例外処理（try-catch or throws）が必須になります。

実行結果

example.CalculatorException
    at example.Calculator.divide(Calculator.java:7)
    at example.Main.main(Main.java:8)

Part1の実行結果と比較してみましょう。

e.printStackTrace();

変数eに対してprintStackTraceというメソッドを呼び出しているだけです。変数eはCalculatorException型の変数です。printStackTraceメソッドは例外情報（例外クラス名、メッセージ）とスタックトレース（メソッド呼び出しの履歴）を出力します。

例外クラス名: メッセージ
    スタックトレース
    ..
    スタックトレース

Part2.5

独自の例外クラス（CalculatorException）にはメッセージを含むこともできます。

計算機例外クラス

package example;

public class CalculatorException extends Exception {

    public CalculatorException(String message){
        super(message);
    }
}

スーパークラス（Exception）のコンストラクタにメッセージを設定すると、printStackTraceメソッドの中にメッセージを含むことができます。また設定したメッセージはgetMessageメソッドによって取得可能です。

計算機クラス

package example;

public class Calculator {

    public int divide(int x, int y) throws CalculatorException{
        if (y == 0) {
            throw new CalculatorException("/ by 0");
        }
        return x / y;
    }
}

Mainクラス

package example;

public class Main {
    public static void main(String[] args) {
        Calculator calc = new Calculator();
        try {
            // int result = calc.divide(9, 3);
            int result = calc.divide(9, 0);
            System.out.println(result);
        } catch (CalculatorException e) {
            e.printStackTrace();
            // System.out.println(e.getMessage());
        }
    }
}

実行結果

example.CalculatorException: / by 0
    at example.Calculator.divide(Calculator.java:7)
    at example.Main.main(Main.java:8)

Exceptionクラスのコンストラクタにはメッセージ以外にも、原因を表す例外オブジェクトを設定することもできます。これを使うと原因を表す例外オブジェクトを別の例外オブジェクトでラップすることができます。原因を表す例外オブジェクトはgetCauseメソッドで取り出すことができます。

Part3

独自の例外クラスを作成せずに、JavaのAPIに含まれる標準的な例外クラスを利用することもできます。

計算機クラス

package example;

public class Calculator {

    public int divide(int x, int y) {
        if (y == 0) {
            throw new IllegalArgumentException("y is zero");
        }
        return x / y;
    }
}

IllegalArgumentExceptionは不正な引数を表す例外クラスです。IllegalArgumentExceptionはRuntimeExceptionのサブクラスであるため実行時例外に分類されます。

Mainクラス

package example;

public class Main {
    public static void main(String[] args) {
        Calculator calc = new Calculator();
        try {
            // int result = calc.divide(9, 3);
            int result = calc.divide(9, 0);
            System.out.println(result);
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
            // System.out.println(e.getMessage());
        }
    }
}

catchする例外クラスをIllegalArgumentExceptionに変更しています。実行時例外の例外処理（try-catch or throws）は任意です。

実行結果

java.lang.IllegalArgumentException: y is zero
    at example.Calculator.divide(Calculator.java:7)
    at example.Main.main(Main.java:8)

参考：その他の標準的な例外クラス

http://murayama.hatenablog.com/entry/20091011/1255255351

会社組織で学ぶJavaの例外処理入門

Javaの例外処理についてサンプルプログラムを作ってみました。ここでは会社組織のおける部長（GeneralManager）、課長（SectionManager）、一般社員（Employee）クラスを作って組織的に仕事をする様子を実装してみます。

  • GeneralManager
    • 部長クラス。受け取った仕事を課長にお任せ（委譲）する。ただし、課長の対処しきれない仕事はどんな仕事でも片付ける。
  • SectionManager
    • 課長クラス。受け取った仕事を一般社員にお任せ（委譲）する。一般社員が対処しれない仕事に対処するが、それでも無理な仕事は部長にお返しする。
  • Employee
    • 一般社員クラス。受け取った仕事を処理する。無理な仕事は課長にお返しする。
  • Task
    • 仕事を表すクラス。仕事の名前と作業量を保持する。
  • TaskOverException
    • 対処しきれない仕事を表す例外クラス。
  • Main
    • maimメソッドを実装したクラス。

Javaプログラミング

まずは単純なTaskクラス、TaskOverExceptionクラスを作成し、次にEmployee、SectionManager、GeneralManagerクラスを作成します。そのあとMainクラスを作成して動作確認します。

Task

Taskクラスはタスク名と作業量を保持します。

package example;

public class Task {
    private String name;
    private int volume;

    public Task(String name, int volume) {
        this.name = name;
        this.volume = volume;
    }

    public String getName() {
        return name;
    }

    public int getVolume() {
        return volume;
    }
}

TaskOverException

TaskOverExceptionクラスは作業量超過を表す例外クラスです。

package example;

public class TaskOverException extends Exception {
}

Employee

Employeeクラスは作業量が5以下の仕事を処理します。作業量が多すぎる場合はTaskOverExceptionをスローします。

package example;

public class Employee {

    public void execute(Task task) throws TaskOverException {
        if (task.getVolume() <= 5) {
            System.out.println("Employee#execute " + task.getName());
        } else {
            throw new TaskOverException();
        }
    }
}

SectionManager

SectionManagerクラスは、Employeeクラスに処理を移譲します。SectionManagerはTaskOverExceptionを捕捉して処理します。このとき作業量が10以下の仕事を処理可能です。作業量が多すぎる場合はTaskOverExceptionをスローします。

package example;

public class SectionManager {
    private Employee employee;

    public void setEmployee(Employee employee) {
        this.employee = employee;
    }

    public void execute(Task task) throws TaskOverException {
        try {
            employee.execute(task);
        } catch (TaskOverException e) {
            if (task.getVolume() <= 10) {
                System.out.println("SectionManager#execute " + task.getName());
            } else {
                throw e;
            }
        }
    }
}

GeneralManager

GeneralManagerクラスは、SectionManagerクラスに処理を移譲します。GeneralManagerはTaskOverExceptionを捕捉して処理します。

package example;

public class GeneralManager {
    private SectionManager sectionManager;

    public void setSectionManager(SectionManager sectionManager) {
        this.sectionManager = sectionManager;
    }

    public void execute(Task task) {
        try {
            sectionManager.execute(task);
        } catch (TaskOverException e) {
            System.out.println("GeneralManager#execute " + task.getName());
        }
    }
}

Main

Mainクラスにはmainメソッドを実装します。

package example;

public class Main {

    public static void main(String[] args) {
        GeneralManager generalManager = new GeneralManager();
        SectionManager sectionManager = new SectionManager();
        Employee employee = new Employee();

        generalManager.setSectionManager(sectionManager);
        sectionManager.setEmployee(employee);

        Task smallTask = new Task("SmallTask", 1);
        generalManager.execute(smallTask);

        Task mediumTask = new Task("MediumTask", 10);
        generalManager.execute(mediumTask);

        Task largeTask = new Task("LargeTask", 100);
        generalManager.execute(largeTask);
    }
}

実行結果

mainメソッドの実行結果は次のようになります。

Employee#execute SmallTask
SectionManager#execute MediumTask
GeneralManager#execute LargeTask

まとめ

自分で対処できない仕事は上司に報告するようにしましょう。