JavaScriptのユニットテストを始めよう - ユニットテストのメリットと書き方のコツ - ICS MEDIA
プログラミングにおいて、ユニットテストを書いてコードが正しく動くか検証することはとても重要です。ユニットテストを導入する目的といえば品質の向上ですが、それ以外にもメリットがたくさんあります。 この記事ではユニットテストを書くとどんなメリットがあるのか、またユニットテストを書くときのちょっとしたコツを紹介します。 ユニットテストを書くメリット 「TODOアプリ」を作っていると仮定して、実際にコードとテストコードを確認しながらメリットを考えてみましょう。 この記事で紹介するテストコードは以下から確認できます。実際に手元で動かせるのでぜひ試してみてください。 コードを確認する ※上記のテストコードはテストフレームワークのVitestを使用して書かれていますが、記事の内容自体はフレームワークによらない普遍的な考え方をもとにしています。 メリット①書いたコードが意図したとおりに動くかすぐ確認できる
これどうだっけ？を解決！Web制作の便利＆時短ツール50個を揃えた Toolb.dev
Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev。 なにかと面倒な作業をパネル上で直感的に行うことができ、リアルタイムでのプレビュー機能や作成したコードはそのままコピペも可能、Web制作でも活用機会の多いツールが揃います。 クレジット表記不要で、ユーザー登録をせず利用できるのも嬉しいポイントです。Web制作をサポートする便利ツールも一緒にチェックしてみてはいかがでしょう。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作を楽にする便利なSVGツール53個まとめ Web制作の面倒な作業が楽になるツール50個を揃えたToolb.dev 「これどうやるんだっけ？」いつも忘れがちなWeb制作の工程をサポートしてくれるToolb.devで利用できるツールは50を超え、現在ベータ版での提供となります。それぞれのツー
iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
Maggie - 画像アップロード前のチェックを簡単に実装
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、ファイル選択した際にファイルの内容を取得したり、サイズや画像の種別をチェックしたりできるようになりました。しかしその実装については面倒というイメージがあります。 そこで使ってみたいのがMaggieです。指定された画像ファイルを柔軟に扱えるようになります。 Maggieの使い方 使い方です。getInfoという関数を使います。 getInfo('#my-input', info => { const preview = document.getElementById('img-preview'); preview.src = info.src; }); infoという変数の内容は次のようになっています。 srcをそのまま画像のsrcプロパティに当てはめて使えたり、
esbox - リロードレスでコードを再実行
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました node向けのアプリケーションを作る場合、JavaScriptを書いてnodeコマンドで実行するというのを繰り返します。しかし最近、Webではちょっとした変更を行う度にオートリロードをかけて確認していくというのが当たり前になっています。 そんな仕組みをnodeアプリケーションでも取り込んだのがesboxです。コマンドを打つことなく変更する度に再実行してくれます。 esboxの使い方 esboxを実行しているところです。実行結果が表示されます。 後はコードを変更する度に結果が変わっていきます。 esboxをライブデモで実行したり、プログラミングの学習コンテンツと合わせたりすると面白いかも知れません。保存する度に評価されるので、細かく実行結果が確認できるはずです。 esboxはnode
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
isEqualNode()で構成が同じか確認できるよ。（DOMおれおれAdvent Calendar 2015 – 15日目） | Ginpen.com
var el1 = document.body; var el2 = document.querySelector('body'); console.log(el1 === el2); // => true
screenlog.js - console.log代替。画面上にログ出力 MOONGIFT
Webフロントエンドの開発時にDevToolsを開くことはよくあるかと思います。ただ、画面の大きさを結構とりますし、常に開いておくのが邪魔という方もいるでしょう。 そこで使ってみたいのがscreenlog.jsです。console.logのように使えて、画面上にログを出力してくれるソフトウェアです。 screenlog.jsの使い方 screenlog.jsを使っているのでところです。右上にデバッグメッセージが出ています。 自動的にメッセージが追記されていきます。 screenlog.jsはconsoleオブジェクトの代わりにscreenLogオブジェクトを使います。ログのクリアもできるので、デバッグに活躍してくれるのではないでしょうか。 screenlog.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 chinchang/screenlog.j
Javascript LAN scanner – JavaScript製のネットワークスキャナ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 社内や家庭でDHCPを使ってネットワークを構築していると、マシンにアクセスする時にIPアドレスが分からなくて不便になることがあります。プリンタのIPアドレスやアクセスポイントのIPアドレスが分からなくて不便な思いをした人もいるのではないでしょうか。 そこで使ってみたいのがJavascript LAN scannerです。JavaScriptで作られたLANのIPアドレススキャナになります。 Javascript LAN scannerの使い方 Javascript LAN scannerのメイン画面です。基本的にはLAN scanリンクをクリックするだけです。 こんな感じで調査結果が表示されています。 JavaScriptで調べているのでWeb以外のポートは調べづらそうです。とはい
JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法
JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法を紹介します。 １．問題点 次のサンプルHTMLがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://user-domain/foo.js"><script> <input type="button" id="test1" value="テスト1" /> <input type="button" id="test2" value="テスト2" /> <div id="result"></div> foo.jsには次のjQueryが記述されています。 <pre><code>$(function(){ $('#test1').click(fun
ウェブ開発やデザインが超絶捗る開発者のためのウェブブラウザ「Firefox Developer Edition」が登場
無料で使えるオープンなウェブブラウザ「Firefox」が登場してから今年でちょうど10年になるそうですが、そんな節目の年に、Firefoxを開発しているMozillaがウェブ開発者目線で作成し、開発者やデザイナーにこそ使ってほしいというウェブブラウザ「Firefox Developer Edition」をリリースしました。 Firefox Developer Edition — Mozilla https://www.mozilla.org/ja/firefox/developer/ Firefox Developer Editionはウェブ開発者のために作られたブラウザで、作成・テスト・サイズの変更といった開発のワークフローで必要とされる機能をすべて持っているものです。さらに、専用のアドオンをインストールすれば、Firefox Developer Editionを操作するだけで他のブラウ
[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
jQueryやJavaScriptでパスワードフィールドの文字を表示する方法を紹介します。 １．はじめに パスワードフィールドに入力した文字を確認したいことがあると思いますが、デフォルトのパスワードフィールドでは「●」しか表示されません。 ということで、パスワードフィールドの文字を表示するサンプルを作ってみました。 通常のパスワードフィールド チェックボックスをチェックすればパスワードフィールドを表示 ウェブサイトなどで入力したパスワードを確認したいときに便利です。 ２．パスワードフィールドの文字を表示する（jQuery） パスワードフィールドの文字を表示するには次のようにします（jQuery2.1.1で確認）。 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function()
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 ｜https://wp.yat-net.com/name
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ： Firefox タグ：javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad（スクラッチパッド）を使っています。 Scratchpad（スクラッチパッド） Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad（スクラッチパッド）もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
[JS]アラートやコンファームなどの通知ダイアログとユーザーのアクションを表示するパネルも簡単に実装するスクリプト -alertifyjs
アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。 alertifyjs alertifyjs -GitHub alertifyjsの特徴 alertifyjsのデモ alertifyjsの使い方 alertifyjsの特徴 alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。 alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。 通知システムもカスタマイズが可能。 OKとCancelの両方のボタンにコールバックに対応。 ダイアログを連携させることも可能。 alertifyjsのデモ promptの通知ダイアログと通知システムを表示 alertifyjsの使い方 Step 1: 外部ファイ
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページで使用されているスクリプト・プラグイン・テクノロジーが何なのかがすぐに分かるChromeの機能拡張 -WhatRuns
WebGLDetector.js - ブラウザのWebGLバージョンを判定 MOONGIFT