概要 Honoなるフレームワークがあるということで試してみた。 デプロイ結果 ... 無料のSQL Serverにつないでいるので初回は寝てて動かないかも。失敗したらコーヒー淹れて戻ってくるくらいで見れるようになるはず。 ソースコード バックエンド API一覧 インフラ ( Functions に CORS 設定 ) RESOURCE_GROUP_NAME='resource-group-hogehoge' PL_APP_REPO=https://user@dev.azure.com/user/reponamefuga/_git/async-ttrpg-hoge # Microsoft Azure Static Web Apps で公開したドメイン WSA_ORIGIN=https://hogehoge.azurestaticapps.net # ;が含まれているので "" で囲む DAT

Developer Summit 2024 Summer でお話ししたスライドです Proposal: https://event.shoeisha.jp/devsumi/20240723/session/5099 # URL YouTube: https://www.youtube.co…

絶対に欲しいところへ風を届けるミニ扇風機。クリップ、磁石、三脚ねじ穴で2024.07.28 12:005,574 岡本玄介 やっぱり、顔の高さに扇風機が欲しい。 最近は手持ちのハンディーな扇風機でも、平置きできるようなタイプがありますよね。でも、それでは欲しいところに風が来ないことがあります。 どこでも使えて風が届くサンワサプライのUSB扇風機｢FAN-USB1BK｣は、手持ち式ではありませんが、クリップ付きで挟めるだけでなく、磁石内臓で鉄製品にくっつきます。 はさんで、置いて、くっつけて、どこでも使えるUSB扇風機を発売 ■USB扇風機（バッテリー充電式） 品番：FAN-USB1BKhttps://t.co/VMMmlVKuhF — サンワサプライ【公式】 (@sanwainfo) July 26, 2024風量は4段階に調節でき、縦方向にも横方向にも360度回転するので、狙った場所に送

「Button Stealer」は閲覧したサイトからボタンを認識して自動でコレクションしてくれるツールとのことなので、実際に使って試してみました。 Button Stealer | Anatoly Zenkov https://anatolyzenkov.com/stolen-buttons/button-stealer 上記のリンクを開き、「Install Button Stealer」をクリック。 Chromeウェブストアが開くので「Chromeに追加」をクリックします。 「拡張機能を追加」をクリック。 Button Stealerのインストールに成功しました。Button Stealerのアイコンをクリックすると、「No buttons stolen yet(まだボタンを盗んでいません)」と表示されています。 この状態でブラウジングを行うと、サイト内のボタンを自動で認識してコレクショ

pnpm workspace+TypeScriptなmonorepoで、 Cloud Functions for Firebaseを開発していたときに、 unjs/unbuildでビルドしてみたときの備忘録(*´ω｀*) 少ない設定でビルドができて便利(*´ω｀*) unbuildとは unjs/unbuild: 📦 A unified JavaScript build system 「A unified JavaScript build system」らしい。 Viteがフロントエンド用のビルドに対し、 unbuildはライブラリなどによさそうな印象 少ない設定でESM/commonjs+型定義を生成できる package.jsonからビルド設定を自動で取得 package.jsonの設定やdependenciesの過不足を自動チェック ビルドする方法は2つあり、rollupとmkdi

問題 Storybookを起動すると、ビルドは成功するが、Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/public/images/icons/check.svg') is not a valid name.のエラーが出てしまう。 前提 アイコンを表示するコンポーネントを作成しています。 // Iconコンポーネント import Check from '/public/images/icons/check.svg'; const ICONS = { Check }; type IconName = keyof typeof ICONS; type Size = 16 | 24 | 32 | 64; type Props = { name: IconName; si

腕を冷やすという新発想。冷感ジェル入りアームカバー2024.07.28 11:006,235 岡本玄介 腕を冷やすアイテムって見ませんよねぇ？ 暑さ対策には、手持ちの扇風機や、ネッククーラーなどが一般的。つまりは首や顔、上半身辺りを冷やすアイテムばかりです。 あんまり冷やす部位に選ばれませんが、腕も冷えたら気持ち良いでしょうね。 冷感ジェルで腕を直接冷やすタンスのゲンの｢冷感特化アームカバー｣は、手首から肘にかけての腕専用冷感アイテム。 ひんやり気持ちの良い冷感特化ジェルで、表面はサラっとしたナイロン生地。冷蔵庫で1時間／冷凍庫で30分ほど冷やすと、最大30分冷たさが続きます。 家事やスポーツで火照った体に短時間使うのが良さそうです。 Image: タンスのゲンふだん通りに動ける伸縮性もあり、いつも通りに動けるのでストレスもなし。ふだん冷やさない腕に涼を感じたら、けっこう気持ち良いと思いま

