医療スタートアップでチームのマネジメントをしていることもあり、プレイヤーからマネジャーに頭を切り替える思考法というのがタイムリーすぎたので読んでみました。 250ページほどあり見た目は結構分厚いのですが、行間広めで読みやすく数時間で一気に読み…
2024年の目標を立ててみる。 私生活と仕事において、３つの役割がありそれぞれの大目標を掲げることにします。 夫 妻に愛情を注ぐ 今年中に収入を増やす 健康的な生活を心がけた習慣を継続する（早起き、読書、筋トレ） 父親 子どもたちと全力で遊べるように…
GoogleカレンダーのようなカレンダーUIを簡単に作れるライブラリ「FullCalendar」を実務で使う機会があり、色々とカスタマイズして使ってみたので整理しておく。 「最もポピュラーなJavaScriptカレンダー」 FullCalendar カレンダーライブラリの選定 カレン…
やりたいこと styled-componentsでcss propsを使ってスタイリングをしたい 開発環境 開発環境はCRAで構築したReactアプリケーションであり、TypeScript、styled-componentsを採用している。 コンポーネントへのスタイル注入方法を検討中、css propsを活用し…
JavaScriptでの配列操作を使う機会が多いが、毎回ググってる気がするのでひとまずよく使うものについて整理してみる。 配列操作 const arr1 = [10, 20, 30]; const arr2 = [40, 50, 60]; const arrObj = [ { id: 1, name: "A" }, { id: 2, name: "B" }, { id…
やりたいこと null や undefined の値をfalsyな真偽値として扱いたい 結論 Boolean() あるいは !!で二重否定を使う。 const unData = undefined; const nullData = null; const strData = ""; const arrData: string[] = []; const objData = {}; // !! をつ…
すでに令和も4年。平成まではギリ西暦⇔和暦の変換ができていたけれど、令和になってからは覚えるのもめんどくさくなり、ググらないと今は令和何年なのかもわからないという人もいるのでは？ 前職は病院の事務員だったので、様々な行政の書類や日々の業務の中…
E2Eテストとは何か？ End to Endテストの略であり、ユーザー利用と同じようにシステム全体を操作して確認するテストのこと テストを自動化するメリデメ メリット 反復的な手作業のコストを削減できる テストの実施コストが下がり、早期にバグチェックがしや…
create-react-app で生成されている /public/manifest.json とは何者なのか？無知であったマニフェストファイルについて改めて調べてみた。 調査前の前提知識 デフォルトで生成される manifest.json { "short_name": "React App", "name": "Create React App…
PC、Android、iPhoneで「vh」の高さが違い、見事にハマったことがあるので、記事としてまとめておきたいと思います。 vh（viewport height）とは 「vh」は「viewport height」の略で、viewport の高さ（ブラウザの高さ）に対する割合を指定することが可能で…
アクセシビリティを極めていきたい駆け出しフロントエンドエンジニアです。 アクセシビリティな実装をする上で意識すべきことはたくさんありますが、中でもモーダルは考えることが多いなと思っています。 今回は、あえて react-modal などのライブラリを使用…
アクセシビリティとは アクセシビリティの言葉のとおり、アクセスのしやすさを意味していて、コンテンツの利用がしやすさとほぼ同義だとおもいます。 ユーザービリティは使いやすさ アクセシビリティは、更に幅広い人や状況でも使えることという棲み分けでし…
ErrorBoundary コンポーネントツリーのどこかで例外が発生した場合、アプリケーション全体が影響を受けてしまう。アプリの規模が大きくなると、例外が発生した箇所を特定するのが難しくなってくる。 ErrorBoundaryは、特定のコンポーネントで例外が発生した…
Hooksとは？ React16.8.0で追加された機能 クラスコンポーネントよりもコード量が少なくなる ロジックを分離できるので、ロジックの再利用やテストがしやすい。 フック API リファレンス 主なフックとしてあげられているものをまとめてみる useState stateと…
バリデーションライブラリ「Zod」の基本的な使い方についてまとめてみる。 Zodは、スキーマファーストなバリデーションライブラリ。 はじめにスキーマを定義して、パースすることでバリデーションをかけることができる。 CodeSandbox | zod スキーマを定義す…
issueに着手する際、DraftのPRを出す issueに着手する際、空のプルリクエストを送る必要がある。 git commit --allow-empty -m "PR Title" プルリクを出した後、ローカルで作業を継続する main → test1のブランチで作業し、プルリクを出してマージされるのを…
ReactでApolloを使うキャッチアップのため、GithubのGraphQLAPIを使ってクエリを叩いてみた。 graphql-code-generatarもテストしてみたので使用感について書いてみる。 環境構築 環境構築はCRAで。 npx create-react-app graphql-react-app --template types…
今回はGatsbyで起こったが、emotionの仕様みたいなのでメモしておく。 "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", やりたいこと こんな感じで first-childに対してスタイルを当てたかった。 `.Pagination__block { &:first-child.-active …
GatsbyでuseContextを使ってダークモード対応をした（このブログではない）のですが、useContextのstateの挙動がうまく動かず、見事にハマったのでメモしておきます。 結論から言うと、「公式ドキュメントちゃんと読もう」です。 Using React Context API wi…
結論は、「Presentialも、Containerも、StyledComponentも全部まとめて書きたい！」です。 Reactでコンポーネントを書くときに、PresentialとContainerの役割を分離するというのが基本みたい。 ファイルそのものを分割してそれぞれに役割を持たせるというの…
Gatsbyブログを作ったので、雑に環境構築についてメモしておく。 TypeScriptやReactのキャッチアップも兼ねていたので、ESLintやPrettier、StyleLintも入れてみた。 前回のブログでも書いたが、React+TypeScriptキャッチアップにはもってこいだと思っている…
Gatsby.jsでブログを構築してみた。 Gatsby.jsとは？ React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsは公式サイトに「blazing fast」と自分で書いちゃうほど早いフレームワーク Gatsbyによって生成されるWebサイトはSPAと…
「なぜ」を突き詰めれば本質が見えてくる 物事の表面だけ見てない？ What → 目に見える形になったもの。情報や知識、具体的な行動 Why → 形の背景、理由、目的 物事の表面だけを見るか、物事の背景も含めてみるかの違いがある。 たとえば 今ある規則やルール…
今回もスクレイピングしていきます。 pythonを使ってのスクレイビング開発の依頼・外注 | Webシステム開発・プログラミングの仕事・副業 【クラウドソーシング ランサーズ】[ID:3468971] mizuho銀行の宝くじ"ナンバーズ3"の1回目～直近の回の全データを取得…
ランサーズに掲載されている「スクレイピング」関連の案件を、実際に受注したと過程してやってみようと思います。 今回はこちら 【1ヶ所のみ抽出】介護の情報データベースのサイトからのスクレイピングの依頼・外注 | Webシステム開発・プログラミングの仕事…
商圏分析をやる機会があったので、Tableauで実装する手段をまとめてみる 地図上のポイントをクリックすると、そのポイントから指定範囲内（画像では１ｋｍ）のポイントに色付け 範囲内の事業所をフィルタリングして集計することもできる。 仕組みとしては、 …
Aテーブルにある緯度経度と、Bテーブルにある緯度経度を総当たりさせて、Bの事業所の半径２５０ｍ圏内にあるA事業所を抽出したい。 geopyを使用 !pip install geopy コード import pandas as pd A = pd.read_csv('A.csv') B = pd.read_csv('B.csv') A_list =…
3種類のアヤメについて、それぞれ50サンプルのデータがあります。 それぞれ、Iris setosa、Iris virginica、Iris versicolorという名前で、全部で150のデータ。 4つの特徴量が計測されていて、これが説明変数。 萼片（sepal）の長さ（cm） 萼片（sepal）の幅…
前回、パーセプトロンによるアヤメの分類を行ってみました。 kei01011.hatenablog.com クラスを完全に線形分離できない場合は決して収束しないという問題点もあるため、ロジスティック回帰による分類を試してみた。 データ準備 import pandas as pd import n…
今回は、パーセプトロンでアヤメの分類を実装していきたいと思います。 パーセプトロンとは 分類問題に使われる手法の一つで、いわゆる「教師あり学習」を行うためのもの。 「あるデータがどのグループに属するか」を学習して、未知のデータからグループごと…
