はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

下で最新版に記事を編集しましたブログを作ったよ ツイッターアカウントフォローお願いします https://twitter.com/usagipycom こんな記事も書いてます 友達がpythonでPCゲームのレベル上げツールを作っていた それを聞いて、pythonって便利なのね。と思いその後色々あってプログラミングを勉強することにした プログラマー35歳までみたいな世の中で40代おそすぎ！ってあるかもしれない PCがあって、無料の教材はネットに転がってるし、本もたくさんあるし、挑戦するのは無料だし2022年の1月ぐらいから勉強を始めた 入門書って成果物がないからつまらないなと思ってそれ以外になんかないかなって本屋さんをふらふらしてたら python自動化 みたいな書籍がいっぱいあることに気がついた なるほど、もしかしたら仕事楽になるんじゃないかそんな思いから次の本を買った シゴトがはかどる

はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S

初めに この記事ではJavascriptのclassについてザックリですが解説します。 多くの初心者にとってclassは「何だこれ？？？」と躓くポイントだと思います。 （実際、自分も最初眺めた時は意味が分からず頭が学級崩壊してました。） なので、本記事ではサンプルコードと共に、 「何だこれ？？？」を「なるほど！！！」に 変えていけるように解説します。 序章 - 基本構文 まずはclassの基本構文を載せます。 使い方は後々に解説しますので、 とりあえず構文を眺めて美味しいご飯でも考えてください。 意味は深く考えないでいいと思います。 はいど～ん！ classの基本構文はこんな感じ！これだけ。 大丈夫です、内容も全く難しくないです。 解説すると、 ・NAMEは任意の名前（変数や関数の定義と一緒） ・constructorは必須な関数（classが呼び出された時に最初に実行される関数） ・a,

