URLSearchParams という便利な機能が増えてた : (*x).b=z->a+y/c
調べてみると Chrome 49 からのようです 結構前ですね URL オブジェクトURL のオブジェクトに searchParams というプロパティが追加されていて クエリパラメータを簡単に扱えます const url = new URL("http://var.blog.jp/page1.html?query=1&qqq=aaa&foo=bar") const params = url.searchParams // URLSearchParams {} params.toString() // "query=1&qqq=aaa&foo=bar" params.append("xxxx", "yyy") params.delete("qqq") params.toString() // "query=1&foo=bar&xxxx=yyy" url.href // "http://va
CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法
CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
Dwitter - javascript demos in 140 characters
Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile) u(t) is called 60 times per second. t: Elapsed time in seconds. S: Shorthand for Math.sin. C: Shorthand for Math.cos. T: Shorthand for Math.tan. R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5) c: A 1920x1080 canvas. x: A 2D context for that canvas.
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
個人的に最高だった解説ページ集【JavaScript編】 - Qiita
数多くある解説記事の中で、個人的にすごくわかりやすかったものを一覧にしてみました。 執筆者の皆様には感謝と尊敬の気持ちでいっぱいです。。 コールバック関数 簡単なコードの例から順を追って、かみ砕いて解説してくださってます。 Promise 数多くあるPromise解説記事の中でも、説明が具体的で自分には一番しっくりきました。 async/await LGTM数3000超え（2022年2月時点）の大人気記事です。 aysncを単体で使った場合の例なども使用し順を追って解説してくださってます。 ※async/awaitの理解にはPromiseの知識が必要です。 イベントループ・コールスタック・タスクキュー 同期処理や非同期処理の実行が、どのような仕組み・ルールに基づき進められていくのかを 図を交えて非常に丁寧に説明してくださっています。 例外処理 例外処理の意味、throw new Error
Vivus.jsで絵描き風のSVGアニメーションをする | 株式会社 エヴォワークス -EVOWORX-
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
【JavaScript】addEventListenerで関数に引数をわたす｜MI
JavaScriptでイベントバインド（クリックしたらこの関数が動く、というプログラム）するときには、『addEventListener』をつかうことが多いと思います。 今回は、「addEventListnerで呼び出す関数に『引数』をわたしたい！」という場面で引っかかりました。ググってもパッとわかる解説記事がなかったので、備忘録も兼ねて書いておきます。 ・JavaScriptの基礎がわかる ・JavaScriptでアプリ開発をしたい という方にむけて書いていきます。なお、jQueryやReactなどのライブラリは使わず、ネイティブJavaScriptでの解説記事になります。 ふつう、addEventListenerをつかって引数をわたしたければ、次のようなコードを書きたくなりますよね。 <script> const userName = 'Ken'; const target = doc
TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった - 毎日へっぽこ
TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。 ついでに、 ?. で undefined または null な参照の場合に、エラーではなく undefined にしてくれる、RubyでいうところのNull条件演算子は、 Optional Chaining Operatorというらしい。 どちらもECMAScript2020で追加された構文で、主要ブラウザの最新版や、Node.js v14からはJavaScriptでも使えるようになっているのでメモ。 Nullish Coalescing Operator(Null結合演算子) Optional
【JavaScript】配列の比較を行う方法【equals相当／Array型の等価判定】
JavaScriptの配列型にはequalsメソッドが存在しません。また比較演算子による比較は、等価の判定に対応していません。 [1, 2] == [1, 2] // false [1, 2].equals([1, 2]) // Uncaught TypeError: [1,2].equals is not a function at <anonymous>:1:8 配列同士の比較を行うためには、各要素を個別に比較したり、配列を文字列化した結果を比較することなどが有効です。 目次 繰り返し文による要素比較（確実な方法） JSON文字列による比較（簡潔な方法。比較的厳格な比較） toStringによる文字列比較（簡易な方法。若干抽象的で曖昧な比較） 繰り返し文による要素比較 for文で個別に要素を比較するのがもっとも確実です。比較の際には!==演算子による厳格な比較が必要となります。!=によ
PdMがプログラミングを学び、Nuxt.js/firebase/VuetifyでWebサービスを公開するまでにお世話になった記事32選 - Qiita
PdMがプログラミングを学び、Nuxt.js/firebase/VuetifyでWebサービスを公開するまでにお世話になった記事32選JavaScriptVue.jsFirebasepugNuxt はじめまして、ゆと(@utoc11)と申します。初Qiitaなので、まずは簡単なリンク集を投稿してみます。 普段はPdM（プロダクトマネージャー）が本業なのですが、 創れるようになりたい！ エンジニアの方ともっと深いコミュニケーションをとりたい そんな気持ちからぼくは昨年夏からのらりくらりプログラミングを始めたのですが、 少しずつ色々なものへ手を出す良くない学び方をしてきました。 簡潔に言うと、「どれもなんとなくわかるけど結局書けない…」そんな状況です。 （PMとしては良いのかもですが・・・） そんなぼくですが、ひょんなことからNuxt、firebaseに出会い強烈に興味を持ち、 「これで1つサ
Nuxt.jsを使ってTodoリストを作ってみる
Vue.js(ヴュー ジェイエス)はWebページのUI(ユーザーインタフェイス)作成にフォーカスしたJavaScriptフレームワークです。直感的に開発でき、導入や習熟のしやすさ、日本語ドキュメントが充実していることが特徴です。 Vue.js公式サイト Nuxt.js(ナクスト ジェイエス)は、Vue.jsベースのJavaScriptのフレームワークで、UIに特化しているVue.jsに加えて、Webページ構築に有用なUI以外の機能（Ajaxやサーバーサイドレンダリングなど）などををまとめて利用できる環境を提供してくれます。 Nuxt.js公式サイト Todoリストを作ることによって、Vue.jsのデータバインディング※1※1データバインディングとは、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことをさす。の仕組みや、Nuxt
[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita
概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記 記述内容を現状に合わせて見直しました。 本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの
![[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f522a3ea0ba23b18b3ad160f6aed4b35129845f/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1RCUyMCVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFNiU4RSVCNCVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5RCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJkOWM2OGZlMmFkMGUwZDdlMWZkMGUxYzhkYTIwYTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoZWRyYWxsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zM2Y4NGRiMGU3MTE4NDM2ZGQxMjAzYWNiMzE4YjYwMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D06cc8cacedc55bd2a4cb98196e7be23c)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making a lil' me - Part 2.
https://codepen.io/ycw/pen/ExoKaNO
https://codepen.io/hexagoncircle/pen/RwLQLop
tsParticles - Make it rain 💵!! - Dollars confetti
Javascriptのオブジェクトのメンバ数を取るときにlengthプロパティが使えない。 - Qiita
連番の数字の配列を作成（es2015 ver) - Qiita
