昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ

あらゆるオペレーションが生成AIによって「代替」されるであろう未来、テクニカルスキルを磨いただけのエンジニアが生き残っていくことは難しいとされる。AIに代替されることなく、AIの担い手となりうるエンジニア像とは、どのようなものだろうか。本セッションには、東京大学工学部在学中にフリーランスエンジニアとして独立、その後株式会社AppBrewを起業し、現在も代表兼エンジニアとして第一線で活躍している深澤 雄太氏が登壇。生成AIによって「代替」されていく世界でエンジニアはどう立ち回るべきか、自身の経験をもとに語った。 生成AIによって「代替」されていく世界 初めに深澤氏は、GPTの出現によって、エンジニアリングだけでなくさまざまなオペレーションが「代替」され始めている現状について整理した。 たとえばある機能を持った関数を作成したいときや、既存のコードはあるものの、それぞれの会社の「お作法」に合わせ

UNITT (大学技術移転協議会) アニュアルカンファレンス 2023 の講演資料を基にした、研究所向け & 技術起点のスタートアップ向けの資料です。『標準化』に関するセッションだったため、ルールメイキング等につ…

ChatGPTのリリースから1年以上経過した現在も、大規模言語モデル（LLM）の能力を活用し、自社やユーザー向けに価値を提供できている人や企業はごく一部に限られている。このセッションでは、株式会社セクションナイン代表取締役CTOでありChatGPT Community（JP）主宰の吉田 真吾氏、ネクストスキル合同会社の大嶋 勇樹氏、株式会社Pictoriaの阿部 由延（サルドラ）氏、合同会社HOHOの波々伯部 潤氏、ZEN Architectsの三宅 和之氏が登壇。ChatGPTから実際に成果を出しているパイオニアとも呼ぶべき5名が、自身の経験や具体的な取り組み、今後の展望について語り合った。 ChatGPTがもたらす業務効率化の実例 まずは冒頭、「ChatGPTによって効率化が進んでいるのは、どのような業務分野や産業分野か」との問いが司会者によって投げかけられた。 「ChatGPTをコン

ReactのスタイリングライブラリとしてTailwind CSSを使われる方は、そこそこいるのではないでしょうか？ そんな方にオススメのライブラリがあるので、紹介します。 ✨ prettier-plugin-tailwindcss tailwindの欠点として、クラス名が長くなりやすいということがあります。この時、tailwindのユーティリティクラスの並びが不規則だとさらに読みにくくなります。クラス名を自動でソートしてくれるprettierのプラグインを公式が配布しています。それがprettier-plugin-tailwindcssです。公式サイトにも案内があります。 その案内にも例が挙げられていますが、このプラグインを使うと以下のように、prettierがクラス名の並び替えを行なってくれるようになります。 - <div class="text-gray-700 shadow-md p

Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出

「スポッチャ」などの遊戯施設運営で知られるラウンドワンが米国で人気を集め、業績を伸ばしている。コロナ禍後、米国では郊外のショッピングセンターでテナントの立ち退きが相次いでいたが、ラウンドワンが起死回生に一役買っているという。米国で人気の理由とは？ 全米で50ヵ所以上に 2021年末、米国コネチカット州郊外のショッピングモールに日本のビジネスマンご一行が訪れた。彼らは、破綻したアパレルブランド「フォーエバー21」が立ち退いた後、空っぽになっていたショピングモールを視察していたという。 このショッピングモールのオーナーは、米国ではもはや百貨店は流行しないと気づき、百貨店の代わりにモールの起死回生のために目をつけたのが、ゲームセンターなどを運営する日本のアミューズメント施設「ラウンドワン」だった。 米国ラウンドワンは現在、全米で50ヵ所以上の店舗を展開している。日本のゲーム機がたくさん並び、なか

先日友人と話しているとこんなことを言われた。私はよくブログを読んでいただけるのだが、確かに昔はこういう事に悩んでいたこともあった。だから、炎上を恐れることなく、昔の私のように困っている人にもブログを楽しんで欲しいなと思って書いてみました。 自分もnote書くことあるけど、意見とか考えを書くのはハードルが高いなと思うこともある。 自分の意見が炎上/否定されたらちょっと怖いなとか。 だからただただ素直に意見出せるの自体がすごいことだと思う。 友達炎上王子と言われていた私私がマイクロソフトのエヴァンジェリストだった頃、周りの人に良く「炎上王子」と呼ばれていました。本当によく炎上したので。 例えばこのブログはよく燃えた。別に燃やしにいっていたわけではない。ただ、素直に自分の意見をシェアしたのだ。 こうやって燃えた場合、特にはてなブックマークあたりでボロカスに書かれる。もちろん喜んでくれる人も多いの

