【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
[小ネタ] SQLの GROUP BY / ORDER BY には数字 (1, 2...) を指定しよう - Qiita
-------------------------------------------------------- -- users テーブルについて、部署・役職・作成日ごとに件数を集計する -- (MySQL用) -------------------------------------------------------- SELECT u.department_code `部署コード`, u.role_code `役職コード`, DATE_FORMAT(u.created_at, '%Y-%m-%d') `作成日`, COUNT(*) `人数` FROM users u GROUP BY u.department_code, u.role_code, DATE_FORMAT(u.created_at, '%Y-%m-%d') ORDER BY u.department_code ASC
![[小ネタ] SQLの GROUP BY / ORDER BY には数字 (1, 2...) を指定しよう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/53a56ab3a66d4cb6943237e1b6a716a6fd2fbca3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JUIwJThGJUUzJTgzJThEJUUzJTgyJUJGJTVEJTIwU1FMJUUzJTgxJUFFJTIwR1JPVVAlMjBCWSUyMCUyRiUyME9SREVSJTIwQlklMjAlRTMlODElQUIlRTMlODElQUYlRTYlOTUlQjAlRTUlQUQlOTclMjAlMjgxJTJDJTIwMi4uLiUyOSUyMCVFMyU4MiU5MiVFNiU4QyU4NyVFNSVBRSU5QSVFMyU4MSU5NyVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZGE0YTMxMTZmMmIxMDM0NDk0YjcxOTAyZTRmYmQ3NmY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzc2Mta3NhaXRvdSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODc1YWI0ZmU0Y2UxYzZjMmQ3ZTExMTdkNDJkYTBhODE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gU1NDIFImRA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Db1d9e6c06055f91050fb82ce614c92b6)
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
【Oracle】UPDATE,INSERT,DELETE文の高速化 - Qiita
【Oracle】UPDATE,INSERT,DELETE文の高速化 この記事でわかる・できること OracleでUPDATE,INSERT,DELETE文を高速化する方法 この記事の対象者 OracleでSQLを書く人全般 動作環境・使用するツールや言語 Windows 10 Pro 22H2 Oracle 12cR2 Enterprise Edition はじめに UPDATE,DELETE,およびINSERT INTO 【テーブル名】 SELECT ～では操作対象のレコードを特定してから更新を行います。 操作対象のレコードを特定するところは基本的に前回のSELECT文と変わらないのでそちらを参照してください。 共通 ループ処理をできるだけ避ける よくあるのが複数レコードを更新するために「Oracleへの接続・SQLで１レコード更新・切断」の一連の処理をループで繰り返し実行しているケース
「誰にもできる」より良いコードを書くためのテクニック - Qiita
はじめに こんにちは、愛知でWEBエンジニアをしているkokuboと申します。 ここ最近の業務でコードレビューをすることが多くなり、人によって読みやすさの違いがあることや過去に自分で書いたコードが読みにくかったことから、良いコードとは何かを調べて見ました。 今回は「リーダブルコード」を元に良いコードとは何かを簡単紹介させていただきます。 この記事では難しい技術がいらないため、初心者や私と同じようにレビューを始めた方達の参考になれば幸いです。 概要 【この本での「良いコード」とは】 他の人(過去の自分も含む)が最短時間で理解ができるコードのこと 【メリット】 理解しやすい コードを読んだだけで、そのコードが何をしようとしているのかがすぐに理解できる メンテナンスしやすい バグの修正や機能の追加など、コードを変更する際に、その意図を把握しやすくなる チームで開発しやすい 複数の開発者が同じコー
C++/Java系言語で1文字だけでコメントアウトするブロックを切り替える - Qiita
概要 プログラミングをしていると実装の方式を試してみることがあると思います。あるいは、別の実装でうまくいくか自信のない時、今あるものはコメントアウトしておいて別の実装を試してみたり。そんな場合、今時はエディターの機能で簡単にブロックをコメントアウトしたりできますが、言語仕様をうまく使って一文字編集するだけでコードブロックをコメントアウトする小技を大昔に思いついていて今でも使うことがあるので紹介します。実装中の試行錯誤の時には便利です。 この技はC++/Java/Javascript系の、ブロックコメント/* ... */とインラインコメント//がサポートされている言語で利用できます。 ブロックを/の削除でコメントアウトする 以下のように書いておくと、一番最初の/を削除すると最初の行がインラインコメントからブロックコメントに切り替わり、ブロック全体がコメントアウトされます。 先頭行が//で始
ひよっこのひよっこによるひよっこのための SQL TIPS - Qiita
はじめに 最近 SQL を触り始めた初心者が、TOPSIC SQL CONTEST を通して学んだちょっとしたテクニックを掘り下げてシェアしたいと思います。タイトルはふざけてますが、内容はいたって真面目です。 本記事は、初心者向けですが、ORDER BY, GROUP BY, CASE, JOIN, UNIONなどをすでに知っている前提で進めています。 目次 任意の文字列の並び替え 再帰構造 縦持ちと横持ち 行間比較 任意の文字列の並び替え これは、会社の偉い人順に並び替えたいときなどに使えるテクニックで、「文字列ごとに数値を割り当て、その数値を並び替える」 という発想で実装します。具体的な実装方法のうち、最も簡単なのはORDER BY句にCASE式を組み込むことです。次の単純なテーブルを想定してください。（COMPANY テーブルとでも命名しておきます） KIND DESCRIPTION
【TypeScript】超実践的テクニック集【Reactなし】 - Qiita
はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript（Reactなし）のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック（tipsレベルですが）をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
【React】setCount(count + 1)みたいな書き方が良くないよーってお話 - Qiita
import { useState } from 'react' import './App.css' function App() { const [count,setCount] = useState(0) const handleClick = () => { setCount(count + 1) setCount(count + 1) } return ( <> <h1>useState</h1> <button onClick={handleClick}>count is {count}</button> </> ) } export default App 実際に環境構築したい方は下の記事参考に作ってください 上記のコードぱっと見countボタンを押せば count が 2ずつ増えるように思えるかもしれません。 しかし実際の挙動は以下のようになります。 countが1ずつしか
[C#] もはや我々はnew ArgumentNullException(...)する必要はない - Qiita
null許容参照型が導入された現在でも、引数のnullチェックに事欠かくことのない皆様、いかがお過ごしでしょうか。 今日もnew ArgumentNullException(...)していますか。 しかし、もうこんなことをする必要はないんです。 .NET6以降の世界には ArgumentNullException.ThrowIfNull(object? argument, string? paramName = default) が存在します。 これによって我々は、 public void AMethod(string str) { if (str is null) throw new ArgumentNullException(nameof(str)); ... }
![[C#] もはや我々はnew ArgumentNullException(...)する必要はない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d0d1c6cc88b971c98b361e6ad2b4a1791944ff89/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQyUyMyU1RCUyMCVFMyU4MiU4MiVFMyU4MSVBRiVFMyU4MiU4NCVFNiU4OCU5MSVFMyU4MCU4NSVFMyU4MSVBRm5ldyUyMEFyZ3VtZW50TnVsbEV4Y2VwdGlvbiUyOC4uLiUyOSVFMyU4MSU5OSVFMyU4MiU4QiVFNSVCRiU4NSVFOCVBNiU4MSVFMyU4MSVBRiVFMyU4MSVBQSVFMyU4MSU4NCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MWIwMDgxZDZjYWE4Mzg5NDMzMzMzYTNmMGMyYjc0MTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBsYXVnaHRlciZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Mzk1OWM4OTlhMzBkOGFiZmM0MTk2YjQ1NGY5MzM4YzA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D44ceeb20fa0901600b68b7ba47e4f6ca)
ListBoxで、行をドラッグアンドドロップで並び替えられるようにした - Qiita
はじめに 一覧機能になってるやつでよくありますよね。 ドラッグアンドドロップで並び替える機能。 あれを実際に実装してみたよーっていう話です。 タイトルに毎回.NET FrameworkのC#の...って書いてたけど邪魔かなーと思って削ってみました。 タグに書いてあるし！ これをまとめてうまいこと伝えることができるワードがあるのであれば、教えてください。 前提条件 下記のような構造になっている想定です。 ListBox (name = "ColumnBox" ここはご自由にどうぞ！) └ ListBoxItem └ お好みの要素 実装 ドラッグアンドドロップでの実装は結構いろいろなサイトで紹介されていたので、そのあたりの情報を拾ったり自分なりに解釈して組んでみました。 今回の動きを実装するのにあたって用意した関数は5つあるのですが、それぞれ分けて軽く説明しておこうと思います。 (間違ってると
プログラミングが劇的に早くなる５つの方法！ - Qiita
そろそろ、「入社してからずっとリモートワークで、他の人がプログラミングする様子を見たことがない！」という方も多いのではないでしょうか？私がプログラミングを始めたばかりのころは、他の人がコードを書いているのを後ろから見て、「あぁ、そうやってやるのか」と自然に覚えたことも沢山あったので、今からプログラミングを始める人は、もしかしたらそういう機会が少ないのではないか？とちょっと心配しています。 また、プログラミングが上達してくると、後輩から「それどうやってるんですか？早くて全然何やってるか？わかりません」と言われて、コードの書き方やIDEの使い方を教えたりという機会がありました。そういう機会も最近は少ないような気がします。こんな状況であっても先輩として、後輩にさっと覚えておいてほしいことを伝えられるようにと、今回 Visual Studio の便利な使い方の中で、特にプログラミングが劇的に早くな
【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
【GAS (Google Apps Script) 】コードの書き方・テクニック編｜Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は、GAS（Google Apps Script）のコードの書き方と、ゴリゴリに GAS を書きまくってきた知見から少しのテクニックを紹介できればと思います。 今の時代、エンジニアリングを利用した業務自動化を実装するのは必ずしもエンジニアだけではないと思っています。ちょっとしたデイリー業務, 対応漏れ確認 など、サクッと自分の業務のサポートをしてくれる相方を、職種問わずに自分自身で実装ができる世界になっています。その大きな協力者になるのが今回ご紹介する GAS（Google Apps Script）となります。 GAS（Google Apps Script） とは？ GAS（Google Apps Script） とは、Google が開発した JavaScript 記
書評『良いコード／悪いコードで学ぶ設計入門』 - uhyo/blog
皆さんこんにちは。今回は、2022年4月30発売の『良いコード／悪いコードで学ぶ設計入門』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『良いコード／悪いコードで学ぶ設計入門』を書いた人のことは「著者」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者はフロントエンドエンジニアで、TypeScriptとReactを専門としています。業務では何だかんだで設計の番
JavaScriptのコードには、こんな書き方もある
この記事はコードの書き方について、書き方そのものを推奨するものではなく、このような書き方も出来るという紹介です。コメント欄まで一緒にみていただくと学びになります。 ※記事はいただいたコメントを反映しましたので、当時のコメントと記事の内容に差分があります 1.破壊的メソッドを避ける 破壊的メソッドとは、元の配列の要素を変えるメソッドです。以下の例ではconstで宣言した変数numbersが、pushメソッドにより更新されています。 対応前 const numbers = [1, 2, 3] numbers.push(4) console.log(numbers) // [1, 2, 3, 4] この場合、元の配列の要素を更新するのではなく、スプレッド構文を使って新しい変数に代入します。変数はなるべくイミュータブルにしておくと、意図しない不具合やプログラムの可読性や保守性が向上します。push
『良いコード／悪いコードで学ぶ設計入門』を読んで気になったことのメモ
はじめに 話題となっている『良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方』 (出版社のページ) を読みました。 全体的には「うんうん、そうだよね」と同意できることが多かったです。 もちろん、初めて目にするような考え方, アイディア, テクニックもありました。 一方、気になったことやちょっと引っかかったこともありましたので、メモしておきます。 あくまでもメモなので結論のようなことはありません。 p.55: HitPoint.isZero HitPoint クラスに isZero メソッドがあります。 「ヒットポイントがゼロであれば true」という仕様で、実装は次のようになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたがまだ知らないReactのテクニック10選 - Qiita
Excelのシートが多すぎて見たい表を探せない！ 1クリックで移動できる目次シートの簡単な作成方法【残業を減らす！Officeテクニック】
Webページ上にある複数のリンクをコピーしてURLを一気にExcelへ取り込むワザ【残業を減らす！Officeテクニック】
