『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に埋め込んでいるだけじゃん、となる。 もっと発展した例は次章以降で出てくるのだろう。

『システム運用アンチパターン』を読んだ

DevOpsを行うために必要なもの

オライリージャパンさんから『システム運用アンチパターン』をいただいた。 ありがとうございます。

www.oreilly.co.jp

「上層部がDevOpsに理解のない組織で働き、組織構造を変える権限を持っていない開発者であっても、チームにDevOpsを導入するための現実的な方法を紹介します。」という紹介にある通り、 開発環境を変えるべく開発者ができることを色々と学べる本である。 タイトルのアンチパターンの通り、各章の見出しはアンチパターンで構成されているが、アンチパターンをベースに悲惨な開発状況をシニカルに描く、という本ではなくあくまでアンチパターンはよくない状況の例示に留めて具体的に何をすればいいのか、という話題が中心である。

個人的にグサッと来たのは組織文化について書かれた11章である。

命じられた文化 というアンチパターンは、組織の文化が、メインロビーに飾られているくどい声明やプレートに記されているものの、実際には具体的な形では存在していない場合に発生します。文化は、育て、発展させ、言葉だけではなく行動で示されなければなりません。

思い当たる節があるというかありすぎるというか。 毎週の朝礼で社訓を絶叫する会社もあれば、入社後に突然それらが策定されたが何も理解できないまま時間が過ぎる、というのもあった。

各章必要なところだけを読み、業務に必要な要素をどんどん取り入れていくことが必要なのだろう。