なんとかなれ

ゆるふわWebエンジニアのブログ

2024年の抱負

あけましておめでとうございます。

簡単に今年の抱負を書き残しておきます。

仕事編

AWS SAA

  • 3月初旬目標

苦手克服

アウトプットする

  • ブログに残す
  • (仕事でやったことを振り返る)

個人開発

  • 上に書いたやつが終わったら

生活編

  • マンションを買う
  • バンドをやる(ドラム)
    • メンバーは決まっているので春以降巻き込んでいく
  • 運動習慣をつける
    • 具体的な改善内容が決まっていない。。
  • サッカー日本代表戦を見に行く
  • Bリーグ見に行く

こんなところにしておきます。

数ヶ月後や年末に読み直して恥ずかしくならないようにしたい。 後は年収を上げる（切実）

Reactの状態管理ライブラリRecoilに入門しかける

仕事で使われていて、コピペしたらなんかデータが取れたという状態だったので少し入門する。

Recoil

概要はこちらRecoil 状態管理ライブラリはReduxとかReact公式のuseContextが使われることが多いらしいが、弊社プロダクトではRecoilが使われていた。 Reactを開発しているFacebook(Meta)が開発しているから、良さそう感ある。

公式のGetting Startedをなぞってみる。

https://recoiljs.org/docs/introduction/getting-started この辺り引用

RecoilRoot

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree. A good place to put this is in your root component:

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>  //　ここ
      <CharacterCounter />
    </RecoilRoot>
  );
}

recoilを使うために上の方の階層でRecoilRootタグで囲う必要があるとのこと。ルートコンポーネントとかがおすすめとのこと。

Atom

An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:

翻訳: アトムは状態の断片を表します。アトムは、どのコンポーネントからでも読み書きができる。アトムの値を読み取るコンポーネントは、暗黙のうちにそのアトムを購読しているので、アトムの更新は、そのアトムを購読しているすべてのコンポーネントの再レンダリングにつながります。　　（？）

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

途中よくわからなくなったけど要は「アトムは、どのコンポーネントからでも読み書きができる」ってことで良さそう(便利)

仕事コードでは上記部分を別ファイルに切り出していた。

ネーミング例はsubCategories(状態名)Atom.ts等にしている。

この場合、ユニークなIDをkey: 'subCategoriesAtom',　などにして何の状態を持った変数なのか分かりやすくする。

Components that need to read from and write to an atom should use useRecoilState() as shown below: 翻訳: アトムからの読み取りとアトムへの書き込みが必要なコンポーネントは、以下のようにuseRecoilState()を使用する必要があります。

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState); //大事なところ

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

const [text, setText] = useRecoilState(textState);

こんな感じでuseStateみたいに値をセットできるみたい。

Selector

A selector represents a piece of derived state. Derived state is a transformation of state. You can think of derived state as the output of passing state to a pure function that modifies the given state in some way:

翻訳: セレクタは、派生した状態の一部を表します。派生状態とは、状態の変換のことです。派生状態は、与えられた状態を何らかの方法で変更する純粋な関数に状態を渡したときの出力と考えることができます。 (??)

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

We can use the useRecoilValue() hook to read the value of charCountState:

訳文:useRecoilValue()フックを使って、charCountStateの値を読み取ることができるのです。

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

簡単まとめ

selectorで少しややこしくなってしまったが、useRecoilStateでAtomにセットした変数をuseRecoilValueを使ってグローバルに呼び出せるということだけを覚えておけばかなり便利そうということで簡単に締めます。

今週のお題「地元自慢」

今週のお題「地元自慢」

 

先月くらいに買ったHHKBをタイピングしたくなったので、はてなブログのお題をなぐり書きします。

 

「地元自慢」

自分は親が転勤族だったので、同じ家に6年間以上住んだことがありません。

先日川崎から秦野の方に引っ越したのですが、たまたま6年で引っ越してしまいました。

 

生まれは府中→名古屋→奈良→つくば→川崎→秦野と移り住んでます。

で、地元の話になると毎回「地元ないんです」っていうのも寂しいので、神奈川が一番長く住んでるから地元と感じてますと言ってます。

名古屋もおじいちゃんの家があって毎年お盆の時期にいっていたので地元感あったのですが、もう家は壊されてしまったのでなかなか行くことは無く、地元とは呼べない気がする。来年はお墓参りにいきたい。五条川のお祭りにいきたい。

 

ということで神奈川が地元として自慢してみます。

  • 多摩川がある
  • 東京が近い
  • 買い物は川崎で大体済む
  • 海がある
  • 山がある

全然自慢できなかった。。

しかも引っ越したので買い物は川崎で済まなくなりました。

いっそ将来、自慢できる地元と呼べることができるところに移住するのもありかもしれません。

でも、言語化できないけど神奈川意外と好きで、田舎の方に引っ越して正解だった気がします。でも東京行くたびに後悔する気もします。

いつか秦野が地元ですと言う日がくるかも。。

 

あと言いたかったことは、ベランダのある暮らしっていいなと思ったこと。外に緑が見えるとなおよし。

前の家のベランダは一歩しか歩けず、景色は向かいの目の前のボロアパートしか見えなかったので、感動してます。ベランダでバードウォッチングできてビビりました。

 

 

以上、技術や仕事のアウトプットする予定で立ち上げたブログを更新しました。

(書こうとする気持ちが大事)

 