実装していて 「構造的部分型」 なんて意識していなかったけど、「構造的部分型」をちょっと理解していると、下記のサンプルがなんで実装エラー（静的型チェックエラー）にならず、実行できるのか理解できるよ、っていう話。 class Person { public talk() { console.log('こんちは'); } } class Dog { public talk() { console.log('ワン！'); } } const person = new Person(); const dog: Dog = person; // ←これエラーにならないよ！！ dog.talk(); PersonクラスってDogクラスから派生してるわけでもなく、なんでエラーにならないんだ？？ Javaなら間違いなくエラーになりますよね。 このエラーにならない理由が、TypeScriptが「構造的部分型

こんにちわ。組織開発がミッションの人事グループ・組織開発室に所属しているてぃーびーです。 仕事において、座学だけで身につけやすい知識やスキルもあれば、実際の業務の経験を通さないと身に着けにくい知識やスキルもあります。この記事では、実践を通さないと身につけることが難しい対象を身につけるための場としてのプラクティスフィールドについてまとめます。 プラクティスフィールド(Practice Fields)とは、組織学習の研究者ピーター・センゲの提唱した概念です。プラクティスフィールドは重要な知識やスキルを高めるための"練習場"のことです。 何かを習得する上で重要なのは実践の場です。一方で、仕事において実践は事業の成功とつながっており、取り扱う内容によっては失敗を許容できるとは限りません。「本番で失敗した場合の影響が大きい」かつ「習得には実践からの試行錯誤を通した改善が必要」という両方の要素が前提と

この記事について PHPは、毎年恒例となっている新しいメジャーまたはマイナーバージョンのリリースを続け、2023年11月23日にリリースされたPHP8.3も例外ではありません。この新バージョンは、多くの新機能と改善を加え、PHPの汎用性と進化する言語としての地位をさらに固めています。 この記事では、PHP8.3に導入された注目すべき新機能を紹介します。 新機能 クラス定数の型付け クラス定数に型をかけるようになりました。 // valid class TestClass { const string MY_TEXT = 'my text'; } // valid interface TestInterface { const string MY_TEXT = 'my text'; } // valid trait TestTrait { const string MY_TEXT = 'my

メールの基本的な技術について体系的にわかりやすく書かれた入門書！「DNS、SMTP、POP、IMAP、SPF、DKIM、DMARC」などの技術を腹落ちできていない方は必読です！ こんにちは！AWS事業本部のおつまみです。 みなさん！メール技術について自信はありますか？私はちょっと不安でした。 日頃、 Amazon SES をよく利用しているのですが、メール技術の基本について腹落ちできていないと感じていました。 そんな中、2024/2/21に「実務で使える メール技術の教科書」が発売されました！ 今の自分にぴったりだと感じたので、さっそく読んでみました！ 本記事では本書の概要と感想を共有します。 章別の概要まとめ 1章：メールが相手に届くまで メール送信にはSMTPサーバー、メール受信にはPOP,IMAPサーバーが利用されている。 これらの複数サーバーを経由し、メールが相手に届けられている。

去年にアップデートされた Chorome 83 以降、拡張やアプリなどを導入することなく、DevTools で簡単にシミュレートすることが可能になっています。 手順 DevTools のメニューを開きます。 More tools から Rendering を選択します。 あとは Emulate vision deficiencies で選択するだけです。 シミュレーションできる種類 実際に DevelopersIO のロゴがどう見えるのか、それぞれの選択肢でどうみえるようになるのか確認してみました。 選択肢名 サンプル画像

