ふくしま

ソフトウェアエンジニア

ReactのマウントとかuseEffectとか再レンダリングとか

概要

ただのメモなので悪しからず。そもそもネットに公開するようなものでもない。

メモ

マウント

マウントとは、Reactコンポーネントが初めてDOMに挿入(レンダリング)されるプロセスのことを指す。このプロセスでは、コンポーネントが画面上に表示される初期状態が構築される。クラスコンポーネントではcomponentDidMountメソッドが、関数コンポーネントでは空の依存配列を持つuseEffectフックが、マウント時の特定の処理を実行するために利用される。マウントは、コンポーネントのライフサイクルにおいて最初に発生するフェーズらしい。

useEffect

useEffectは、関数コンポーネント内で副作用(side effects)を扱うためのフックである。これにより、データのフェッチ、イベントリスナーの設定、DOMの直接操作など、レンダリング結果とは独立した操作を実行できる。useEffectは、依存配列に指定された値の変更を検知して副作用を再実行する。依存配列が空の場合、副作用はコンポーネントのマウント時とアンマウント時にそれぞれ1回ずつ実行される。

レンダリング

レンダリングとは、コンポーネントのステートやプロップスが更新された際に、コンポーネントが新しい状態やデータでDOMを再構築するプロセスである。Reactは変更があった部分のみを効率的に更新するため、アプリケーションのパフォーマンスが保たれる。再レンダリングは、ユーザーの操作やデータの変更に応じてUIを動的に更新するために不可欠なプロセスらしい。

setState

setStateは、クラスコンポーネントにおいてステートを更新するためのメソッドである。関数コンポーネントでは、useStateフックから得られるsetter関数が同様の役割を果たす。setStateやsetter関数を使用してステートが更新されると、コンポーネントは再レンダリングされ、新しいステートやプロップスに基づいたUIが表示される。これにより、アプリケーションはユーザーの操作や外部データソースの変更に柔軟に対応できるようになるらしい。

StorybookにTailwindの設定が反映されなかった話

課題

表題の通り、StorybookにTailwindの設定が反映されなかった。 create-react-appツールを用いてWebアプリを構成しており、tailwind自体は以下ドキュメントを参考にインストールした。

tailwindcss.com

さらに、src/index.tsximport "./styles.css"; をしている。 Webアプリ上ではtailwindが反映されている。

解決

ChatGPTに聞いてみたら、Webpackの設定がどうのこうのと言われたが、なんてことはない公式ドキュメントにあった。

storybook.js.org

.storybook/preview.js に import "../src/styles.css"; とするだけだった。

適格事業者になってから初めての確定申告

概要

今年、インボイス制度の導入により、免税事業者から適格事業者になった。 そんな中で確定申告をしたので、自分用のメモとして残す。 この記事の情報は、個人の体験をもとにしているので正しくはない。

適格事業者になったから何か

適格事業者になったら、1000万円以下の売上でも消費税を納める必要がある。 これは、以前は免税対象だった自分にとって大きな変化である。 売上の消費税を税金として納めなければならない。

仕入税額控除

消費税をそのまま支払うと、仕入れや経費で支払った消費税分が損失になる。 これを避けるため、仕入税額控除の仕組みを利用したい。 仕入税額控除は、売上にかかる消費税額から、「仕入れ」や「経費」で支払った消費税を差し引くことができる制度らしい。

一般課税と簡易課税

選択できる課税方式には「一般課税」と「簡易課税」があるらしい。 仕入税額控除の計算方法が異なる。 一般課税では実際に支払った消費税額を基に控除額を計算するが、簡易課税では所定の率に基づいたみなし控除が行われる。らしい。

納税の期限

消費税は次の年の4月までに納税する必要がある。 まあ青色確定申告ツールを使っていれば消費税e-tax提出とかもできるため、青色確定申告と同時にやると良いと思う。

消費税の対象期間

2023年10月に適格事業者になったため、2023年10~12月の売上分の消費税を納税すれば良いと思う。

特例措置

以下は期限付きだが、2023年分の消費税には適用されるらしい。

  • 少額特例: 一万円以下の仕入れであれば、相手がインボイス登録事業者でなくても、控除額を100%とすることができる(一般課税のみ関係する話だと思う)
  • 2割特例: 納める消費税額を売上税額の2割分に軽減させる措置で、事前の登録申請不要。消費税申告時に確定申告書に記載するだけで利用可能。らしい(一般課税も簡易課税も関係ある)
  • 免税事業者からの仕入れに係る経過措置: 適格事業者以外からの仕入れでも80%を仕入税額控除にできるというもの(一般課税のみ関係する話だと思う)

確認事項

