柚子湯の刑

本日の気付き 翌日の午前中に用事がある場合、夜間の授乳は液体ミルクでするといい 子育て支援センターは保育園に通っている大きい子が休日に多く来る。逆に赤ちゃんは仕事が休みの旦那さんによって家で見守られていることがある。よって休日は赤ちゃんの人口が少なく混んでいるので、平日ほど子育て支援センターに行くメリットがないと感じた。 本日の読書 本 経営の教科書ー社長が押さえておくべき30の基礎科目ー | 新 将命 読んだ範囲 第5章 目標に向かってともに進める社員がいるか（179-180頁） 内容 社長が社員に任せてはいけない仕事もある。企業理念、企業戦略に関する最終決定や、会社が求める人物像の決定がそれである。但し全て一人で決めないといけないわけではなく、様々な人間から異なる意見を聴き、それを踏まえて社長が最終的な判断を下す、という形にするとよい。 経営に多数決は要らない。多数決で物事を判断するのであれば経営者は必要ない。社長を除いた全員が反対だったとしても、社長が絶対にこうだ、と思うのであれば、全員を納得させるロジックを携えて決断をする必要がある。 任せて失敗した場合、まずは原因の分析をする。次に分析結果を基に同じ失敗を繰り返さないための改善策を話し合う。間違っても人を叱ってはならない。叱るべき対象は「物」と「事」である。 叱るときは「同じ間違いを繰り返してほしくない。次はいい仕事を期待している」ということが伝わるよう、一所懸命に叱る。叱った後にはどんな形でもいいので必ずフォローをする。 その他 ゆず3個分の果汁を絞って湯船に入れ、浸かったところ、体中がピリピリして入浴が苦痛でした。私は毎日、Kindle端末を持ち込んで湯船に漬かりながら読書をしています。今日は読書に集中できず、何回も同じところを読んだりしていましたね…。

pageview 136 1年前

【Dart&Flutter】Windows上のVSCodeでプロジェクトを作成して動作させるまで【勉強メモ】

※自分用の備忘録です。 こちらの記事が非常に参考になりました。VisualStudioとVSCodeは既にインストールされていたので、記事の項番8, 9に該当する作業はスキップしました。 Flutter を VSCode で環境構築してみた！＜Windows編＞ https://qiita.com/shimizu-m1127/items/d8dfc2179bc01baaef6b ちなみに、FlutterではなくDartプロジェクトを作成してDartで遊んだりテストコードを書いたりする場合は、以下の記事のようにすればよさそうです。参考になります。 DartプロジェクトをVSCodeで作成する方法 https://engineering.webstudio168.jp/2022/02/dart-project-vscode/

pageview 134 1年前

【React】Zustandによるグローバル状態管理

Zustandとは React向けの軽量・高速・シンプルな状態管理ライブラリで、フックベースの直感的なAPIを持ち、Reduxよりも少ないコードで状態管理を実現可能です。グローバルな（アプリ全体を範囲とした）状態管理をしたいときに利用します。 インストール方法 npmによってインストール可能です。 copy_allnpm install zustand サンプルコード：カウンターを状態として管理する ストアの定義 store.tsにZustandストアを定義します。 copy_allimport { create } from 'zustand' // 状態の型定義 type CounterState = { count: number increment: () => void decrement: () => void reset: () => void } // Zustandストア作成 export const useCounterStore = create<CounterState>((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), reset: () => set({ count: 0 }), })) createはZustandが提供するストアを生成する関数であり、ストアの型をジェネリクスに指定し、引数にはストアの初期値とアクションを表す関数を与えます。引数として与えた関数にはset（Zustandが提供する状態を更新するための関数）を引数に指定します。setには原則、現在の状態（state）を入力として受け取り、新しい状態のオブジェクトを返す関数を引数として与えます。例外的に直接オブジェクトを与えることもでき、その場合は現在の状態とは無関係にオブジェクトで指定した値にストアの値を更新します。 ストアの使用 定義したストアをReactコンポーネントで使用するには以下のように書きます。コンポーネントの名称をCounter.tsxとした例です。 copy_allimport React from 'react' import { useCounterStore } from './store' // 自分で定義したストア export const Counter = () => { // ストアの値とアクションを表す関数をフックから取得する const { count, increment, decrement, reset } = useCounterStore() return ( <div style={{ textAlign: 'center' }}> <h1>Count: {count}</h1> <button onClick={increment}>＋</button> <button onClick={decrement}>－</button> <button onClick={reset}>リセット</button> </div> ) }

