テクニカルライティングの基本を学べます。サイボウズの新入社員向け研修資料です。業務マニュアル、報告書、仕様書、技術解説書などのドキュメントを書く機会がある方向け。 Twitter：https://twitter.com/naoh_nak 2023年度のアップデート版もあります：https://spe…

Cхематизация процессов и пользовательского опыта с Картой процесса-опыта

「Webサイトデザインのことがよくわかってるデザイナーに制作を依頼したいなあ…」とお考えの方は、以下のボタンからご連絡ください。企業公式サイトやLP、広告バナーなど、Webデザイン全般をおまかせいただけます。バナー1枚からでもご依頼可能です。ご相談は無料でお受けいたしますので、お気軽にお問合せください！ Webページの構成に関する用語 Webサイトはたくさんのパーツで構成されています。 ここでは特に使用頻度の高いモノをご紹介します。 ▲ここではおもにWebページのファーストビューまわりの用語を紹介します。 ❶ ヘッダー ページ最上部の横長のエリアをさします。一般的には会社ロゴやナビゲーションが入り、下層ページにも共通で使用することが一般的です。 ❷ ナビゲーション（グローバルナビゲーション） Webサイトにおけるメニュー表のようなものです。 ユーザーがサイトの色々なページを迷わずに閲覧しや

BPStudy#188〜要件定義を学ぼう。ChatGPTを添えて( https://bpstudy.connpass.com/event/281289/ ) の登壇資料です。 2023年4月28日(金)に開催。

Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです https://niigata-5min-tech.connpass.com/event/307076/

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

昨今のフロントエンド向け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 text'; } //

メールの基本的な技術について体系的にわかりやすく書かれた入門書！「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 のロゴがどう見えるのか、それぞれの選択肢でどうみえるようになるのか確認してみました。 選択肢名 サンプル画像