ESLint を eslintrc から Flat Config に移行する、ハマりポイントを添えて。 - Qiita
ESLint の Flat Config は v9 でデフォルトとなり、 v10 で eslintrc は完全に削除されるため、徐々に移行していく方が増えてくる頃合いでしょうか。 私が移行する上でわからなかったこと、ハマったポイントなど残しておこうと思います。 これが誰かの助けになれば幸いです。 ESLint の Flat Config とは ESLint の新しい設定システムです。 今まで ESLint の設定は eslintrc に記述していましたが、Flat Config では eslint.config.js というファイルに記述していく形になります。 eslintrc で書いていたものとの違いは主に以下のものがあります。 plugin や perser の読み込み方が変わった extends が廃止された glob pattern で対象のファイルを毎に設定を書くことができるよう
TypeScriptでResult型でのエラーハンドリングを通してモナドの世界を覗いてみる - Qiita
この記事は NSSOL Advent Calendar 2022 の1日目の記事です はじめに 私が現在所属しているチームでは、フロントエンドもバックエンドも共にTypeScriptをで開発を進めており、具体的にはフロントエンドではReact、バックエンドではNestJSを使用しています。 TypeScriptで共通化させることで、TypeScriptが提供する型安全性を享受しながらも、バックエンドとフロントエンドで大きなコンテキストスイッチを発生させることなく開発を進めることができていると感じています。 ただ、実感としては、バックエンドではソフトウェアで解決したい対象となるドメインのモデルを class で表現したり、フロントエンドのReactでは小さい関数や hooks を集約させることでロジックを表現したりと、フロントエンドとバックエンドでのロジックの構築方法に差異を感じていました。
APCAコントラスト日本語フォント検証 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日APCA何もわからないという記事を書きました。 WCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムについて、欧文フォントを基準にフォントサイズとウェイトの基準値が定められているので、日本語のフォントでどうなるのだろう？という問題提起の雑文でした（そうだったのか）。 まぁ、まだAPCAは開発中でもあり、WCAG 3.0が正式にリリースされるまでも結構かかりそうなので焦ることはない気はしますが、気になったものはしょうがないので、日本語フォントでシミュレーションできるツールを作成してみました。 AP
12 年続くサービスにダークテーマ UI を導入した - Qiita
この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン
Webブラウザの日本語改行問題 -改行を実現するHTML/CSS-（1） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrom
[初心者向け] プログラムの計算量を求める方法 - Qiita
はじめに この記事では、プログラムの計算量を求める方法を説明します。プログラミングの初心者向けに、厳密さよりも分かりやすさを優先して説明していきます。 サンプルコードについて この記事のサンプルコードは、C言語（C99）で記述しています。 計算量とは？ 計算量とは、 「そのプログラムがどれくらい速いかを大雑把に表す指標」 です。 もう少し正確に言うと、 「入力サイズの増加に対して、実行時間がどれくらいの割合で増加するかを表す指標」 です。 グラフによる計算量の表現 計算量をグラフで表すと、以下のようになります。 これは、**「入力サイズ $n$ が増加するにつれて、実行時間が $n$ に比例して増加する」**ということを表しています。 別のグラフも見てみましょう。 これは、**「入力サイズ $n$ が増加するにつれて、実行時間が $n^2$ に比例して増加する」**ということを表しています
![[初心者向け] プログラムの計算量を求める方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1ff6a1017a0c5dfc09eeed6768d084d1fba21e1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDY0MzQlMkZwcm9maWxlLWltYWdlcyUyRjE1MDI0NjM4NzI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MDYwYzlhMzNkNjAxNTEyMDU0OWMxMmJiOTczZDg5M2Q%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7f1eafd9d1cb09878e0f3e462bf816f9%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVEJTIwJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJUEwJUUzJTgxJUFFJUU4JUE4JTg4JUU3JUFFJTk3JUU5JTg3JThGJUUzJTgyJTkyJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OGZmNDgzYTEyNTc1NmNlZmE2NGVkNDcwZGQ4ZTMyYzA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjb3RycGVwZSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWIwMDBhZDVlNTZhMGI4YWE3NjE5N2ZhZDg2Njg0Mjc3%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dbb350828202863c4791d0c9948f603bb)
Figma のデータ、少し楽になるかもしれない作り方 - Qiita
この記事の概要 variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。 この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。 フォーカスリング付きの UI 以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。 このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。 そこで Absolute position と Constraintsを使います。 まず通常時のボタンはこのような構成です。 至って普通の作り方です。 次に、フォーカスリング付きのボタンの構成です。 元のボタンよりもひとまわり（ここでは上下左右それぞれ 3px ずつ）大きい四角形を作り、Absolute position で配置しました。 そして Co
【デザインシステム】エンジニアが知っておきたいデザインシステム - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Va
svg のリファクタリングの流れ - Qiita
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0L0 1C2.99988 2 7 5 9.00003 7C11 5 15 2 18 1L17 0C12.9999 1.00006 9 4 9 4C9 4 4.99988 1.00005 1 0ZM1 7.00006L0 8.00006C2.99988 9.00006 7 12.0001 9.00003 14.0001C11 12.0001 15 9.00006 18 8.00006L17 7.00006C12.9999 8.00012 9 11.0001 9 11.0001C9 11.0001 4
デジタル庁のサイトやばすぎるwww - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
Qiitaのユーザー体験を良くするために新しい部署を立ち上げた話 - Qiita
この記事はQiita株式会社 Advent Calendar 2021の18日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！ 概要 5日目の記事であるQiitaの体験最大化を目指した組織体制の紹介でも触れているように、今のQiitaにはCX向上グループという部署があります。 設立から約4ヶ月、一体どんなことを何のために行っているのかを記載します。 伝えたいこと CX向上グループ設立の意図と実施していること Qiitaはこれまではユーザー体験を重視した運営があまりできていませんでした。 開発はもちろん、日頃のコミュニケーションもそうです。 売上や利益の追求はもちろん大切なのですが、あくまでQiitaでの体験があり、その結果として金銭の流れが発生するという順番です。 そのため、良い体験なくして良い成長は有り得ません。 Qiita社の経営判断としての
デザインの役割や価値（社内研修資料） - Qiita
この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ
見たいエンジニアの職務経歴書の書き方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前置き 某上場Web系の企業で中途社員のサーバーサイドエンジニアの書類選考や採用面接官などをしています。途中に転職もしましたが面接などの採用に関わり始めてから５年経ちました。 以前に面接についてはこちらの記事を書きました。 エンジニアを面接するときに面接官が本当に知りたいこと 書類選考もしていて、欲しい情報が足りない。本当の実力はもっとあるのでは？と思うこともあり、今回は採用側の立場から、もっと見たい職務経歴書の書き方について書こうと思います。 全てのパターンに当てはまることはなく、主にWeb系の中でもそれなりに大きな会社の中で見てきた
ChatGPT bot を Slack 上で動かすのはめちゃくちゃ盛り上がるのでおすすめ - Qiita
こんにちは、 Qiita株式会社のエンジニアの @tomoasleep です。 Qiita 株式会社では ChatGPT API を使った bot を Slack 上で動かしています。 同じような事例はいくつもあるのですが、Qiita社内でかれこれ 1ヶ月半以上稼働して、「多くのメンバーに ChatGPT をハードル低く提供する」「社内で活用法を考えたり、共有したりしやすい」「楽しい」ということで、 ChatGPT 活用を社内に浸透させるには Slack での bot が本当にめちゃくちゃ最高 なので、実例を交えて布教していきたいと思います。 Qiita での Slack bot の設定 (※ もっと導入しやすい例は、他にいくらでもあるのでここは参考程度に見てください) Qiita 社内では Slack bot として Ruboty を利用しているため、 ruboty-openai_cha
CSSの `rgba` はもう古い - Qiita
さっきMDNを読んでてびっくりしたんだけど、 rgba の記法はもう古い(legacy)らしい。 Note: The legacy rgba() syntax is an alias for rgb(), accepting the same parameters and behaving in the same way. rgb 記法でアルファも指定できるから、 rgba はもういらないよってことらしい。 さらに驚愕の事実。 rgb 記法であっても、カンマ区切りでパラメータを並べるスタイルは古いらしい...。 Legacy syntax: comma-separated values 例えば、 rgb(255, 0, 0, 0.5) ってやつね。これは古い。 イマドキのやり方は rgb(255 0 0 / 0.5) のようにスペース区切りにするらしい。 alphaの指定の前には / がい
TypeScriptファーストなバリデーションライブラリ Zodの始め方 - Qiita
はじめに ここ最近の業務では TypeScript を用いた webフォームの実装を担当させていただいています。 親愛なる上司が TypeScriptファーストなバリデーションライブラリの存在を教えてくださり、「プロダクトでどう使えるか考えてみるのも楽しいかも」とお題をくださったので、今回は手始めにZodの基本的な使い方について記事を書かせていただこうと思います。 Zod とは Zod GitHub: https://github.com/colinhacks/zod TypeScriptファーストなスキーマ宣言・バリデーションライブラリ。 ここでいうスキーマとはデータの型のことで、Zodではスキーマの宣言 → スキーマに沿っているか値を検証 というステップでバリデーションを行います。 公式にもある通り、「parse, don't validate」の思考に基づいた関数型プログラミングのア
ChatGPT使い方総まとめ - Qiita
こんにちは！sakasegawaです！ ( https://twitter.com/gyakuse ) 今日は今流行のChatGPTについて紹介します！ ChatGPTとは OpenAIが開発するGPT-3(※)というめちゃくちゃすごい言語モデルをベースとしたチャットアプリです。 色んな質問にすぐ答えてくれます。 この記事ではさまざまな使い方を紹介します。 https://chat.openai.com/ ちなみにGPT-3関連では、noteの以下記事も便利なのでぜひ読んでみてください AIがコミットメッセージ自動生成！神ツール『auto-commit』『commit-autosuggestions』の紹介 ※正確にはGPT-3.5シリーズと呼ばれています ChatGPTの仕組みを考えながらプロンプトを作る手法はこちらに別途まとめています 文章 質問-応答 〜について教えて Wikiped
だれかの進捗をうまく把握できないときのフレーズ集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ほとんどの人はだれかと恊働しています。マネージャーやリーダーであるなら、この割合はより大きくなります。 筆者は、仕事の重要な要素のひとつを「進捗を出すこと」と定義しています。そして進捗を出すには、進捗をただしく把握することも重要になってきます。 しかし「進捗を把握する」と言っても、想像以上に難しいと感じる場面が多々ありました。たとえば、 進捗はどうですか？ → 進行中です／〜をやっています なにか問題はありますか？ → とくにないです 〜までに終わりそうですか？ → たぶん大丈夫だと思います というようなやりとりは一般的なコミュニケーシ
なぜJestのmockライブラリに混乱してしまうのか？ - Qiita
はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
