Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？　コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ

ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです

高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので最新のバージョンは 2023 年 12 月 5 日にリリースされた Astro4.0 です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astro ですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発されています。

Web技術の急速な発展により、インターネットを通じて様々な情報を得たり、多くの業務をこなしています。 私たちが普段利用しているWebサイトやWebサービスは、インターネットの向こうにあるWebサーバから配信され、ブラウザ上に表示されます。Webサイト／サービスにとって、Webサーバーは 必要不可欠な存在なのです。 今回の記事では、Webサーバーの概要をはじめ、Webサーバーの仕組みやシェア率、サーバーごとの特徴についてわかりやすく解説していきます。現在、主流となっているWebサーバーの種類と特徴を理解して、適切なWebサーバーを選ぶことが重要です。 Webサーバーとは？ インターネットが普及し、誰でも簡単にWebサイトを持てる時代になりました。また、ほとんどの企業は、自社HPや自社メディアを運営するためにWebサイトを構築し運用することが一般的になってきています。 本章では、Webサーバー

Web Almanac HTTP Archiveの年次報告書 ウェブの状態レポート 私たちの使命は、HTTP Archiveの生の統計やトレンドを、ウェブコミュニティの専門知識と組み合わせることです。Web Almanacは、実際のデータと信頼できるウェブの専門家に裏付けられた、ウェブの状態に関する包括的なレポートです。2022年版は、ページコンテンツ、ユーザー体験、パブリッシング、配布などの側面を網羅した23の章で構成されています。 探索を開始 注目の章 SEO ページのHTMLにおける構造化データの実装は増加の一途をたどっています。2021年には、デスクトップページの41.8%、モバイルページの42.5%が構造化データを使用していました。2022年には、HTML内に構造化データを持つデスクトップページの44%、モバイルページの45.1%に上昇しています。

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

こんにちは。Gaji-Labo 横田です。今日は、Tailwind CSS を採用しない方がいいかもしれないユースケースを考えてみました。 併用するオリジナル CSS や他のフレームワークが存在するたとえば Shopify のような SaaS の場合、テーマごとに独自の CSS が含まれています。また運用中のサイトやサービスであれば、オリジナルの CSS や、採用済みの CSS フレームワークや設計、ルールが存在します。このようなベースとなる別の CSS ありきに Tailwind CSS を後から導入する場合、 class 名に接頭辞をつけるなどの工夫で既存の CSS と区別しながら併用することはもちろん可能ですが、以下のような開発コスト・運用コストを同時に考慮する必要があると思います。 @tailwind base; を読み込むと既存のリセット系スタイルに影響を及ぼすケースがある。結果

目次 こんにちは、CADDi でフロントエンド エンジニアをやっている桐生です。この記事は CADDi Advent Calendar 2020 の7日目の記事になります。 昨日の記事はモリさんの あえてケイスケ・ホンダのようなデザイナーになるには でした！まだご覧になっていない方はぜひ目を通してみてください！ 本日は、最近触っている tailwindcss についてお話できればと思います。 [toc] tailwindcss とは tailwindcss は数あるCSSフレームワークの1つですが、Utility first というアプローチでスタイルを組み上げていく点がユニークで、OOCSS, BEM, SMACSS など、これまでのCSS設計アプローチとは考え方が大きく異なります。 tailwindcss では p-6, max-w-sm などの CSS class を utility

Tailwind CSSの設計思想を業務に活かす 前編 Tailwind CSSとそのCSS設計思想とは 前編後編の2回に分けて、CSSフレームワークのTailwind CSSとそのCSS設計思想を参考にしたCSS設計を話し合います。前編はTailwind CSSの設計思想とその特徴を語ります。 はじめに 最近話題に上がることも多いCSSフレームワークのTailwind CSSを取り上げ、CSS設計の課題やその解決方法の糸口を探っていく座談会です。 座談会はゲストとして、Tailwind CSSの作者のブログを翻訳した安田 祐平さんをお招きして行われました。 参加者は次のとおりです。 安田 祐平さん（株式会社シフトブレイン：フロントエンド・エンジニア） 中村 享介（株式会社ピクセルグリッド：Jamstackエンジニア） 高津戸 壮（株式会社ピクセルグリッド：フロントエンド・エンジニア） 坂

A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。

こんにちは。 今回はローカルでPHPが動作する環境を作る事ができるDockerを紹介したいと思います。 新規契約や、サーバに関する深い知識は必要がなく、Dockerを理解すれば簡単にサーバ構築ができるので、ぜひ最後までご覧ください。 Dockerとは？ 「データやプログラムを隔離できる」仕組み OS（Linux）やPHP、SQLなどをそれぞれ一つのコンテナとして組み合わせて実行環境を作成する 様々なサーバを構築する事も可能（webサーバ、メールサーバ…他多数） 今回はwebサーバ、データベースサーバのみ使用 Dockerのメリットとデメリット メリット 独立しているため、一部だけ差し替えたり修正する事も安全に行える 「イメージ化」が可能なので自分で1から作らなくても手軽に構築できる コンテナにカーネルを含める必要がないので、かなり軽量 全員に同じ開発環境を提供する事ができる デメリット L

弊社では、ほぼ全ての受託システム開発案件で開発環境を用意する際、dockerを用いて環境構築をしています。 そこでエンジニア歴間もない筆者が、弊社の受託システム開発で用いているwebアプリケーションの構成とdockerを利用しての開発環境構築について改めて見直すいいきっかけだと思い、この記事を書きました。 今回は「知識編」ということで初心者向けに、理解に重きを置いた簡略化した内容となっておりますのでご承知ください。 弊社の受託システム開発で採用している構成 webアプリケーション構成「3層アーキテクチャ」 細かい名前等は一旦置いておきまして、弊社の受託システム開発では下図のような3層アーキテクチャの構成になっていることが多いです。 大まかに説明するとクライアントがwebページを閲覧するまでに、内部的にはこのようなことが起きています。 クライアントが自分のパソコンでwebブラウザを利用してみ

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

みなさん、こんにちは。ウェブラボデザイナーチームです。今回はWebデザインでの配色の比率について考えていきたいと思います。 みなさんはデザインをする時、ページ全体の配色の比率まで意識できていますか？キレイに配色されたデザインの多くは色の組み合わせだけでなく使用する色の比率まで考えられています。デザインにおいての基本的なルールでもありますので、一緒に学んでいきましょう。 配色黄金比とは？ キレイと感じるデザインの多くには黄金比が使われています。実は配色においても配色黄金比というものが存在するんです。これはWebのみならずいろんな分野で応用できる比率です。 一般的には「ベースカラー」「メインカラー」「アクセントカラー」の3つで構成されていて、それぞれベースカラー（70%）メインカラー（25％）アクセントカラー（5％）が最適とされています。この3つがWebサイトでは主にどのような役割を果たすのか

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの

一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。

【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのデータソリューション事業に携わっている水野です。現在は、「DATA SOLUTION」というサービスと、その開発基盤となる「DS.Design System」の開発に関わっています。 近年、デザインシステムはプロダクト開発のホットワードとなり、多くの有名企業がオープンソースとしてデザインシステムを公開しています。例えば、Atrasian社のLightning、Adobe社のSpectrumは有名なデザインシステムで、アメリカでは200以上の政府サイトに導入されているUSWDSもあります。企業のみならず、政府単位でデザインシステムが導入され、驚くべき広がりを見せています。 DATA SOLUTIONでは、デザイン