オウルテックの｢OWL-LPBMG5002シリーズ｣、特徴は9.6mmというMagSafe対応モデルの中ではかなりの薄さ！ Image: AmazoniPhoneに装着するとやっぱポコッとはしちゃうんですが、それでもボゴォ！なんて悪目立ちしません。この厚みなら装着したままでの持ち運びも苦にならないはず。 また、有線で20W出力できるのは良いですね！ ケーブル接続が邪魔にならない環境なら、素早く充電できますし。実質2Wayで使えるのは優秀。 僕これアリだと思うんだけど、どうでしょう？

ESLint v9 では、設定方式に大きな変更が加えられ、Flat Configが導入されました。従来の ESLint 設定ファイル（.eslintrc.js など）では、設定が階層的に構造化されていましたが、flat config では設定がより直感的でシンプルになります。これにより、設定の競合や複雑な継承構造を避け、開発者がより簡単に設定を管理できるようになります。 Remix使ってサクッとアプリ作るかーと思っていたらESLintの設定をしていたっていうよくある時間の使い方をしました。v9の勉強になったのでいいか（？）。 ではRemixをv9に対応してきましょう。 本稿の設定ファイルは、 2024/07/28 に作成しています。 npm パッケージ @eslint/js eslint v9です @eslint/compat v9未対応プラグインを導入できるようにする globals 従

こちらの記事に刺激され書きました 何か書くことで誰かの参考になることもあるかもしれないかと思いました。 自己紹介 40代前半のエンジニアです。大学時から違和感を感じメンタルヘルスの持病を持っています。 高校で商業系の情報処理科に進みプログラミングと出会い、大学も工学系の経営工学で、ちょっとプログラミングをしてました。 高校時に基本情報技術者試験に受かり、学校の情報系のテストはいつも満点でした(アルゴリズム系が好きでした)。大学時アルバイトでプログラミングのアルバイトをしていました。 大卒から、下請けのお客様先常駐のSEを7年くらいして、4社転職しています。 8年離職して、Webエンジニア1年半やり、今フリーランス(開始直後)です。 新卒の就職活動 なんだかわからないまま、就職活動が始まってしまい、リクルートの就職フェスタなどの行きました。 何社か受けては落ち、「プログラミングのアルバイトを

はじめに テーブル定義とかER図とかを資料にするのが面倒で、何かいいのないかと調べたところschemaspyを見つけました。 これでいい感じにDB仕様書がつくってみます。 自分でDBやテーブル定義を用意するのが面倒だったのでisuconの勉強も兼ねてprivate-isuをお借りしました。 private-isuを立ち上げる 前準備としてprivate-isuを立ち上げます。 立て方と後片付けのやり方は を参考にしてください。 また、上記に加えてschemaspyでmysqlへのアクセスを行うため、インバウンドルールを追加で設定する必要があります。 MYSQL/Auroraをインバウンドルールに追加しましょう 下記記事が参考になります。 躓きポイントなのでしっかりやっておきましょう。 私はインバウンドルールが認識の外にあったので躓きました。 インスタンスとmysqlに入る SSH接続かなん

まえがき みなさん、マウス操作で効率的にブラウジングができるcrxMouseを使ったことはありますでしょうか？ crxMouseを使いこなすことで、ブラウジングのスピードが向上し、一日の作業効率が飛躍的に向上すること間違いなしです！ まだcrxMouseを知らない方は、この機会にぜひ試してみてください。すでに使っている方も、この記事を読んで、使い方の再確認をしてみてください。 もくじ 1.crxMouse とは 2.crxMouse のメリット 3.向いている人・向いていない人 4.導入方法 5.代表的な操作一覧 6.注意点 7.あとがき 8.おまけ 1. crxMouse とは crxMouse とはマウスジェスチャーのひとつ、 Google Chromeの拡張機能であるcrxMouse Chrome Gestures のことです。 例えば、右クリックしながらマウスを上下左右に動かすこと

