moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
Bootstrap5のPopoversが微妙なので少し頑張った - rochefort's blog
Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/ を使おうとしていたのですが、期待する動作にならずに少し困っていました。 具体的には data-bs-trigger というオプションが用意されていて、 click、hover、foucs 時にpopoverが発動するようになっています。 やりたいこと リンクのhoverとclick時にpopoverを表示 popoverに表示された内容をコピペできる popover以外をクリックするとpopoverを非表示にする 上記なのですが、デフォルトのoptionでは対応できないようでした。 問題点 hoverは欲しいので、これは入れる前提で、他のoptionを組み合わせてみると、以下の問題が発生していました。 data-
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど 回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答者も1.3％でした。 一方、言語別では英語が70.1％と他を圧倒しており、2位がスペイン語で5.4％、ロシア語が5％、フランス語が3.3％、ドイツ語が2.3％、中国語、ポルトガル語、そして日本語が1％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWeb Audio API、WebGLなど新しいブラウザAPIがどのくらい使われているかや
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
最新のWeb技術でIoTをする - Qiita
この記事の内容はJSConf JPで話した内容です. 資料全体はこちらにあります。 アジェンダ IoTのはじめかた とりあえずIoTをやりたい人へ IoTとはインターネットとThingsがつながることです。 ざっくりと書くとこんな構成ですね。 この右側のアイコンは皆さんよく知ってるサービスだったりシステムだったりするのではないでしょうか。 メールもslackもよく使いますよね。 逆に左側のセンサ／アクチュエーターはほとんど知らないのではないでしょうか。 直線距離を図る距離センサや、人の有無がわかる人感センサ、物を動かすことができるモーターなどがあります。 IoTをやろう！(というか何かしらハードウェアを作って物理世界に関わろう)とすると、ここのThingsの知識がなくてなかなか難しいことが多いと思います でもじつはとっても身近なThingsがあります というわけで、JavaScriptでI
2019年、2020年のJavaScript - 別にしんどくないブログ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
JavaScript dayjsはMoment.jsの代替になるか? | nansystem
JavaScriptの日付操作には罠が多く、業務では日付操作を簡単かつ安全に操作するライブラリが使われる。日付操作のライブラリの中でもMoment.js (opens new window)(Star数40,601)はよく知られているが、ファイルサイズが大きくパフォーマンス改善の妨げになることがある。 そこでこの記事ではより軽量でMoment.jsの代替となるdayjs (opens new window)(Star数19,872)を紹介する。 # dayjsとは dayjsとは、日付操作を簡単にするJavaScriptのライブラリだ。Moment.jsのAPIと広く互換があり、gzip圧縮されたサイズは2.71KBと軽量なのが特徴だ。 # インストール dayjsが十分Moment.jsの代わりになり得るのか確認していく。 まずはインストールして、業務で使われる日付操作をみていく。
JavaScriptフレームワーク比較！
2017年10月24日にカサレアルにて開催したフリーセミナー用の発表資料です。 以下、告知時の文章です。 ハイブリッドアプリ開発最前線 -使いやすいJavaScriptフレームワークを見極めよう- Monaca、Onsen UIのアシアル株式会社様との共催セミナーです。 定員に達しましたので、本セミナーのお申し込みを締め切りました。 たくさんのお申し込みをいただき、ありがとうございました！ スマートデバイスの普及に伴い、ビジネスにおいて モバイルアプリ開発は避けては通れないようになりました。 しかし、様々なデバイスにあわせて、アプリ開発を行う体力はない・・・ というお客様の声をよく耳にします。 そこで、iOS、Android向けのアプリがワンソースで開発できる HTML5ハイブリッドアプリ開発への注目が高まっております。 今回のセミナーでは前半に、HTML5でモバイルアプリを開発するための
HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？ - かもメモ
WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new page can access your window object via window.opener. Thankfully the origin security model of the web prevents it reading your page, but no-thankfully some legacy APIs mean it
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
Chromeなどのモダンブラウザであれば、デベロッパーツールがあってJavaScriptのデバッグなどもそこで容易にできる。例えば、なんかのボタンにJavaScriptでクリックイベントを設定している場合、なにが設定されているかの確認もサクッとできる。 デベロッパーツールで、イベントの中身を確認 <div id="click1">click1</div> <script> var click1 = document.getElementById('click1'); click1.addEventListener('click', function() { console.log('click1'); }); </script> Command + Option + i のショートカットで起動 調べたい要素を選択し、右側のパネル「Event Listeners」を選択する 右端のフィルタっ
[JavaScript] 僕がasync/awaitを好きなワケ | DevelopersIO
はじめに おばんです、iOSDCの賞品であるtv 4kがちょうど手元に届いた田中です。しっかり開発して遊ぼうと思います。(オススメの4kディスプレイ情報お待ちしています) さて、非同期処理周りのコードを簡潔に書きたいという気持ちから、業界的にPromiseが親しまれて久しい今日この頃。みなさまasync/awaitの方は使っておりますでしょうか。僕はちょうど最近触る機会があったので、今回はasync/awaitを使うと何が良いのか、これまであったPromiseと比較しながら紹介していこうと思います。 ネストが浅くなる 以下のコードを見比べてください。非同期処理ではなく、単純なサンプルですがPromiseの方はPromiseオブジェクトを生成してその中でresolveとrejectを返す必要があるため、一段ネストが深くなっています。async/awaitではそうなっていません。 ネストが浅
![[JavaScript] 僕がasync/awaitを好きなワケ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c530ac8058349624341e83c42577b3ded88f3e6/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fnodejs.png)
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
速習ECMAScript6 良いです - rochefort's blog
速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！ 作者: 山田祥寛出版社/メーカー: WINGSプロジェクト発売日: 2015/08/28メディア: Kindle版この商品を含むブログを見る 1年前に購入して放置してしまっていました。 実例と使い所を整理して記載してくれています。 blogやQiitaなどにもES6/2015の記事はありますが、こちらは1冊にまとまってまとめて読めるのが良いです。 とりあえずこれ一冊読んでおけば良いという印象。 ある程度知識はあるので、移動時間の1時間ほどで読めました。 お値段も 250円とお安いです。 以下、個人的に気になったことなど（主な内容などには触れていないです）。 const を誤解していた 基本constで変更するものはletみたいなノリで書いていましたが constは、正しくは「再代入できない」であって、「変更で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dribbbleのようなモーダル兼詳細ページをRailsで作る（後半）
GitHub - ankane/chartkick: Create beautiful JavaScript charts with one line of Ruby