異業種からスタートアップWebエンジニアになって100日経ったので振り返り

振り返り

はじめに

おおのと申します。 30歳こえてからITのエンジニアになろうと思って、異業種営業からIT業界でエンジニアになりました。

仕事しながら一年半程勉強を続けて運良くご縁があり、営業支援Saasの開発をしているスタートアップで働けることになりました。 ちょうど100日位たったので簡単に振り返りを残しておこうと思います。

オンボーディング

オンボーディングという言葉は初めて聞きました。。 以下のような説明を受けました。

  • どんな技術やツールを使ってサービスを開発しているか
  • スクラムというアジャイル開発のフレームワークを使っている
  • 毎日のmeetingについてやスプリントについて（1週間）
  • タスク、プルリクについての考え方
    • プロダクトバックログからタスクは自分で作る
    • 自分で分割してよい
    • 優先順位は守る
    • バックログに対して仕様については自分で確認相談してつめる
    • などなど…

スプリントプランニング、スプリントレトロスペクティブなど初めて聞く単語に？？？ってなりましたが、今はそういうの好きです。この間スクラムガイド2020改めて読みました。

ただ、スクラムマスター的ポジションがいない、他のミーティングで忙してスプリントレビューが出来ないことが多い等、がっつりスクラムに取り組めてない感じがあります。

自分はまだ日々のデイリースクラムしか参加してないので、正直よくわかってません。

組織拡大していくタイミングでこの辺かっちりさせていかなきゃって感じなのかな…？とぼんやり考えてます、今度聞いてみます。

環境構築

話が逸れましたが、オンボーディングは程々に、早速開発環境構築にはいりました。

社用PCが届いてなかったので自分のintelMacBookメモリ8GBマシンでやりました。

Dockerを動かすと熱と唸り声上げてたのを思い出します。今はM1MacBookメモリ16GBありたがたやです。

わからないこと有りまくりでしたが、優しい先輩つよつよエンジニアに教えてもらいながら終了しました。

当時よく分からず進んだ点

  • ステージング環境にSSH接続してdumpファイルをダウンロードしてDBに保存した。
  • elasticsearchのセットアップ(今もわかっていない)
  • Dockerでなんで環境構築できちゃうのか（今もほんの少ししかわかっていない）

初めてのタスク

スタートアップのため、研修等は無しでいきなり実戦です。

初めてのタスクをやろうとしたらモデルのannotateがめちゃくちゃ更新されてビビリ、どうしたらいいかわからず早速質問した。

数が多いのでプルリクあげちゃってくださいのとのことで、初めてのマージがされました。めでたい。

その後、フロントとバックどちらも触るタスクをやって撃沈。

主な仕様技術としてReact/TypeScript/Rails/GraphQLが使われています。

(Railsの)コントローラがないんですけどどこで処理してるんですか？って質問したのをよく覚えています。いい思い出。

なにもわからない

ReactとGraphQLのおかげで何も分からなくて毎日大変でした。

よかった、バックエンドのタスクだ…と思ってもRailsなにも分からなくて大変でした。

最初の一ヶ月くらいはGitがわけわからないことになって毎日大変でした。

溜めこむのはだめだと思って、質問しようにもなにもわからなくて、うまく質問できなくて毎日大変でした。

金曜のみ出社で、毎週1時間テックリードと1on1があり、それによって命が救われました。1on1は本当に大事。

初めての1on1のメモをみたら「初めからタスクできることを期待していないから大丈夫」と書いてありました。。笑

そんな毎日サバイバルな状況を100日以上続けたら、三ヶ月前よりは少しはマシになれたかな…と思います。

100日経過して

最初は実務に直結することばかり(主にフロント、GraphQL)勉強していて、実践でアウトプットする、みたいな形で成長している…！感を得られていたのですが

やはり、バックエンドをしっかり勉強したいと思うようになっています。

テックリードの方などが、大きめの新機能の設計、日々のレビューやリファクタ等をみていると、複雑なプロダクトを保守しやすく大きくしていくためにはどうしたらいいのかといった事を考えられるようになりたい。

そう思って最近はリファクタリングの本やLinux、そしてこれからオブジェクト指向の本を勉強しようとしているのですが、なかなか実践に活かせなくてもやもやしています。まるで成長していない…

が、もやもやしている前に仕事ができるようになること、積まれている本を読んでいくことをやっていこうかなと思ってます。

そしてそういった実践でアウトプットできない技術的なことをブログにかけたらなと思っています。

目標は週イチで、土日のどっちか更新。技術的なことじゃないことは不定期に投稿します。

以上！

はてなブログデビュー

ごあいさつ

おおのと申します。 Webエンジニアになって数ヶ月経ちました。 ブログを書いてアウトプットしたいという気持ちはずっとあったのですが、実行できないでいました。 休みの日をつかって、技術的な事柄や、その他得た知見を自由に適当に書いていきます。主に開発系のブログになる予定です。

Reactに興味があったので雰囲気が分かるかなと思ってGatsby.jsを使ってブログを構築しました。 →面倒が勝ったのではてなブログにしました。

おおのについて

数ヶ月前からSalesTechスタートアップでエンジニアとして働いてます。
キリのいいところで振り返り記事を書きたいと思っています。 使用技術 Rails/React/TypeScript/GraphQL/etc...

めでたくはてなブログデビューしましたので宜しくおねがいします。