JavaScriptのimport文は、いままでHTMLで<script>タグを追加するなりしないと使えなかった外部のJavaScriptファイルを、JavaScriptファイル上で読み込むことができます。 注意点 注意点は以下 exportされたクラス・メソッドしかimportすることはできない import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する ローカル環境(file://なURL)では動作しない exportされたクラス・メソッドしかimportすることはできない インポートしたいJavaScriptのメソッドおよびクラスは、必ずexport句で「そのクラス・メソッドがエクスポート対象である」ということを明示する必要があります。 例えば以下のようにAクラスをインポートできるようにしたいときは…

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

なんとなくGitHubにアクセスしたところ、HTTPレスポンスヘッダに謎の文字列が含まれていることに気が付きました。 permissions-policy: interest-cohort=() はい、これはFLoCを拒否するという主張です。 FLoCのRFCがGitHub上に存在するという現実がとても味わい深いものがありますね。 Permissions-Policy: interest-cohort=() Header added to all pages sites 非常に簡単にですが、GitHubブログで触れられていました。 github.io以下の全てのページに、Permissions-Policy: interest-cohort=()のHTTPレスポンスヘッダが出力されるようになりました。 カスタムドメインを使っているサイトは、この影響を受けません。 GitHubはMicros

概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ

JavaScriptでIdentifier '<変数名>' has already been declared が発生するJavaScript 現象 シンプルなHTML+JavaScriptの構成にて以下のエラーが発生。 Uncaught SyntaxError: Identifier '<変数名>' has already been declared エラー内容的には、「変数がすでに宣言されているよ！」らしいが、2重で宣言してしまっているような個所は見当たらない。 しかもこのエラーは常に先頭行にある変数に対してのみ発生していて、 先頭行の変数を削除すると、その次にある変数で同じエラーが発生する。 原因 HTMLでJavaScriptファイルを2回読み込んでしまっていた。 <!-- 省略 --> </div> </div> <script src="script.js"></script>

はじめに こんにちは、普段は業務で求人系サービスの開発や社内向けツールの開発を行なっている@taku-0728です。 今回はJavaScriptの数値チェックについてまとめました。 調べると多くの記事がヒットしますが、true/falseを数値として扱ったりする記事を見つけたり色々なメソッドを見つけたりして混乱したので自分用メモとしてまとめます。 忙しい人向け 細かいことはいいから結論が知りたい忙しい人用に数値チェックについてまとめます。 値(val) isNaN(val) Number .isNaN(val) isFinite(val) Number .isFinite(val) Number .isInteger(val)

この記事はPWAアドベントカレンダーの5日目の記事です Webアプリにおけるプッシュ通知 PWAを代表する機能としてプッシュ通知があげられることがよくあると思います（iPhone/Safariだとまだ使えないんですがね） Webアプリにおけるプッシュ通知はPushAPIとNotificationAPIというの2つの仕組みからなっています NotificationAPIはユーザに対して通知を送ることができるAPIです 一連の流れ Webアプリにおけるプッシュ通知送信までの一連の流れは、PushAPIがサーバからの通知を受け取り、NotificationAPIを呼び出してユーザに通知を送ります それぞれの使い方を整理しようと思いましたが思いの外大変だったので今回はNotificationAPIを紹介します NotificationAPIの使い方 NotificationAPIはユーザに通知を送

JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、こちらの記事を見かけたので備忘録として記録する。 「スタイルルールの追加」の概念で制御する 厳密に言うと疑似要素はJSで直接制御できない。 疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。 ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。 JSで .class::before {width:100px} みたいな記述をドキュメントに追加してしまうという考え方になる。 スタイルルールの挿入 //ドキュメントスタイルの取得 var sheets = document.styleSheets var sheet = sheets[sheets.length - 1]; //スタイルルールの追加 sheet.insertRule( '.class:

状況・経緯 Node(express)を使用してAPIを作成。そのAPIを別で立てたローカルサーバーでアクセスしたら以下のようなエラーが出た。 Access to fetch at 'http://localhost:3000/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. http://127.0.0.1:8

ここのところちょっと時間に余裕があり、暇を見つけてはQiitaの質問に答えるという取り組みをやっています。以前StackOverflowでも同様の取り組みをちょっとだけしてたことがあります。 9日間で35個の質問に回答してみて、正直に思うのは「質問の質が悪すぎるなー」ということです。ただ、どう質が悪いのか上手く言語化できず悶々としていました。 そんな折、今朝googleのおススメ記事に飛び込んできたQuaraのこちらの回答を読んで、「これこれ！こういうことよ！」という気持ちになったため、これから質問する人に向けてこの内容を少し嚙み砕いてまとめてみます。 ベテランはどうデバッグをしてるのか （自分をベテランと言っていいのかはさておき）日頃からコードを書いていると、デバッグには、その時使っている言語やフレームワークによらず、ある程度の行動パターンがあることに気付いてきます。 デバッグには難しい

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco

はじめに 2年半前の私は、IT系の会社に勤めている30代後半の平凡なサラリーマンでした。 その時点では、社外での発表経験なし、社外での勉強会の参加経験なし、技術記事の投稿経験なしでした。 そんな私が発信活動を始めたことで人生が変わりました。 今は凄く楽しいエンジニアライフになり、以下のような事が起きました。 複数のITエンジニア向けコミュニティに所属して楽しく交流 「Serverless LT初心者向け」というコミュニティを立ち上げて運営 Developers Summit 2020 KANSAI でベストスピーカー賞1位を受賞 ITエンジニア向けの月刊誌「Software Design」で連載記事を執筆 すべては発信活動を始めた事がきっかけでした。 発信活動を始めると素敵な事がいっぱいあると知ってもらう事で、発信活動を始めるきっかけになれば幸いです。 (長いので要点を知りたい人は太字のみ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「document.write()は使わない方がいい」は、言われ続けて久しいと思いますが、じゃあどうすればいいか考えてみました。 document.write() は使わない方がいい理由 MDN document.write()説明ページにはどんなことが書かれているかというと、 deferred または asynchronous のスクリプト内では無視 →非同期の使い勝手が悪いですね Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない →そもそも期待通りに処理が動かない可能性がある など動作が特殊で、期待通り動かないことがあるということ強調されています。 さらにW3Cはdocument.writeのHTML5での使用を非推奨としていて、 HTMLパーサーに影響を与えるよーとか、実行しても無視される

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?