JavaScriptテスト自動化キホンのキ - Qiita
if(add(1, 2) == 3) { console.log("テスト結果OK"); } else { console.log("テスト結果NG"); } のように、ひたすら泥臭いコードを書くハメになる可能性があります。（これは極端な例ですが） また、このままではテスト実行後の結果がとても分かり辛いです。 どんなテストに成功したのか/失敗したのか、全体でどれだけテストがあって、どれだけパスしたのか。 はたまた失敗した場合に、どんな部分がNGだったのか。 これらを解決するためにあるのが、テストフレームワークと呼ばれるものです。 Javaで言えばJUnit、RubyではRSpec、PHPではPHPUnitやPHPSpecなどが該当します。 こういったテストフレームワークを使うことで、テストを簡潔に分かりやすく書けるようになります。 また、こんな感じでテスト結果も見やすく出力してくれます。
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、 根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l
食べられないほうのカリー化入門 - Qiita
『カリー化』(Currying) という概念をご存知でしょうか。"Curry" は食べ物のカレー(Curry)と同じスペルですが、ここでいう Curry はそれとは別のもので、多くのプログラミング言語に応用できるかもしれない、とても便利かもしれない概念です。 では教えてくれ。”カリー化”とはなんのことだ？ 『ふたつの引数のうち、大きい方の数を返す』という機能を持った関数 max を実装したいとしましょう。そのようなとき、大抵は次のように定義すると思います。 この関数 _max も『大きい方の数を返す』という機能を持っていますが、_max は max とは呼び出し方が少し異なります。たとえば、_max で 1 と 2 のうち大きい方を求めるには、 _max(1)(2) のように書きます。 _max が通常の max と異なるところは、関数を呼び出すときに引数をひとつづつ渡すようになっていると
CSS Animation - Free CSS tutorials and guides - CSS Animation
CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills Enrol and save 90% today CSS Animation Tutorials Parallax scrolling Scroll animations UI Animation in React Animating Links Create an animated scroll cue Transitions in space Build an awesome Hero Header Animating your hero header Why animate? Star Wars Stereoscopic CSS Spheres Portal CSS Buffer's loading animation WWDC
クロージャの使用例
今日は、クロージャの使用例を書きます。昔クロージャについて書きましたが、いまいち実際どういう場面で使われるのかイメージできてませんでした。
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
![[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変数が参照できる。 といったクロージャの「仕組み」や「特徴」については分かったものの、もっとも重要ともいえる 「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。 例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない？」 って教えてあげますよね。 これと同じように友人が 「○○○○○○なんだよ、うまい方法
JavaScript オブジェクト入門 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
jQueryプラグインをうまいことカプセル化する設計方法-jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 [2011.02.02追記] 2011年はsub()方式がおすすめです。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($)
Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 - Qiita
こんにちは、ほそ道です。 今回からしばしJavascriptの基本的な処理と概念を整理していきます。 頻出でありながら詳細を忘れてしまいがちなものや、有効な使い方がわからなくなりがちなもの等をまとめていきます。 今回はcallとapplyを取り上げます。 目次はこちら 基本仕様 callもapplyもFunctionオブジェクトのprototypeであり、用法が良く似ています。 関数.call()や関数.apply()という実行の仕方となり、実際に処理されるのは呼び出し側の関数です。馴れないと直感的じゃないかもしれませんが、何度かやってるとすぐ馴れると思います。 基本１：thisを指定する 第一引数は関数内で参照されるthisとなり、無理矢理thisを変更出来ます。 なんでもできちゃうJavascriptらしい処理です。 下記の例ではcallとapplyは同じ動作となります。
jQuery $.data()と.data()、データの保存と取得で気をつけること。 - かもメモ
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita こちらの記事に data() // 普通の書き方 $(elem).data(key, value); // 10倍速い！ $.data(elem, key, value); とあったので、$.data(elem, key, value);を使おうとして少し気になる挙動になったのでメモです。 確認環境のjQueryのバージョンは1.10.2です。($.fn.jqueryでjQueryのバージョンが確認できます。) リファレンスのメモ .data() .data() | jQuery API Documentation .data() | jQuery 1.9 日本語リファレンス | js STUDIO データを格納する .data(key, value) 引数説明 key要素に紐付けるデータのキーとなる文字列を
jQuery - プラグインを作る - entacl Lab.
jQueryプラグイン スライダーやニュースティッカー等jQueryと同様になくてはならない存在のプラグイン。jQueryやプラグインの作者さんたちには頭が上がらないです。 今回は、そんなjQueryのプラグインを作ってみます。さて、 「わざわざプラグインにしなくてもいいんじゃない？」 っていう方もいるでしょうね。 コードを全て自分一人で管理していたり、ごく簡単なものならグローバルの名前空間でゴリゴリ書いてもいいし楽です。しかし、チームで開発するとき等にはプロパティやメソッドがバッティングしないような気遣いは必要になると思います。大きなコードであれば自分だけで作っててもバッティングしてしまうことすらあります。IDEのコードヒントも鬱陶しくなりますしね。 jQueryのプラグインにすれば$内空間だけで完結できるので、グローバルでのびのびできます。 「大抵のプラグインはあるし、車輪の再発明では
jQuery初心者のためのJavaScript設計トレーニング | 機能や役割に着目したコード整理
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP（Developer Technologies）を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』（共著：エクスナレッジ、2011年3月12日）や『CSS3デザイン プロフェッショナルガイド』（共著：毎日コミュニケーションズ、2011年5月28日）』などがある。
jQueryプラグインの書き方を考えてみる(1)
更新履歴 2010-01-21 プラグイン定義方法については、約１年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary プラグインを書いてみる まずこのへんの記事を参考に、 jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ（Plugins | jQuery Plugins）に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよ
jQuery プラグインの書き方メモ - tacamy--blog
勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ options = $.extend({ opt1: 'val', opt2: 'val' }, options); /** * Core */ return this.each(function() { // Process }); /** * Method */ function _methodName() { }; }; }(jQuery)); /** * Execute */ $(function() { $(".foo").pluginName(); })
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
シンプルなイベントカレンダーを実装するjQueryプラグイン - Rewish
ある朝僕は、以下の用件を満たすカレンダープラグインを探していました。 シンプルなHTMLを吐いてデザインの変更が容易 コールバック関数である程度処理をイジれる 月移動のアニメーションが素人ウケしそう 小一時間色々なプラグインを見ましたが、中々しっくり来るモノが無く、「これは探すより作った方が早そうかなぁ」と思ったので作ってみました。 機能概要 記事の初めで大方出ていますが、主に以下の機能を備えています。 月移動時のスライドアニメーション 生成するHTMLを包含する要素のclass変更 イベント追加、月移動などに対応するコールバック関数 JSON形式でのイベント追加 イベント用JSONの先読み機能（月移動時の遅延対策） 表示中の月に属さない日付の表示、非表示 ダウンロード jQuery.calendar 動作デモ 導入方法 jQueryプラグインではお馴染み、 jQueryを読み込んでからプ
Introduction | 中上級者になるためのJavaScript
Share on Twitter Share on Google Share on Facebook Share on Weibo Share on Instapaper 中上級者になるためのJavaScript この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
