Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

May 11, 2024 @ TSKaigi

TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity

Feature-Sliced Designとは Feature-Sliced Design（以下FSD）とは、フロントエンドのディレクトリ設計方法の1つです。公式には「Architectural methodology for frontend projects(フロントエンドのアーキテクチャ方法論)」とされています。 FSDはLayers・Slices・Segmentsといった3つの概念と、それを取り巻くルールやプラクティスで成り立っています。 FSDは予測可能なスコープとスケーラブルな設計を目指しています。プロジェクトがスケールするにつれて発生する問題、例えば増えすぎたコンポーネントによる複雑な依存関係や名前空間の衝突などの防止に役立ちます。また、FSDはこの構成の不完全さについても言及しており、小規模すぎる場合にはデメリットの方が上回ってしまう可能性があること、そして大規模な場合には

お手入れをしてから収納したはずなのに起きてしまうこの悲劇を避けるには、実はメンテナンスだけではなく、“正しい保管方法”が重要なのです！ カビだけじゃない。湿気が引き起こす「劣化」の恐ろしさそもそもなぜ、保管前には問題が見つからなかったウェアやシューズが、時間が経ってからとり出してみると劣化している、ということが起きるのでしょうか。 その理由は…… じわじわと忍び寄る、登山用品の大敵「加水分解」という現象にあり！撮影：まつだしなこ　レインウェアのフード部分に使用されたシームテープが加水分解ではがれおちました。私たちの身の回りにある物質は、ほとんどが二つ以上の原子が結合してできた化合物です。加水分解とは、この化合物の結合部分を水が切断し、別の物質に変えてしまう化学反応のこと。 水だけではなく空気中の水蒸気によっても引き起こされるため、しっかり乾かして水分をとばしたつもりでも、保管中に湿気を吸う

www.hageatama.org blog.hatenablog.com 自分の周辺でネットの開通で事故っている人に向けて書いた記事が、2023年のはてなブログで年間3位になっちゃった奴の続編です。引っ越しシーズンでまたアクセスがちょこちょこと伸びてるので今度こそ書き上げるぞ！と思ってたのに、言いたいこと全部書いたら電柱見上げる話で長文になってしまい完結しませんでした……。 前回のような、一般向け想定の妥協はしません。今回は本当の誰得記事なので、拾える枝葉も残しましたし、読みやすさも捨てました。 そもそも私自身、別にネットワークエンジニアどころか、IT業界の人間ですらないので専門的な正しさは保証できません。ぜひフィードバックはほしいし、何ならこの上位互換の記事を書いてください。私が読みたい。 【主張の概要】 光コンセントが元からある物件を選べ フレッツ光回線でプロバイダをいつでも切り替え

ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__

本来は親友に向けたマンションリフォームのアドバイスだが、LINEで送るには長すぎるので、増田の日記として公にさらしてみる。ブコメやトラバで有用な反論が得られるかもしれない。 祝1000user超え。いろんな意見が聞けて楽しい。おそうじ浴槽がみんなに届いてうれしい。 祝2000user超え。自分の知識がみんなの役に立ったようでうれしい。はてブ愛してる。 増田は建築士としてそれなりに経験値はあるが、住まいのあり方や価値観は本当に多様なので、N=1の意見として参照するぐらいがちょうどよい。 大前提適切な断熱壁と二重ガラス樹脂サッシが装備されていること。それがない建築が許されるのは安藤忠雄だけ。 既存のサッシが交換できないならインプラスなどの内窓をいれればよし。 風呂編おそうじ浴槽！これが言いたくてこの長い日記を書いているといっても過言ではない。 google:image:おそうじ浴槽 他の設備投