確定申告を行うにあたり、自分が一般課税か簡易課税か、いつから課税事業者になったのかを確認する必要がある。 また、2割特例を利用する場合は、その旨を確定申告書に記載する。

参考

ReactでMSWのバージョン2を使ってみた

概要

表題の通り、mswのバージョン2を使ってみた。

この記事を書いた動機

Webに落ちているほとんどの記事がバージョン1についてだったため、使用するのにちょっと戸惑ったから。

まあ、公式ドキュメントを最初に読めば良いだけの話だけなのだが。

Reactで使ってみる

基本は公式ドキュメント通りにやればよろしだが、以下に残しておく。

セットアップ

$ npm install msw --save-dev
$ npx msw init public/ --save

Reactはブラウザーで実行されるため、ブラウザの設定をする。 こうするとブラウザからのリクエストをブラウザ上でインターセプトしてくれる(多分)。 src/mock/browser.ts を作成

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

dev環境でのみモックするように設定

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  return worker.start();
}

const rootElement = document.getElementById("root") as HTMLElement;
const root = createRoot(rootElement);
enableMocking().then(() => {
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
});

ハンドラーを作ってみる

ここがv1との違いかな。resthttp になった。 src/mock/handlers.ts を作成

import { http, HttpResponse } from "msw";

export const handlers = [
    http.get("https://backend.example.com/api/v1/hello", () => {
        return HttpResponse.json(
            {
                message: "Hello, World!", 
                who: "I am msw."
            }
        );
    }),
];

ReactからAPIを叩いてみる

const BASE_URL = 'https://backend.example.com/api/v1';

