JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
addEventListenerで複数のイベントをbindしたい
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
iOS javascript clickイベントが効かないにはまる。 - かもメモ
レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。 Chromeの開発ツールでは意図したとおりに動作していたのですが、iPhone実機で確認した所メニュー以外の部分をタップしたらメニューを閉じる機能が動作していませんでした。 確認環境 iPhone 6S iOS 11.1.2 ブラウザ: Safari clickイベントが効かないパターンがあるっぽい 動作しなかった例 $(document).on('click', 'div.hitarea', function(){ /*... 処理 */ }); ※ 対象の要素を解りやすくするために敢えてdiv.hitareaと書いています どうやら$(document).onや$('body').on のようなイベントの登録
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu
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
package.json のチルダ(~) とキャレット(^) - Qiita
バージョン指定でいっつもこいつの違いを忘れてしまって、npm とか semver のドキュメントを探すところから始まるから自分用のメモ。 ^1.1.2 = 1.x ~1.1.2 = 1.1.x (追記 一応↑は間違っていないのだけど、厳密にいうとちょっと間違っていた) チルダ表記 ~ "明記したところ以下のバージョンがあがることのみ許容" ~1.1.2 = 1.1.2 <= version < 1.2.0 ~1.1 = 1.1.x ~1 = 1.x オリジナルの定義は、 Allows patch-level changes if a minor version is specified on the comparator. Allows minor-level changes if not. キャレット表記 ^ "一番左側にある、ゼロでないバージョニングは変えない (それ以下があがることは
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
JavaScript モジュールの現状 | POSTD
(注：2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき？ 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
React+Redux アプリを react-i18next で多言語化する - IT探検記
React+Redux アプリを多言語化する方法を調べてみました。 前提 TypeScript 多言語化ライブラリー JavaScript で多言語化するライブラリーはいろいろありますが、React で使えるものは限られてくるようです。 いくつか調べて、i18next と react-i18next を使うことにしました。 i18next の方は、特定のプラットフォームやフレームワークに依存しない多言語化ライブラリーで、react-i18next は i18next を React で使いやすくするプラグインです。 インストール まず、ライブラリーをインストールします： npm install -S i18next react-i18next npm install -D @types/i18next @types/react-i18next セットアップ i18next の設定ファイルを
I18n with React and i18next | DigitalOcean
More and more apps are being designed for the global market which means your app will need to work for an audience using various languages and dialects. React does not have internationalization (i18n) built-in, but it is not hard to internationalize an app, especially with the help from i18next. i18next is an i18n framework written in and for JavaScript. It provides the standard i18n features of i
ES6 (ES2015) ModulesのUMD化。HTMLのScript要素とES6 importでの同時読み込みに対応させる方法
最近はES6（ES2015）でJavaScriptを書くようになってきました。前回投稿した記事で紹介した自作のJavaScriptプラグイン「cb-typewriter-js」もES6の構文で書いて、Babelでコンパイルして作っています。その中で、そのプラグインのコードを書いていてかなり悩んだ事がありました。ES6で書いたコードを「HTMLのScript要素」と「ES6のimport」のどちらの方法でも読み込めるようにする事です。なんとか解決方法がわかったのでまとめておきます。 ES6（ES2015） Modulesで何がやりたいのかJavaScriptのプラグインという性質上、用途は様々となりえます。scriptタグで読み込んで使う人もいれば、最近はES6（ES2015）で開発する人もいるので、ES6のimportで読み込んで使う人もいます。つまりプラグインはそれぞれの環境で使えるよう
Node.jsのexportsとmodule.exportsの違いについてのメモ - Qiita
既にいくつか記事がありましたが、自分の中で整理するためにメモ 参考 Node.js : exports と module.exports の違い（解説編） 実践Node.js プログラミング (Programmer's SELECTION) Node.jsのexportsとmodule.exportsについて 結論 公式ドキュメントに「もし exports と module.exports の間の関係が魔法のように 見えるなら、exports を無視して module.exports だけを使うようにしてください」とあるので今いち違いが分からない場合、module.exportsをとりあえず使うということで良さそう クラスのようなものを作成するような場合にはmodule.exportsを使えば良い(例えばコンストラクタを使うなども） 関数だけモジュール化したい場合にはexportsを使う事
# CommonJS と ES6の import/export で迷うなら - Qiita
はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが
file-loaderで画像を扱うときのパス指定 - Qiita
webpackを利用してビルドするとき、CSS内の画像をバンドルせず外部ファイルとして出力したい場合があります。 その際「CSS内に記載したいパス」と「画像ファイルを保存するディレクトリ」をそれぞれ個別に指定したいときの方法です。 構成 例えば、以下のようなディレクトリ構成だったとして、 root/ ├ dist/ (公開用ディレクトリ) │ └ asset/ │ └ images/ ← ここに画像ファイルを出力したい │ └ css/ ← ここにCSSファイルを出力したい ├ dev/ (開発用ディレクトリ) │ └ images/ │ └ example.png │ └ css/ │ └ example.css └ webpack.config.js CSSはこんな感じです。
webpackのCommonsChunkPluginの使い方、使い所 （webpack 4で廃止） - Qiita
#2018/3/15追記 先日リリースされたwebpack 4で、CommonsChunkPluginは廃止され、代わりにoptimization.splitChunksが追加されました。 詳細は記事に書きましたのでwebpack 4を利用している方は以下をご覧ください。 webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 それ以前のバージョンでは有用なツールだと思いますので、まだ移行できない方はご覧いただければと思います。 はじめに webpackのプラグインであるCommonsChunkPluginに関しての基本的な使い方、使い所に関しての記事です。 CommonsChunkPluginを利用する機会はそこそこあると思うですが、日本語の解説記事をほとんど見かけなかったため本記事を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Element.nextElementSibling
How to translate your React app with react-i18next
How to package assets with a node module
How can I get the full object in Node.js's console.log(), rather than '[Object]'?![How can I get the full object in Node.js's console.log(), rather than '[Object]'?](https://cdn-ak-scissors.b.st-hatena.com/image/square/98d6f053a97a87156775f60757c60865d0f2c47d/height=288;version=1;width=512/https%3A%2F%2Fcdn.sstatic.net%2FSites%2Fstackoverflow%2FImg%2Fapple-touch-icon%402.png%3Fv%3D73d79a89bded)
Why is a set-cookie header being ignored by browser and the cookies not saved from an Ajax call using fetch?