PyLadiesTokyo秋合宿で「いちばんやさしいPython機械学習の教本」を読みました

PyLadiesTokyo秋合宿

今年もPyLadiesTokyo秋合宿に行ってきました！＠埼玉秩父
天気に恵まれて、ずっと晴れてました！

秩父

いちばんやさしいPython機械学習の教本

今回自分のテーマは「いちばんやさしいPython機械学習の教本」という本でした。
実は発売前からアマゾンから予約して、届いてからちゃんと読んでなくて、今回の合宿でちゃんとやろうと思って、持っていきました。

読んでみて思ったのは、まさにその名の通り、すごくやさしい教材でした。説明も分かりやすく、実装の成功体験から得た喜びがモチベーションになり、さらに深堀りにしていきたいと思いました。

Chapter4の画像分析（数字判定）だけ理解は少し難しかったです。（ちょうど合宿の1日目の終盤に近づいたところ・・ボーッとしてたかもしれません）この章だけ軽く読み飛ばしながらやってました。

実はPyLadiesでJupyter Notebookで操作や分析用のライブラリーなどを学んだことがあり、前職でも機械学習のプロジェクトに参加したことがあったので、全体像はぼんやり把握してましたが、実際ゼロから作ったことはありませんでした。なので、今回の合宿で実践も兼ねてこの本読んでよかったと思いました。

さいごに

合宿に参加するのよいところは、普段ひとりで勉強するとき、いつもグーグル先生しか聞けなかったこと、近くにいる先輩たちに質問できるのと、最近の業界の話も聞けること。雑談の中で結構勉強になることも多かったです。面白いと思います。

普段の生活から離れて、その非日常の時間に癒やされて、今回もとてもよい旅になりました。

React.jsで簡易todo listを作ってみた（codepen, github）

React.js JavaScript フロントエンド 保存フォルダ

プロローグ

React.js公式サイト（英語）

一通りReact.jsのDocumentのinstallationとquick startを実践しながら勉強しました。
実際に自分どこまで理解できたのか知りたいので、簡単なWeb applicationを作ってみようかなと。
初心者向けの課題によく出て来るtodo listを選びました。

この記事の最後に完成したサンプル（codepen）とgithubのリンク貼り付けておりますので、ご参考にしていただければ幸いです。

要件定義

簡易バージョンなので、最低限のものだけ作りたいと思います。
- 書き込める場所
- 保存するボタン
- Todo Listを表示させる
（修正不可、削除不可）

ゴール：

完成したtodo list

参考サイト（英語）

1. Simple React todo list – Agata Krzywda – Medium

今回の勉強記録はこの記事の内容を整理しつつ、公式サイトと見比べながら書き換えたものになります。

スタート

（ターミナルで）
tutorialでインストールしたReactのcreate-react-appコマンドを使って、todolistフォルダを作成します。

$ create-react-app todolist

フォルダ内に移動します。

$ cd todolist
$ npm start

自動的にローカルでブラウザ立ち上がり、React.jsページのデフォルトの状態が表示されます。

そして、エディターでフォルダを開くと、構造は
-node_modules/
-public/
-src/
-package-lock.json
-package.json
-README.md
になっています。

/src/app.js
/src/index.js
デフォルトの書き方は主に記述内容はapp.js内で書いて、index.js内でapp.jsを呼び込んで、/public/index.html内で描きます。

実行されるものはindex.jsなので、今回はapp.jsを使わずに、index.jsだけ使いたいと思います。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

いらないものを削除して、これだけ残します。
そして、app classをimportの後に追記します。
formを作って入れます。

import React from 'react';
import ReactDOM from 'react-dom';

class App extend React.Component {
    render() {
        return(
            <div>
                <form>
                    <input type="text" value="" />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Appの構造を定義します。

   constructor(props) {
        super(props);
        this.state = {
            term: '',
            items: []
        };
    }

そして、functionは２つあります。
onChangeはinput内に書いたら、inputのvalueに保存する→[term]
onSubmitは先ほど保存したvalueをstate内のitemsにパスする→[items]

constructor内でfunctionを結びついてから、functionを書きます。

   constructor(props) {
        super(props);
        this.state = {
            term: '',
            items: []
        };

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChange(e) {
        this.setState({
            term: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();
        this.setState({
            term: '',
            items: [...this.state.items, this.state.term]
        });
    }

...this.state.items
という書き方はquick start内には説明してなかったけど、advanced guide内にはありました。

JSX In Depth - React

すべての〇〇という意味です。ここはすべてのthis.state.itemsです。

そして、renderで書いてたform内のfunctionと繋げます。
formの書き方こちらを参照してます。

Forms - React

   render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.term} onChange={this.onChange} />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }

最後、todo listを表示するために、functionを作ります。
mapの書き方こちらを参照してます。

Lists and Keys - React

function List(props) {
    const items = props.items;
    const listItems = items.map((item, index) => 
        <li key={index}>
            {item}
        </li>
    );
    return(
        <ul>
            {listItems}
        </ul>
    );
}

class App内のreturnをを追記して、this.state.itemsと繋げます。

   render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.term} onChange={this.onChange} />
                    <input type="submit" value="Submit" />
                </form>
                <List items={this.state.items} />
            </div>
        );
    }

最終的にまとめてみると、こうなります。

import React from 'react';
import ReactDOM from 'react-dom';


function List(props) {
    const items = props.items;
    const listItems = items.map((item, index) => 
        <li key={index}>
            {item}
        </li>
    );
    return(
        <ul>
            {listItems}
        </ul>
    );
}


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            term: '',
            items: []
        };

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChange(e) {
        this.setState({
            term: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();
        this.setState({
            term: '',
            items: [...this.state.items, this.state.term]
        });
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.term} onChange={this.onChange} />
                    <input type="submit" value="Submit" />
                </form>
                <List items={this.state.items} />
            </div>
        );
    }
}


