jQuery 便利なonを使おう（on click) - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
はじめてのjQueryのプラグインの作り方～5ステップ - Web制作・Webシステムの株式会社ワイワイエンジン
Posted: 2014年4月6日-Likes: 0-Comments: 0-Categories: JavaScript, jQuery-Tags: jQuery, jQueryプラグイン 今や当たり前に使われているjQuery。 私もWeb制作時には、JavaScriptを利用する時には、かなりの割合で利用させて頂いています。 jQueryの利点はこんな感じ クロスブラウザ Write Less, Do More – より少ない書き方で、もっと多くこなす プラグインが豊富(世界中で作成・公開されている) 自分で書いても少ないコードで多くの要望に応えることができて、さらにプラグインを利用することにより多くのことができる点は、とても素晴らしいと思います。 jQueryを利用していると自分で作った処理をプラグイン化したいな。多くの人に使ってもらいたいなということがありませんか？ プラグインを
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
Photoshopの動作をJavaScriptで記録しよう - Photoshopの情報集
Photoshopの動作をJavaScriptで記録しよう Photoshopの機能に、動作した作業をすべてJavaScriptとして保存してくれるという機能があります。 この機能は、ある程度はJavaScriptは読めるけど全部は自分で書けない場合にとても役立ちます。 では早速記録を取る方法を紹介します。 JavaScriptで保存するスクリプトScriptListener.8liを設定する。 以下Win版とMac版を分けて説明いたします。 Win版＞ ..Adobe\Adobe Photoshop CS5 (64 Bit)\ Scripting\Utilities\ScriptListener.8liがあります。 ..Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\Automateに ScriptListener.8liをコピーしたら準備は完了で
【D3.js】トランジション終了時にコールバックを呼ぶ
D3を使って要素を移動したりスタイルを変化させる際、変更(Transition)の終了を待ってなにがしかの処理を行いたい時があります。そんな時に使えるTIPS. Mike Bostock Solution トランジション終了時にコールバックを実行するヘルパー関数を作成することで実現できるそうです。 参照： https://groups.google.com/forum/#!msg/d3-js/WC_7Xi6VV50/j1HK0vIWI-EJ //ヘルパー関数 function endall(transition, callback) { var n = 0; transition .each(function() { ++n; }) .each("end", function() { if (!--n) callback.apply(this, arguments); }); }; //c
JavaScript ベストプラクティス Part 1 | POSTD
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
一章第四回 オブジェクトと関数 — JavaScript初級者から中級者になろう — uhyohyo.net
一章第四回 オブジェクトと関数このページの最終更新日：2019年7月1日 関数もオブジェクトだ「オブジェクト」について多少わかってきたので、ここで関数という存在を見直してみましょう。 実は、基本的にJavaScriptでは全てのものがオブジェクトかプリミティブです。関数はどちらに入るのでしょう。 実は関数もオブジェクトです。ただ、すごく特殊なオブジェクトであるのは分かると思います。「()」をつけると呼び出すことができるというのは関数だけがもつ特徴です。 実際、配列なんかよりももっと特殊なオブジェクトという位置づけです。しかし、オブジェクトであることは確かです。次のサンプルを見てみましょう。 function aaa(){ alert("test"); } aaa(); alert(aaa); アラートを表示するだけの関数aaaを作り、それを呼び出しています。よって、「"test"」のアラー
AWS SDK for JavaScript in the BrowserでAmazon S3を使ってみた | Lancork
※当ブログではアフィリエイト広告を利用しています。 10/31にAWS SDK for JavaScript in the Browserのデベロッパープレビュー版が公開されました。 ブラウザからJavaScriptを使用し、サーバーサイドのコードを書かずにAmazon S3、Amazon SNS、Amazon SQS、Amazon DynamoDBを利用できるとのことです。早速公式ブログで公開されている内容を基にAmazon S3からのファイルダウンロード、アップロードを試してみたのですが、公開されている内容だけだと少しつまづいた点があったのでメモします。 AWS SDK for JavaScript in the Browserとは？ Amazon web servicesの各サービスの機能をJavaScriptから利用可能にするSDKです。サーバーサイドの仕組みを実装することなくブラ
Leaflet.jsをちょこっと試してみた。
OpenLayersネタばかりではなんなので、Leafletについてちょっと試してみました。 Leafletは、OpenLayersと同様browser上にmapを表現するJavaScript libraryです。 なんと言っても軽量です。めっちゃ容量が小さいのにはびっくりです。その代わりOpenLayersのように何でもてんこ盛りでなく、必要最低限の機能を持ち合わせています。 Leafletについては、leafletjs HPを参照してください。また、tutorialもあるので、実際に使うには問題ないと思います。 今回は、超～～簡単なLeafletのexampleを3つほど作成してみました。 まずは、OpenStreetMapをLeafletを使って表示してみましょう。 example codeは、以下のcodeを入力します。 保存先は、c:￥ms4w￥apache￥htdocs￥lea
みんなで早押しクイズ - オンライン対戦クイズゲームアプリ
お問い合わせ 広告掲載・メディア紹介などのお問い合わせは、下記のメールアドレスまでお願いいたします。 tactsh(at)gmail.com
私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変数が参照できる。 といったクロージャの「仕組み」や「特徴」については分かったものの、もっとも重要ともいえる 「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。 例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない？」 って教えてあげますよね。 これと同じように友人が 「○○○○○○なんだよ、うまい方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ビット演算子を使う具体的な場面 - Qiita
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
