GitHub - localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
IndexedDBとWebStorage(localStorageとsessionStorage)のざっくりまとめ - Qiita
IndexedDB、WebStorageとはざっくりと IndexedDB 最近の技術。より大きな容量を扱える。 localStorage (Web Storage) 永続的に使えるストレージ。 5MBぐらい(ブラウザによる)。 sessionStorage (Web Storage) セッションが有効な限り使えるストレージ。 5MBぐらい(ブラウザによる)。 クッキー (Web Storage) 毎回通信を行うためセキュリティ的に微妙らしい。 4KBぐらい。 Web Storageについては以下が分かりやすいかと思います。localStorageとsessionStorageのサンプルコードも載っています。 Web Storage－HTML5のAPI、および、関連仕様 IndexedDBとLocal Storageの違い IndexedDBを使うモチベーションは以下。 大容量 searc
Web Componentsとは何か？ - Qiita
翻訳ドキュメントの管理ページ この記事は、WebComponents.orgのIntroductionの翻訳です。 Web Componentsとは何か？ Web componentsは、WebページやWebアプリケーションの中で新たに、再利用可能でカプセル化された独自のHTMLタグを作成するためのWebプラットフォームのAPIです。独自に作成したコンポーネントやウィジェットは、Web componentsの標準をベースに構築されているので、あらゆるモダンブラウザ上で動作するでしょう。また、HTMLと連動して動作するどんなJavascriptライブラリやフレームワークとも併用できます。 Web componentsは、既存のWeb標準をベースにしています。 Web componentsのサポート機能は現在HTMLやDOMの仕様に追加されており、Web開発者はカプセル化されたスタイリングとカ
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
ウェブコンポーネント
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English = ��Always switch to English 概念と使用法 開発者ならご存知でしょうが、可能な限りコードを再利用することは良い考えです。しかしこれは、以前から、カスタムのマークアップ構造にとって、それほど簡単なことではありませんでした。複雑な HTML （と一連のスタイルやスクリプト）を考えてみて下さい。ときに、カスタム UI の制御をレンダリングするために、コードを書かなければなりません。それに、注意していないと、それらの制御をどう使い回すかで、ページが複雑なものになってしまいます。 ウェブコンポーネントは、上記の問題の解決を目指しています。 ウェブコンポーネントは、3 つの主要な技術からなり、そ
Introducing "Lit" for Web Components
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
Lit
Skip the boilerplate Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind. Tiny footprint, instant updates Weighing in at around 5 KB (minified and compr
JavaScriptで`undefined`の代わりに、`void 0`を使ったほうがいい理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今まで平気でundefinedを使ってましたが、underscore.jsのソース読んで、無防備にundefinedを使っちゃいけないなってことを初めて知りました。いやはや、まったくもって面目ない！ 知っている方なら知っていると思いますが、意外と知らない方も多いのでは？という意味でのプチ記事です。 void 演算子 voidは１つの式を取って、常にundefinedを返す演算子です。 例えば void 0 void (0) void 99 void "wow" void {} //すべてundefinedが帰ってくる と、このように、voidはundefinedの代わりとして使えるのが分かりますよね。 上記の理屈で行くと、そんな面倒なことをするまでもなく、undefinedを直接使えば済む話じゃあ？と思いますよね。ところが話はそう簡単ではないようです。 何故なら、なんと、undefined
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
これらを踏まえて polyfill-library を使って Polyfill の出し分けをすることが最適解だと確信しました。 Polyfill の出し分けの実装方法 最初に実装したコードの全体像を見せると次の通りになります。それぞれの変数や関数についての説明は後ほどおこないます。 import crypto from "crypto"; import { Response, Request } from "express"; import { getPolyfillString } from "polyfill-library"; import polyfillLibraryPackageJson from "polyfill-library/package.json"; const FEATURES_OPTION = { flags: ["gated"] }; const FEATUR
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
localStorageで複数のデータを保存する ｜ Tips Note by TAM
localStorageにデータを保存する場合、1つのキー（key）に対して1つのデータしか保存できませんが、 複数のデータを保存・取得したいときの方法をまとめておきます。 localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、 データは、キー（key）と値（value）の組み合わせで保存されます。 ●保存方法 localStorageにデータを保存するには、setItem()メソッドを使います。 localStorage.setItem(key, value); //keyとvalueをペアにしてデータを保存 ●取得方法 localStorageからデータを取得するには、getItem()メソッドを使います。 localStorage.getItem(key); //keyに対応するvalueを取得 ●複数データの保存 localStorageに
web ストレージとは【LocalStorage/SessionStorageの使い方・注意点】 | MegumuBlog
ストレージの種類 ストレージには大きく分けて２種類ある。 Local Storage（ローカルストレージ） ブラウザを閉じてもデータを維持。 破棄にはJSでデータのクリアまたは、ブラウザキャシュ/ローカルのクリアが必要 Session Storage（セッションストレージ） ブラウザ（または、タブ）を閉じるとデータは破棄される。 ※一見するとLocal Storageのほうが良さそうに見るが注意点がある。 Local Storageは明示的にデータを消さない限りは、ストレージにデータが残るので、 思わぬバグを引き起こす可能性がある。 使用中のブラウザでweb storageが使えるかの確認 web storageは、すべてのブラウザで使用できるわけではございません。 こちらのページを参考にお使いのブラウザで使用できるか確認しましょう。 ストレージにデータを保存する／取得する ストレージを使
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
[ES6] const で export default ができない理由 | オクワス - AI時代のWeb戦略パートナー
こんにちは。早速であれなんですが、 constでexport defaultできないですよね！？なんで！？ って話したいと思います。 const で export default できなかった。。 ReactとかES6系 […]
![[ES6] const で export default ができない理由 | オクワス - AI時代のWeb戦略パートナー](https://cdn-ak-scissors.b.st-hatena.com/image/square/68eb81932e32dcae5f43dcf5a118940472d92cca/height=288;version=1;width=512/https%3A%2F%2Focws.jp%2Fblog-images%2F201902_mv_es6_export_default_const.png)
axios、async/awaitを使ったHTTPリクエスト(Web APIを実行) - Qiita
const axios = require('axios'); const url = "https://qiita.com/api/v2/items"; axios.get(url).then(res => { const items = res.data; for (const item of items) { console.log(`${item.user.id}: \t${item.title}`); } }).catch(error => { const { status, statusText } = error.response; console.log(`Error! HTTP Status: ${status} ${statusText}`); }); hp_kj: postgres 公式サイト データベースサンプル dvdrental jhfgjfgjhghj: JP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
7.8.0 Released: ECMAScript 2020, .mjs configuration files and @babel/cli improvements · Babel
ヌル値合体演算子 (??) - JavaScript | MDN
JavaScript: 関数の引数 - 可変長, キーワード引数 | Netsphere Laboratories
Explore DOM Events
プラグインのスクリプトファイルとかでよく見る「 .min 」の付いたminify化されたファイルについて盛大に誤解してた件 | WEMO