はじめに 今回は、IT業界における生存戦略をプロジェクトのヒエラルキーから雑に考察します。 まずは、考察にあたってプロジェクトに参画する人員のヒエラルキーを図示します。 ヒエラルキーというとピラミッド状に▲で書かれることが多いですが、実情を鑑みるとそのようには書けなそうでした。1 リーダーやPMのフォントサイズを小さくして、Opacity (不透明度) を下げて見えにくくしているのは、リアルさの追求（？）です。2 サブリーダーもいたりいなかったり、リーダー候補として抜擢されるも勝手に期待された動き方が何か分からず結局はメンバーとしての動きをしました、というケースもありそうなので微妙な表現にしてみました。 IT生存戦略 生存戦略は生存率を上げるための戦略です。 シンプルにヒエラルキーの上にいけば行くほど生存率は上がるのですが、フォントサイズが小さくなったり不透明度が下がって霞んで見えたりと最

はじめに この記事では、なんとなくエンジニアを続けている状態から、エンジニアとしての強みを探したストーリーについて、文系卒知識ゼロから入社してリーダーを務めることが多くなったときに、方向性を悩んだ経験談について書きます。 なんとなくエンジニア 私は10年ちょっとSIer企業で勤めています。 それなりに目の前のことを楽しんできて、今に至るのですが、特段得意な領域もなく、私といえばこれといったラベルもないことが悩みでした。好奇心は強いほうなので、「やる？」と聞かれれば「やります！」と応え、面白そうな出来る上司の案件に手を挙げ、いろんな案件には携わらせてもらいました。 ▶️1〜4年目 1〜4年目くらいの若手の時の私は、おそらくプロジェクトにこの子いたら雑用もフットワーク軽くやってくれそうといった存在。飲み会も好きなので、いろんな飲み会にも顔出しそうなタイプ。得意なことは、進捗管理が苦手な技術おじ

タイトルの通りです。ブラウザ完結型のチュートリアルを簡単に作れるツールキットをStackBlitzが出してくれました。 こういう感じのチュートリアルサイトの雛形がコマンド一発で作れるので、チュートリアルコンテンツの作成に集中することができます。ただし、このツールキットはWebContainersの技術を使っているため、ブラウザ完結型で動かすことが可能な一方、WebContainersのコンテナ上で動くものに限定されてしまうので、現状としてはJS、CSSなどのライブラリやフレームワークのチュートリアルを作成できるツールと認識しておく必要があります。 早速触ってみる 公式のアナウンス通り、まずはプロジェクトを作成してみます 以下の項目に対話的に回答していくと自動的に設定してくれます。 プロジェクト名 プロジェクトのパス（デフォルトでカレントディレクトリの下） npm or pnpm gitのリ

イタリアのトレント大学などの研究チームは、月面の縦穴の一つが巨大な地下洞窟につながっていることを確認した。激しい寒暖差や宇宙放射線の被曝（ひばく）といった月面の過酷な環境から身を守ることができ、将来の月面基地の候補地として有望とみる。成果は英科学誌ネイチャーアストロノミーに掲載された。月には200カ所以上の縦穴が存在することが確認されている。中でも、月の表側にある「静かの海」と呼ばれる地域にあ

<Outlet>の機能説明 <Outlet>は、React Routerを使用する際に、親コンポーネント内で子コンポーネントを表示するためのプレースホルダー（占有位置）として機能します。具体的には、親ルートが一致したときに、その場所に対応する子ルートがレンダリングされます。 詳細な説明 親コンポーネント内に<Outlet>を配置することで、その場所に子コンポーネントがレンダリングされるようにします。 例えば、/aboutパスにアクセスすると、<Outlet>はAboutコンポーネントを表示します。 イメージ 具体的なコードは後述しますが、全体イメージは以下の通りです。 例えば共通のレイアウト（今回の例ではNavigation）を提供したい時、Outletはとても便利ですね。 具体的な例 次の例を使って詳しく説明します。 App.js import { BrowserRouter as Ro

概要 React の useEffect と useLayoutEffect は、関数コンポーネント内で副作用を処理するためのフックです。これらはどちらも副作用（データフェッチ、DOM 操作、サブスクリプションなど）を処理するために使用されますが、実行タイミングと目的に違いがあります。 useLayoutEffect 特徴 実行タイミング: useLayoutEffect は、DOM の変更がコミットされた後、ブラウザが再描画を行う前に実行されます。このため、UIの描画に先立って副作用が処理されます。 同期的な処理: useLayoutEffect は同期的に実行されます。これは、関数がブロックされ、すべての副作用が完了するまで次の描画が行われないことを意味します。 用途: レイアウトの測定や同期的なDOM操作に適しています。たとえば、要素のサイズを計測してその情報をもとに他のDOM操作を

2024.07.26 Vue.js v-tokyo Meetup #21 登壇資料 -