はじめに おはようございます。Watanabe Jin(@Sicut_study)です。 今回は物事を継続的に続けて成果を出せるようになる仕組みについて書いていきます。 この考え方を身につければきっと成果が出るようになってきますので、試してみてください！ 毎朝5分で読める 朝5分で読めるシリーズは平日7時にエンジニアの方に気づきが与えられるような記事を投稿しています。 よければ@Sicut_studyのフォローを宜しくおねがいします！ またスタエフでも毎朝6時58分にお話をしているので、耳で学習したい方はこちらもお願いします！ 5分聞いて記事の内容を学べます👇 継続できないには理由がある あなたは継続することが得意ですか？ おそらく世の中の多くの方が継続を苦手にしていると思います。 それに比べて私はものすごく継続が得意です。 Qiitaを3年間書き続けて500本以上投稿 LTに月7本登壇

はじめに 過去三年間、技術者ではない方々に OAuth（オーオース）の説明を繰り返してきました※1,※2。その結果、OAuth をかなり分かりやすく説明することができるようになりました。この記事では、その説明手順をご紹介します。 ※1：Authlete 社の創業者として資金調達のため投資家巡りをしていました（TechCrunch Japan：『APIエコノミー立ち上がりのカギ、OAuth技術のAUTHLETEが500 Startups Japanらから1.4億円を調達』）。Authlete アカウント登録はこちら！ ※2：そして２回目の資金調達！→『AUTHLETE　凸版・NTTドコモベンチャーズ・MTIからプレシリーズA資金調達』(2018 年 2 月 15 日発表) 説明手順 （１）ユーザーのデータがあります。 （２）ユーザーのデータを管理するサーバーがあります。これを『リソースサーバ

エンジニアとしていい仕事をするために、そして成長するためにはビジネスに対する理解も進める必要がある。とはいえ、技術とビジネスの二刀流を実現するのはなかなか大変だ。30年にわたり、「テクノロジーとコンサルティングの融合」に取り組んできたビッグツリーテクノロジー&コンサルティング（以下、BTC）のCTOである高安厚思氏が、業界経験で出会った「すごいエンジニア」との対話を紐解きながら、エンジニアの成長について語った。 高安氏が30年の業界経験から考える「すごいエンジニア」とは？ 30年にわたり、ソフトウェアエンジニアリングを適用したシステム開発やコンサルティングに携わってきた高安氏。アーキテクトとしても活躍し、『システム設計の謎を解く』（SBクリエイティブ）など、著書も多数持つ。同氏がCTOを務めるBTCでは、チームとして仕事を進めるに当たり「テクノロジーとコンサルティングの融合」が不可欠と考え

はじめに いつも聞いているポッドキャスト番組で、エンジニア転職について生々しくリアルな話が聞けたので、紹介します。今の自分がやっている仕事が市場価値を上げられているのか？ と日々の業務を振り返るきっかけになりました。詳しく知りたい方は是非、聞いてみて下さい。 転職の前提 かいちさん（転職した人）の紹介 情報系の大学院卒 中堅のバックエンド・エンジニア(30代) 社会人7年目 主に使っている言語: python, PHP アジャイル開発ができることを転職の軸に据えた 転職して感じたこと ① 30代は中堅の仕事を求められる → リーダー的立場が求められる ② 若い時の業務経験が転職の際に活きてくる → 20代はとにかく挑戦する回数を増やそう ③ 転職はどのタイミングでやってくるかわからない → 常に職務経歴書を更新し続けよう 結論 重要なポイント ・チームで開発した経験があるか？ ・AWSなど

他者と円滑なやりとりをするためには、相手は異なる人間であり、異なる信念・意図・感情・知識などを持っているということを理解し、それを踏まえてやりとりをする必要があります。正解は一つではなく、相手が異なれば必要なコミュニケーションは変わります。

こんにちは、AWS事業本部の神保です。 先日の話ですが、このブログを書こうかと気合を入れた瞬間に地震が起きました(2024/3/21) 。 一体どうなっているのでしょうか。。これ以上地震に見舞われないことを祈るばかりです。 CLF試験を受けました さて今回のテーマは、AWS Certified Cloud Practitioner(CLF-C02) を取得した話です。 私は今まで、インフラ系のシステムエンジニア（社内）など経験したこともあり、GCPやAzureをちょこちょこ触ったことはありましたが、AWSはクラスメソッドにジョインするまで全く触ったことはありませんでした。 AWSは資格が複数あり、はじめの一歩の資格としてさほどつまづくことはないかな、などと考えていましたが、 サービスの種類が多く、覚える内容が多岐にわたったため、これは対策をしないと取れないなと感じ、自分なりに工夫して知識を