pageview 131 5ヶ月前

【備忘録】React+ViteでTailwind CSSを使えるようにするまで

Windows11でViteプロジェクトを作成し、その中でTailwind CSSを使えるようにするまでの備忘録を残します。npmによるTailwind CSSのインストール方法が変わったようで、変更後の方法に対応しています。当然、今後また変更される可能性がありますのでご了承ください。またNode.jsは既にインストールされているものとします。 Viteプロジェクトを作成する 新しいViteプロジェクトを作成します。 copy_allnpm create vite@latest sample -- --template react-ts Tailwind CSSをインストールする 作成したプロジェクトのフォルダに移動し、npmでTailwind CSSをインストールします。 copy_allcd sample npm install tailwindcss @tailwindcss/vite Viteプロジェクトの設定を変更する sample/vite.config.tsを以下のように編集します。 copy_allimport { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' // 追加 // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), tailwindcss(), // 追加 ], }) App.cssにTailwind CSSのインポートを追加する sample/src/App.cssにTailwind CSSのインポートを追加します。 copy_all@import "tailwindcss"; /* 追加 */ #root { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.react:hover { filter: drop-shadow(0 0 2em #61dafbaa); } @keyframes logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } } .card { padding: 2em; } .read-the-docs { color: #888; } App.tsxでTailwind CSSのユーティリティクラスが使えるかどうか確かめる sample/src/App.tsxのh1タグにfont-boldのクラスを追加します。 copy_allimport { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <div> <a href="https://vite.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1 className="font-bold">Vite + React</h1> {/* font-boldのクラスを追加 */} <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ) } export default App 以下のコマンドでサーバーを立ち上げます。 copy_allnpm run dev Vite + React の部分がボールド体になっていればOKです。 参考 https://tailwindcss.com/docs/installation/using-vite

pageview 127 5ヶ月前

ジョイントマット

本日の気付き 自分の場合は、本を読みすぎると良くない。毎日読んだ内容をまとめているけれども、読みすぎるとまとめる内容が多くなって大変。 本日の読書 本 経営の教科書ー社長が押さえておくべき30の基礎科目ー | 新 将命 読んだ範囲 第4章 目標を実行に移せているか（147-153頁） 内容 経営者は限りない結果責任を負っており、結果を出せない経営者には価値がない。 結果が出せる経営者には胆識がある。胆識＝見識＋決断力＋断行力。見識とは、知識に自分の考えを付加価値としてつけたものをいう。決断力とは少ない情報で意思決定する力。断行力とは、決断を実行に移す力である。まとめると、判断→決断→断行。 経営者は、「Timing is money」を心得るべきである。 胆識であると必然的にリスクをとることになるが、当然やみくもにリスクをとるべきではない。正しくリスクをとる必要がある。決断を正しいものにするためには「①自分と正反対の性格の人間をそばに置く」、「②撤退プランを考えておく」の2つがおすすめ。 その他 ジョイントマットを買いました。子供が転んでケガをしないための敷物は既に買ってあり、使っていたのですが、どうにも面積が狭い。それで購入しました。 部屋中に敷いたところ、いい感じ。まだ子供が動き回っているわけではないですが、おもちゃが増えてきて敷物が狭いなと思っていたところです。ジョイントマットを敷いたことでスペースが広くなり、子供を遊ばせやすくなりました。広すぎて子供と一緒にするお昼寝も捗りそう（笑） そして、特に意識して購入したわけではないにも関わらず、部屋の幅がジョイントマットで隙間なく埋まりました、奇跡。こんなことがあるんだね。。

pageview 126 1年前