3連休初日のこと。 「あのさ、できたらでいいんだけど」 申し訳なさそうな声で旦那が続ける。 「突然なんだけど、明日◯◯ちゃん（市のご当地キャラ）の中に入れたりする？」 うちの旦那は市役所職員なのだが、どうも祝日にイベント対応する人が調整しきれなかったらしい。 うちのご当地キャラはかわいい。めちゃかわいいのに、あちこちのイベントに貸し出されては、ぼやーっと棒立ちしてるのをよく見かけていた。 中に入るのはプロではなく、イベント担当課の若手職員らしい。しょうがないよねとは思いつつ、◯◯ちゃん大好きな私としては、「◯◯ちゃんは、本当はもっとかわいいのに！」というモヤモヤを感じていた。そこにやってきたこんなチャンス！乗らない訳がない。 「いいよ！やるよ！」食い気味に返事をすると、「え？いいんだ？」と逆に旦那が驚いていた。 イベントは明日である。すぐに「着ぐるみ、動き、かわいい」などのワードを検索しま

おじいちゃんが亡くなって、もうすぐ２年なので二重の意味で供養する . 私はどこに出しても恥ずかしい陰キャでオタク。 更には、大金かけて入学させてもらった私立大を中退して実家に帰ってくる親不孝でもあった。 5歳下の弟は国立大へ入学後、大学院へ、卒業後は隣の県で、地元の有名企業に新卒採用された。 私はというと、実家から通える職場に何とか腰をすえて、朝から夜遅くまで働く毎日。 . 絵に描いたような出来損ないの姉と優秀な弟だが、おじいちゃんとおばあちゃんからみれば、どちらもかわいい孫だったようで、平等にかわいがってもらっていた。 あと、他にも孫は5人ほどいて、同じ歳の従姉妹たちは20代で赤ちゃん生んで若いママとなり、従兄弟たちは実家の事業継いだり、東京で仕事したり、そんな感じ 親戚の集まりでも、叔父さんたちから、アネちゃんは…とりあえずいい人見つけて、早く赤ちゃん生まなきゃね…😅みたいに言われて

こんにちは。プロダクトデザイナーときどき料理人、ツジメシこと辻村哲也です。「ツジメシの日常メシと週末メシ」シリーズ、今回は週末メシ。 一段と寒くなって冬野菜の美味しい季節です。旬でお手頃な白菜をたっぷり使った、メインになる一皿をご紹介します。塩をして半日から一晩おいた豚の塊肉を、たっぷりの白菜の上で蒸し煮にすることで、豚肉は柔らかく火が入り、白菜は豚の味を吸いながらとろとろに煮えて、どちらも美味しくなるという仕掛けです。白菜から出た水分に豚のエキスが合わさったスープは飲み干したくなる美味しさなので、拭って食べるパンをぜひご用意ください。飲む方はワインのスタンバイもお忘れなく。 レシピでは作りやすい量でご紹介しています。食べきれなくても冷凍保存できますし、冷凍しておいたものからパスタへの展開もできますので、ぜひ最後までご覧ください。 調理工程は ・豚塊肉に塩をして8〜12時間おく ・白菜に乗

要旨 コメントを適切に記述することは、特にインターフェイス（クラスやメソッド）において重要です。これにより、直感性が高まり、抽象化が十分に行われているかを確認する手助けになります。そのため、コメントはソフトウェア設計プロセスの重要な一部と位置づけられます。 2種類のコメントタイプ まず、コメントを2種類に分類します。 1️⃣ コードをより詳細化するコメント(lower-level comment) 2️⃣ コードをより抽象化するコメント(higher-level comment) どちらも必要なコメントとしつつ、本書では後者のコメントをより重視しています。 1️⃣ コードを詳細化するコメント(lower-level comment) 変数名などに残すタイプのコメントで、宣言した対象の単位や境界値、null許容などの詳細を明示することで、コードの正確性を高めます。こちらのタイプのコメントも必

16年と半年前、57歳になったばかりの2007年の9月に初めての投稿をしました。その2ヶ月くらい前から閲覧はしていた気がしますが閲覧履歴のようなものはないためわかりません。 ちょうどその頃、勤務していた会社で役員に昇格したばかりでした。法学部を卒業し新卒で入社して以来、ひたすら営業畑にいた私が役員になってから与えられたのは情報システム部を含むIT分野でした。 その10年前ごろから会社にパソコンが導入され始め、総務部門にいた同期が悪戦苦闘しており「大変そうだな〜」なんて気楽に思っておりましたが、まさか自分がそれらを統括する立場に置かれるとは思いませんでした。 IBMが主催する勉強会に参加したり、書籍を購入したり、パソコン教室にも通い、DELLのデスクトップPCを購入して大学生だった息子に助けられながら設定をしていました。 インターネットを徘徊する中で見つけたのがはてな匿名ダイアリーです。 結