export const fetchHello = async () => {
  try {
    const response = await fetch(`${BASE_URL}/hello`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching hello', error);
  }
};

export default fetchHello;

これだけ。便利だね。

2023年8月ソフトウェアエンジニアからデータサイエンティストになった

概要

今年2023年の8月にデータサイエンティストに転職した。 転職してから4ヶ月ほど経ったので、その備忘録をかく。

項目

  • 僕の経歴
  • なぜデータサイエンティストに転職したのか
  • 僕が入社したRistという会社について
  • Kagglerの凄さ
  • ソフトウェアエンジニアとデータサイエンティストを比較して
  • ソフトウェアエンジニアの経験が生きている話
  • これから

僕の経歴

  • Infcurion: 決済システムでソフトウェアエンジニア
  • ヤフー: 検索でソフトウェアエンジニア
  • Rist: データ分析チームでデータサイエンティスト ← new!

なぜデータサイエンティストに転職したのか

キャリアのどこかで機械学習をきちんとやりたかったから。 あとは、Software2.0とかを読んで触発されたというのもある。

2023年は機械学習をやるぞと意気込んでいたところ、Twitter上で流れてきたRistの求人を見て、応募してみたら受かった。 応募枠はポテンシャル採用だった。

当時はKaggle自体の名前は知っていたが、コンペには出たことがなかった。 まあ、Kaggle Grandmaster(の凄さもあんまり分かってなかった)がたくさんいるらしいし、変な癖はつかないだろうと思って入社した。 もちろん、年収が上がるからというのもあった。

正直なところ、当時自分が所属していたヤフーのチームは良かったし、業務内容も面白くて、辞めるかかなり迷った。 でも今は思い切って転職して良かったと思っている。毎日楽しい。

僕が入社したRistという会社について

Ristという会社については、以下の記事を読むのが手っ取り早い。

dime.jp

例えば入社時の条件として、マスター以上であれば年齢を問わず、年収1千万円以上をオファーする(2023年10月現在)。

記事中のこの一文のインパクトはすごいよね。

Kagglerの凄さ

現在、非常に幸運なことに、Kagglerの方々と一緒に仕事をしている。 仕事をするたびに、この人たちマジですごいなと思う。

データサイエンティストとしてペーペーの僕だが、凄さを列挙してみよう。

機械学習モデル作成の一連の流れに対する所作

評価指標、リーク、特徴量、モデル作成、バリデーション、パラメータ、アンサンブル、etc...。 これらの工程を課題に対して適切に設計し、コードに落とし込む。

これは本当にすごいことだ。 DevOpsのサイクル全ての工程で隙がないソフトウェアエンジニアと一緒に仕事をしているようなものだ。 それをできる人がチームにいるという安心感はすごい。

ここまで所作を完璧にするのに、どれだけモデルを作成してきたんだろうか。 計り知れない。

モデルへの造詣の深さ

自分が作成した機械学習モデルを完全に理解していて、顧客を納得させられる言語化ができる。 ここまでの理解、言語化をするには、どれだけモデル作成をして本気で向き合ってきたのか。 計り知れない。

データへの感覚の鋭さ

あるデータの特徴から思いもしなかった指摘・考察が飛んでくる。 このようなデータだとどこをどう見れば筋が良いのかという知見がある。 どのような特徴量を作成すれば良いかの知識がある。 どれだけの特徴量エンジニアリングを行ってきたのだろうか。

クライアントのことを考える

当たり前なのかもしれないが、クライアントのことを考えている。

この分析や結果がクライアントの業務にどのように意味があるのか。 クライアントが納得できる特徴量なのか。

これらの視点が常にある。

ソフトウェアエンジニアとデータサイエンティストを比較して

本質的にはあんまり変わらないと思う。

ソフトウェアエンジニアのプロダクト作成の営みについては、以下の記事が本質をついていると思う。

AIはどのような仕事ができるようになったのか?ChatGPTで変わる「優秀な人材」 - ところてん - Medium

以下は、上記の記事からの引用である。

従来のIT産業では、人間が行っている業務の中から、いかに入出力が定形なものを見つけて、それを切り出して自動化していくのか、ということに苦心していました。

...

現在では「何が入力されて、何が出力されるのが正しいのか」を適切に「要件定義」することで、入出力が不定形なものを無理やり定形化して、プログラミングによって自動化していくということが行われています。

つまり、ソフトウェアエンジニアは、「ある入力をある出力に変換するもの(プロダクト)」を作成する。 その際、複雑怪奇な現実世界(ドメイン)での入力と出力を、無理やりコードにできる形に定義(要件定義)する。

データサイエンティストがやることは、これと本質的には変わらない。 現実の入力と出力をコードにできるようにする。 その主な中身がデータであり、作成する主なコードが機械学習モデルになっただけだ。

ただし、データサイエンスの領域においては、引用記事にもある通り、プロダクトの出力が不確定なものになる。 LLMなどを考慮する場合、入力も不確定なものになる。

ソフトウェアエンジニアの経験

以下らへんの経験というか癖というかは、業務でも役立っている気がする。

  • 公式ドキュメントを参照する
  • 技術調査・調査レポーティング
  • 他人のコードを読む
  • 自分でコードを書く
  • DockerとかKubernetesとかの経験
  • 低レイヤの知識(GPUマシンを使ったりするとき)

これから

ここまで書いてきて力尽きた。 これからも頑張るます。以上。

macOSをsonomaにしたらXcode15でflutter build ipaできなかった話

現象

表題の通り

困ったこと

じゃあ、前リリースできていたXcode14に戻してビルドしようとしたら、以下のように開けない。

エラー画像

ちなみに以下を参考にしてXcodeをダウングレードした。

Xcodeのバージョンを下げる方法

解決策

  • Xcode14をインストール
  • Xcode15を削除(一応)
  • 以下を参考にXcode14を開く

Using Xcode 14.3.1 on macOS Sonoma | by Caio Farias Soares | Medium

  • flutter doctorXcodeのバージョンを確認
  • flutter build -ipa でビルド
  • Xcode14のGUIから File→Openで Runner.xcarchive ファイルを開いて、Apple Store Connectに配布

ちなみに

Xcode14でビルドしたら以下のエラーが出た。

DVTCoreDeviceEnabledState: DVTCoreDeviceEnabledState_Disabled set via user default (DVTEnableCoreDevice=disabled)

以下にある readlink -f をやってみたら成功した。が、これはcocoapodのバージョンを上げると治るっぽい。

Flutter iOS build failed: DVTCoreDeviceEnabledState_Disabled - Stack Overflow

会社は僕にお金を払っているのではない。僕が生み出したコードにお金を払っている。

例えば、自分がソフトウェアエンジニアだったとして。 僕を雇っている会社は、毎月僕に給与を払っている。 対価として僕は労働をしている。 ここで会社は僕自身にお金を払っているわけではないことを、よく覚えておきたい。

会社は、僕が書いたコードにお金を払っているのだ。 なぜならば、コードは資産だからだ。 動くコードがお金を生み出すのだ。

だから、良いコードを書くソフトウェアエンジニアは高額な給与をもらう。 なぜなら、そのエンジニアが辞めた後も書いたコードがお金を生み出し続けるから。

お金を生み出すコードを書く、ということを強烈に意識しないといけない。 "お金を生み出すコード" が何かは難しいけど。 それは例えば、変更可用性が高いとか、DevOpsとか。 そもそもコードを書かずにお金を生み出す判断とか。

そういう経営的な視点が、エンジニアには求められると思う。

なんか結論がとっ散らかってしまったが。 資産となるコードを生み出すために、技術を求め続けたい。