タグ

2024年5月17日のブックマーク (2件)

  • 【小規模サイト向け】Next.js ディレクトリ構成とコーディングルール

    Next.jsで小規模サイト(ブログやコーポレートサイトなど)を複数人で開発する際のディレクトリ構成とコーディングルールをまとめました。 以下の点を意識した構成になります。 小規模サイトの場合、コンポーネントの量は限られるのでディレクトリ構成は複雑になりすぎないようにする → ファイルへのアクセスのしやすさを重視 複数人での開発なので、できるだけ書き方を統一できるようにする → ESLint, StyleLintを導入 CSS設計やベースコーディングに疎くても一定以上の品質を担保できるようにする → jsxコンポーネントとCSSを同じ階層に配置して直感的に編集可能に → Sassを採用するが、SASS記法ではなく扱いやすいSCSS記法を採用 はじめに ディレクトリ構成はこちらの記事を参考にさせて頂きました。とても分かりやすく解説してくれているので是非読んでみてください。 最近はFeatur

    【小規模サイト向け】Next.js ディレクトリ構成とコーディングルール
    minetty99
    minetty99 2024/05/17
  • 令和のHTML / CSS / JavaScriptの書き方50選

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

    令和のHTML / CSS / JavaScriptの書き方50選
    minetty99
    minetty99 2024/05/17
    “details”