SOFT SKILLS いいと言われている本を読んで紹介するシリーズです。 今回は『SOFT SKILLS - ソフトウェア開発者の人生マニュアル』を読んだので紹介。 本の概要 タイトルに「ソフトフェア開発者の」と入っていますが、中身はエンジニアに特化した内容ではあり…

概要 React+Reduxの学習で、Reactチュートリアルの三目並べにReduxを使って書き直してみました。 このシリーズではチュートリアル形式で書き方を解説していきます。 今回はその第1弾として、connect APIを使い、JavaScriptで書いてみます。 参考文献 この記…

この記事は、2021/12/30にnoteに投稿した記事の転載です。noteからはてなブログへ移行を行っています。 久しぶりの投稿は転職エントリです。 2021年現在社会人2年目ですが、11月に転職し株式会社オープンロジで働いています。 自己紹介 オープンロジのWebエ…

タイムトラベル機能の追加｜Stateのリフトアップ、再び squaresを配列historyに保存しておき、あとで参照できるようにしていきます。 これまで、stateはBoardコンポーネントに実装していましたが、これをGameコンポーネントに移し、Boardにはpropsを渡すこと…

手番の処理 ここからBoardコンポーネントを編集して手番ごとにXとOを入れ替えてプロットされるようにします。 編集後のBoardコンポーネントは以下のようになります。 const Board: VFC = () => { const [squares, setSquares] = useState<FillSquare[]>(Array(9).fill(null</fillsquare[]>…

前回の続きです。 いよいよ三目並べづくりに入ります。 インタラクティブなコードをつくる 盤面のマスをクリックするとXが現れるようにします。 はじめにSquareコンポーネントにstateを持たせます。 公式チュートリアルではこのように実装されています。 cla…

前回からの続きです。 データを Props 経由で渡す マスに数字がプロットされた次のようなアウトプットを想定します。 公式チュートリアルでは、 class Board extends React.Component { renderSquare(i) { return <Square value={i} />; // 追加 } } // ︙ class Square extends </square>…