『動かして学ぶAI・機械学習の基礎』の査読を担当しました

素晴らしい冒険があなたを待っている

2022年6月3日にオライリージャパンから『AI and Machine Learning for Coders』の邦訳である 『動かして学ぶAI・機械学習の基礎』が発売される。

www.oreilly.co.jp

この度、邦訳の査読者としてお手伝いさせていただいた。

原著タイトルにある「for Coders」通り、プログラマのための機械学習やそれをベースにした人工知能の入門書であり、コードを書いて実際に動かして学ぶ本である。 昨今、機械学習の入門書は大量にあり、どれを選べばよいのかわからなくなるが、この本の特徴として、Courseraで実際に使われた教材をベースにしているという裏付けがある、という点だろうか。 本書に登場するサンプルも単なる手書き数字の識別ではなく少し発展して同じサイズの画像を見分ける例、馬と人を見分けるという一部の層に刺さりそうな例など題材も進化したものになった。 フレームワークはTensorFlowであり、AndroidやiOS、JavaScriptで動かすことを想定した章もある。 また、「AI倫理、公平性、プライバシー」の章もあり気を付けるべき事柄も抑えている。

気になる方は是非手に取って動かしてみてほしい。

『Reactハンズオンラーニング 第2版』5章

Reactの門を引き続き眺める

オライリージャパンさんから頂いた『Reactハンズオンラーニング 第2版』を引き続き読み進める。

www.oreilly.co.jp

5章は「ReactとJSX」ということで、JSXを使ってコンポーネントを実装して、webpackでビルドする、という流れ。 HTMLの構造をJacaScriptで書いていく、という雰囲気。 題材としてはレシピ集である。

まずはレシピを受け取って表示するもの。

import React from "react";
import Recipe from "./Recipe";

export default function Menu({recipes}) {
    return (
        <article>
            <header>
                <h1>Delicious Recipes</h1>
            </header>
            <div className="recipes">
                {recipes.map((recipe, i) => (
                    <Recipe key={i} {...recipe} />
                ))}
            </div>
        </article>
    );
}

レシピは材料リストと工程からなる。

export default function Reecipe({name, ingredients, steps}) {
    return (
        <section id={name.toLowerCase().replace(/ /g, "-")}>
            <h1>{name}</h1>
            <IngredientsList list={ingredients}/>
            <Instructions title="Cooking Instructions" steps={steps}/>
        </section>
    );
}

そして材料リストは材料から、工程は、、、とコンポーネント単位で分解して合成していく。

最後は index.js あたりにまとめる。 実際のデータはdataディレクトリにあるJSONファイルを参照しているが、現実のアプリケーションはこれをJavaScriptで取得する、という感じになるだろう。

import React from "react";
import {render} from "react-dom";
import data from "../data/recipes.json"
import Menu from "./components/Menu";

render(<Menu recipes={data}/>, document.getElementById("root"));

HTMLのコンポーネントをJSXで分解していくのはなかなかセンスが問われるだろう、と感じた。

『Reactハンズオンラーニング 第2版』4章

Reactの門を眺める

『Reactハンズオンラーニング 第2版』をオライリージャパンさんから頂いた。

www.oreilly.co.jp

今のところ、ReactやJavaScript、フロントエンドの技術は守備範囲外で、必要に迫られて急場しのぎ、という事が多い。 今後、フロントエンドの話題についていくためにもある程度メジャーな技術に触れておこうと思い、『Reactハンズオンラーニング 第2版』に挑戦してみることにした。 僕の場合、ちょっとかじってすぐにやめる、というケースが多すぎるのでこれは継続してきたいが果たして。

Reactの基礎

Reactの最小単位である要素とコンポーネントを学ぶのが4章である。

React.createElement("h1", {id: "recipe-0"}, "Baked Salmon");

とすると、ReactがDOM要素に変換してくれる。 JavaScriptがそのままHTMLになるのは面白い。 実際に描画しているのはReactライブラリじゃなくてReactDOMライブラリであるが。

UIの部品をReactではコンポーネントと呼ぶ（Reactじゃなくてもそう呼びそう）。 過去にReactコンポーネントを作成する方法はReact.createClassやES2015のclass構文で作成していたらしいが、今は関数として実装するのが普通らしい。 2章や3章はJavaScriptの関数型プログラミングに費やされている。

    function IngredientsList({items}) {
        return React.createElement(
            "ul",
            {className: "ingredients"},
            items.map((ingredient, i) =>
                React.createElement("li", {key: i}, ingredient)
        )
        );
    }

    const items = [
        "1 cup unsalted butter",
        "1 cup crunchy peanut butter",
        "1 cup brown sugar",
        "1 cup white sugar",
        "2 eggs",
        "2.5 cups all purpose flour",
        "1 teaspoon baking powder",
        "0.5 teaspoon salt"
    ];

    ReactDOM.render(
        React.createElement(IngredientsList, {items}, null),
        document.getElementById('react-container')
    );

コンポーネントとデータを分離できる、というのが売りであるが、この例ではコード上では分離できているが同じHTMLに埋め込んでいるだけじゃん、となる。 もっと発展した例は次章以降で出てくるのだろう。