JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識 - Qiita
preventDefault()って難しくないですか？ 何かを妨害しているということはわかるのですが、何を妨害しているのか、 どういうときに指定するべきなのかといった部分が自分の中で曖昧で、 最近「なんなんだ、e.preventDefault()って」と思うことがありました。 いろいろ勉強した後で「preventDefaultがよくわからなかったのは、この前提知識がなかったからだ」 ということに気づいたため、その知識を自分用に備忘録として書きました。 preventDefault()の使い方がわからなかったり、 「なんかpreventDefaultが効いてない気がする」 といったことに悩んでいる人は読んでみてください。 知識①イベント DOM内の各要素では、頻繁に「イベント」が発生しています。 有名な例では、aタグでclickイベントが発生していたり、formでkeydownイベントが発生
AWS SDK for JavaScriptのAPIバージョンをロックする | DevelopersIO
こんにちは、CX事業本部の若槻です。 AWS SDK for JavaScriptでは、AWSサービスごとにAPIのバージョンが管理されています。既定ではSDKは最新のAPIバージョンを使用するため、AWS SDKを使用するシステムがAPI側の変更による影響を受けないようにAPIバージョンをロックすることが推奨されています。 今回は、実際にAWS SDK for JavaScriptのAPIバージョンをロックしてみました。 やってみる 環境 % node -v v12.14.0 % npm -v 6.13.4 % npm list --depth=0 ├── @types/node@14.6.4 ├── aws-sdk@2.747.0 └── typescript@4.0.2 使用可能なAPIバージョンの確認 まず、AWSサービスごとに使用可能なAPIバージョンの確認は次のページから可能で
初心者がmongoose公式チュートリアルを勉強するメモ - Qiita
mongoose クイックスタート 今回のお題はこちらです。 https://mongoosejs.com/docs/index.html 対象は、dotinstallさんで、mongoDBを学んだ方が主な対象です。 mongooseは、node.js上でmongoDBを扱うためのライブラリーです。 本家のチュートリアルを学ぶのが一番情報的に正確と思いますのでこちらを使って行きたいと思います。 本家は英語ですが、google先生の翻訳で十分わかります。 mongoDB の説明はしません。 mongoDBをmongo shellで使えるようになった後実際使う場合に、javascriptで扱えれば応用できそうです。 node.js環境で扱うには、mongoDB公式とmongooseのドライバーを使うことになるみたいです。 今回は、一般的にmongooseドライバーを使う人が多いとのことで、mo
JavaScriptからletを絶滅させ、constのみにするためのレシピ集 - Qiita
はじめに 本記事では、constこそが唯一神であることを証明したあと、letを使いがちな場面でいかにしてconstを使うかをまとめていきます。なお、ES2018までの基本構文(reduce, async/await, 配列とオブジェクトのスプレッド構文)を使用します。「いや、reduceとかスプレッド構文とか難しいからlet使うわ」という方のために、便利メソッド詰め合わせであるLodashを使った例もご紹介します。もちろん、Lodashは機能に対してサイズが大きいライブラリであるため、フロントエンド開発でバンドルサイズを軽減したいという方などはLodashの例は無視し、Lodashを使っていない方の例をご参照いただければと思います。 追記：Lodashの使用について 注意事項 この記事は半分ネタで半分本気です。実際の開発でどこまでconst教を導入するかは、他のメンバーと慎重に相談してくだ
JavaScript Primer - 迷わないための入門書
非同期処理:Promise/Async Function この章ではJavaScriptの非同期処理について学んでいきます。 非同期処理はJavaScriptにおけるとても重要な概念です。 また、ブラウザやNode.jsなどのAPIには非同期処理でしか扱えないものもあるため、非同期処理を避けることはできません。 JavaScriptには非同期処理を扱うためのPromiseというビルトインオブジェクト、さらにはAsync Functionと呼ばれる構文的なサポートがあります。 この章では非同期処理とはどのようなものかという話から、非同期処理での例外処理、非同期処理の扱い方を見ていきます。 同期処理 多くのプログラミング言語にはコードの評価の仕方として、同期処理（sync）と非同期処理（async）という大きな分類があります。 今まで書いていたコードは同期処理と呼ばれているものです。 同期処理
[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/021b8a60d04d25b9753f3c6560c17b0e6fca35f4/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fnodejs.png)
[JavaScript] sleep(setTimeout) を Promise化する | DevelopersIO
はじめに おばんです、ダイエットが捗らない田中です。 さて、今回は sleep と Promise についてちょっとしたTipsをまとめます。 sleep は非同期処理を擬似的に作り出す時などに有用で、 Promise で扱いたいシーンがたまにあるので紹介します。 setTimeout JavaScriptには処理を一時停止させる sleep 関数が存在しません。処理を一時停止させたり、待ちを発生させたい場合は setTimeout 関数を利用して実現する方法があります。 const printHoge = () => { console.log('Hoge') } setTimeout(printHoge, 5000) // Hoge <- 5秒後にコンソールに出力される sleep(setTimeout) を Promise化する 連続した非同期処理を書くときによく使う言語機能として
[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita
JavaScript (Node.js) で開発する上で避けては通れない 非同期処理、コールバックについて考えてみたい。 自分なりのお勧めの方式を書いてみた。 いろいろなものを試した結果である。 ※この記事でのお勧めの方法は ES2015 (ES6) で実装された generators (yield) の技術を使用しています。 実はまだ Babel(6to5) 等を利用するか Node.js v4～v8 でしか 実質的に使用できない技術だと思います。悪しからず。 (早く全てのブラウザに広く普及する事を祈っています) まだブラウザでは独自ライブラリか Promise (Deferred) 等を使っています。 ※2015/10/15: 記事の内容を npm aa (async-await) に対応させました。 ※2015/04/19: 記事の内容を npm co@4 に対応させました。 ※20
![[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a803e8505728ff9ee711205b7f393a12e77e316/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTQ1NGFmYTMzM2M1OGUyNzIyODE3MzdlOWEyZDU5ZDI2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D75ee0660ad3d9992404870ab81c70067%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU5RCU5RSVFNSU5MCU4QyVFNiU5QyU5RiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRSVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVBRiVFNSU5QyVCMCVFNyU4RCU4NCVFMyU4MSU4QiVFMyU4MiU4OSVFNiU4QSU5QyVFMyU4MSU5MSVFNSU4NyVCQSVFMyU4MSU5OSVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWFiZDU2Y2UwNGVkYmQ2MjUxOTk5NjAzMDkzNmIzOWI0%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWNmMmVjNWYxZmFhYjBlOWY0ODA5MzQ5MTc5YjJiYTc0%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D9651ae018205c38dfe8d75d2d0612e06)
JavaScriptでbaseを指定して相対URLを絶対URLに変換する - 葉っぱ日記
メモがわり。 baseとなるURLを指定して相対URLを絶対URLに変換するには、ChromeやFireofxではURLUtilsを用いて以下のように書くことで簡単に実現できる。 var absolute = (new URL( "foo", "http://example.jp/bar/baz" ) ).href; // http://example.jp/bar/foo IEではURLコンストラクタはサポートされていないが、IE9以上ではDOMParserやcreateHTMLDocumentを使って現在のDOMとは分離したdocumentを生成し、その中に<base>要素を用いてbase URLを指定し、そのdocument内で<a>要素を用いて相対URLを絶対URLに変換するという手段によって相対URLを絶対URLに変換可能である。 function getAbsoluteUrl(
[JavaScript]table-to-jsonを使ってテーブル内容をJSONにする | DevelopersIO
htmlのテーブル内容をJSONにする htmlのテーブル内容を取得してJavascriptでなんらかの処理をすることはよくあります。 普通にjqueryを使い、行を取得してセルを取得して・・・と処理すればデータを取得することができますが、 今回紹介するjQuery用プラグイン、「table-to-json」を使用すると、もっと簡単にテーブルのデータをJSON形式で取得できます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 jQuery : 1.9.1 セットアップ&動作確認 まずはここからtable-to-jsonをダウンロードしましょう。 ここのlibディレクトリにあるjsファイルを使用します。 そして、下記のようなhtmlをディレクトリ内に作成し、動きを見てみましょう。 <!DOCTYPE html> <html lang="ja"
[Javascript]Ractive.jsでシンプルにDOM操作をする | DevelopersIO
Ractive.js Ractive.jsは、インタラクティブなDOM操作を行うためのライブラリです。 データバインディングやDOM更新を簡単に行うことができます。 最近のJavascriptフレームワークを使えば、そういったことはだいたいできますが、 Ractive.jsはとても軽量かつ覚えることも少ないので、すぐに使い始めることができます。 今回はここでやっているように、Ractive.jsを動かしてみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 セットアップ&動作確認 セットアップはとても簡単です。 ここからRactive.jsをダウンロードします。 そしてサンプル用index.htmlを作成し、次のように記述しましょう。 <!doctype html> <html lang='ja'> <head> <meta char
Build Your First JavaScript Library | Envato Tuts+
Ever marveled at the magic of React? Ever wondered how Dojo does it? Ever been curious about jQuery's gymnastics? In this tutorial, we’re going to sneak behind the scenes and try our hand at building a super-simple version of jQuery. We use JavaScript libraries nearly every day. Whether it's for implementing an algorithm, providing an abstraction over an API, or manipulating the DOM, libraries per
CSS3の設定を外すとどう見えるかをチェックできるブックマークレット·deCSS3 MOONGIFT
deCSS3はCSS3のプロパティを解除してCSS3非対応Webブラウザの表示を確認できるブックマークレットです。 最近のモダンなWebブラウザは大抵CSS3に対応しています。格好いいイフェクトを実現するのも容易ですが、レガシーなWebブラウザでの表示をつい怠ってしまいがちです。そこでCSS3の設定を外してくれるdeCSS3を使って表示を確認してみましょう。 こんな感じのギャラリーが… 一直線に。 それでも拡大表示はできるので実用レベル。 上から現れるアラートが… こんなに細く。でもアニメーションはしているからまだ大丈夫。 配布サイトで実行すると… ちょっとのっぺり。 deCSS3はアニメーションやボックスシャドー、メディアクエリー、トランジションといった幾つかのプロパティを外してくれます。deCSS3で確認すれば、レガシーなWebブラウザでの表示がある程度保てているかどうか、手軽に確認で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mapbox/leaflet-image: leaflet maps to images
5 Awesome JavaScript Promise Tricks
GitHub - naver/billboard.js: 📊 Re-usable, easy interface JavaScript chart library based on D3.js
GitHub - mmig/text-caret-pos: xy coordinates of a textarea or input's caret
Match Emojis with Regular Expressions
GitHub - brix/crypto-js: JavaScript library of crypto standards.
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita![[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e629839191bfb1d4b591eec6e05fa6b2eb00680d/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTk3ZjM0YTQwMTk2NDViMmU2NTYzNmY2NWQ2NTQ5MzI4%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1116ceb04272767b6966b3ec5192b277%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MSU5RCVFMyU4MiU5MyVFMyU4MSVBQSVFNyVCNiU5OSVFNiU4OSVCRiVFMyU4MSVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MSVBMCUyMC0lMjAlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQjklRTUlQUUlOUElRTclQkUlQTklMjAtJTIwJUUzJTgyJUFBJUUzJTgzJTk2JUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NDExZWU5NmEwYWFhY2FiZTVhMmY4MGM1ZDA5MzgwMWU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFjN2FmMTI0YjNkN2I4NWFjZjAxZjNmODNkMDJiZTE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D41d14bfbae29fcf950e30c215b656bba)