TypeScriptとドメイン駆動設計（DDD）を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。

ハイどうもお久しぶりです。 今日はX (Twitter)で少し書いてみたものの、これはnoteにまとめた方がいいんじゃね？と途中で気がついた「ハウスDJって普段どんな感じで選曲してるの？」をテーマに書いてみたいと思います。 主に自分なりのやり方とか方法論になるので、これが正解！とかじゃなくて何か参考になるところがあれば、位で読んでもらえると助かります。 なお後半は有料記事になっていますが、実際にDJしてる方向けの実践的な内容となっていますので、興味のある方はぜひ最後まで読んでください。 曲単位だとめっちゃいいの持ってるんだけど、全体的な流れがあっちこっち行って微妙やな…みたいになる人は、曲の持つ要素をしっかり分析して見極めるのと、同じ要素を持つ曲で繋いで行く意識を持つと良くなると思います ただ流れがスムーズになったからDJとして良くなるのかは何とも言えない🫠 — coolsurf (@c

紹介された方法は次の通りです。 まず、用意した鶏モモ肉に、重量の１%の塩をふります。 たとえば調理する肉が３００gならば、小さじ半分程度の塩３gをまぶしておきましょう。 皮がパリッパリ、身はプリップリのチキンステーキが完成です！ 鶏モモ肉を焼く際は、重しなどを使うと、よりパリッと感が増すとのこと。 器に盛って、お好みのソースや付け合わせを添えれば、豪華なクリスマスのごちそうになりますよ。 毎年１２月に紹介されている、『鶏モモ肉の焼き方』。 投稿には「クリスマスの予行練習でやってみたけど、皮パリパリで身はふわふわ！試食した子供も大喜びだった」「安い肉が名のある地鶏くらいにおいしくなった。またやろう！」など好評の声が寄せられていました。 チキンステーキは、シンプルな料理だからこそ、焼き加減や味付けに失敗してしまうことがあります。 「塩をふって寝かせておくだけ」であれば、誰でも簡単においしく作る

このエントリは【カヤック】面白法人グループ Advent Calendar 2023 の17日目の記事です。 はじめに こんにちは、今年のITS健保、ライブなどの抽選でどれも当選しなかった魏と申します。 ITS健保（関東ITソフトウェア健康保険組合）には様々なお得の施策がありますが、他の社員に聞いたら意外と知られていないのが多いようです。それを機に今回の記事でいくつかを軽く紹介します。 はじめに 保養施設 一番お得な「直営・通年・夏季・冬季保養施設」 抽選申込 空き照会申込 5000円/泊の補助がもらえる「契約保養施設」 ITS旅行センター契約保養施設 ラフォーレ倶楽部 10000円補助がもらえる「ITS旅行パック」 その他 健歩大会 利用料金が半分になる「スポーツクラブ」 さらにお得の小技 最後に 保養施設 保養施設 ITS健保で利用できる保養施設は6種類ありますが、メインの3つだけ紹介

突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UI Stack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error

はてブの人気エントリーに日本のエンジニア達は海外に出なければいけないという記事があった。 カナダ在住で経験年数4年のソフトウェアエンジニアで年収1600万円の方らしく、 日本より海外の方がソフトウェアエンジニアの給料が一般に高いので海外に行くべきという話が書かれている。 実際僕も居住地域による給与差を利用すべく渡米し、先月の記事 では新卒から数えて8年で年収が12倍になっていた話も紹介した。 一方、年収1600万円であれば海外に出なくても稼げると思っているので、 国内にいてもできそうなものも含め、ソフトウェアエンジニアとして給料を上げる上で過去に活用したハックを紹介していきたい。 昇給履歴 新卒入社 僕が新卒で入社した会社の当時の初年度給与は450万円だった (公開情報)。 大学の4年間はずっとアルバイトとしてソフトウェアエンジニアをやっていて、 3社を渡り歩いて時給は800〜1350円と