ReactDOM.render (
    <App />,
    document.getElementById('root')
);

ブラッシュアップ

テストで何件タスクを入れてみましたが、改善点を見つけました。
例えば、間違えてenter(return)を押したら（＝submitボタンを押したら）、空白のままでリストに入っちゃうので、それをブロックしたいです。

最後に空白なら追加しないようにonSubmit functionに条件入れます。

   onSubmit(e) {
        e.preventDefault();
        if(this.state.term){
            this.setState({
                term: '',
                items: [...this.state.items, this.state.term]
            });
        }
    }

これで間違えて押しても追加されません！

Todo Listの完成体はこちらです！

（はじめてCodepenを導入してみました！）

See the Pen Todo list made by React.js by manmanrai (@manmanrai) on CodePen.

Githubでソースコードアップしました。
※ディレクトリやファイルほぼデフォルトのままです。手入れたファイルはindex.jsのみになってます。

github.com

【新】Pixi.js でパララックススクローラーを作ってみる【第三回】

pixi.js 保存フォルダ

プロローグ

前回はFarとMidを独立させて、update functionも各自持たせるように変えました。
次はScroller functionを作って、FarとMidを配下に入れて、コントロール権をScrollerに持たせます。

Part2（続き）

Ch03 動作メソッド化

Scrollerに任せる

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();

  // // 画像を呼び出す（Far function使用）
  // far = new Far();
  // stage.addChild(far);

  // // 画像を呼び出す（Mid function使用）
  // mid = new Mid();
  // stage.addChild(mid);

  // 画像をまとめて呼び出す
  scroller = new Scroller(stage);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    scroller.update();
    // far.update();
    // mid.update();

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    // 描画処理を繰り返しupdate functionを実行する
    requestAnimationFrame(update);
  }
}


// Far画像を独立させる
function Far() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Far.prototype.update = function() {
  this.tilePosition.x -= 0.128;
};

// Mid画像を独立させる
function Mid() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-mid.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 128;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Mid.prototype.update = function() {
  this.tilePosition.x -= 0.64;
};


// farとmid二枚画像をまとめる
function Scroller(stage){
  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);
}
// updateもまとめる
Scroller.prototype.update = function(){
  this.far.update();
  this.mid.update();
}

window.onload = init;
続きを読む

【新】Pixi.js でパララックススクローラーを作ってみる【第二回】

pixi.js

プロローグ

前回は画像を貼って、アニメーションまで完結しました。
これからの第二回と第三回はコードのメソッド化していきます。

Part 2

Ch02 画像メソッド化

Far functionにを作る

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();


  // 画像を読み込む
  var farTexture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  far.x = 0;
  far.y = 0;
  far.tilePosition.x = 0;
  far.tilePosition.y = 0;

  stage.addChild(far);


  // 画像を読み込む
  var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
  // タイル貼る範囲を指定する
  mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  mid.x = 0;
  mid.y = 128;
  mid.tilePosition.x = 0;
  mid.tilePosition.y = 0;

  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    requestAnimationFrame(update);
  }
}



// Far画像を独立させる
function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;
続きを読む

【新】Pixi.js でパララックススクローラーを作ってみる【第一回】

pixi.js

プロローグ

前回のものをもう一回見直して、コードを綺麗に整理しないとここにアップしないと決めました。まだまだ未熟なので、説明うまく伝えないところ、間違ってるところあれば、いつでもご指導頂ければ嬉しいです。
宜しくお願いいたします。

出処

Pixi.js公式サイトがお薦めのチュートリアル

Tutorials - PixiJS v4

kittykatattackさんのチュートリアルを勉強した上に

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.

Christopher Calebさんのチュートリアルを参照しながら作ってみたものになります。

Building a Parallax Scroller with Pixi.js: Part 1

続きを読む