数字入力フォームに文字数制限をつける |Nonsense J
HTML5で追加された<input type="number" />ですが、maxlengthの指定ができません。 なので、Javascriptで最大桁数の制御を入れてみます。 HTML 3桁の例 <input type="number" name="bangou3keta" oninput="sliceMaxLength(this, 3)"> 5桁の例 <input type="number" name="bangou5keta" oninput="sliceMaxLength(this, 5)"> Javascript function sliceMaxLength(elem, maxLength) { elem.value = elem.value.slice(0, maxLength); } また、<input type="number" />にすると右端に数字を増減するスピンボタ
JavaScriptでクリップボードに文字をコピーする(ブラウザ) - Qiita
2020/12/18 Clipboard API でコピーする方法を追記 2019/1/18 CSSによって選択できない場合があったので対応 2017/11/1 改行がコピーできてなかったのでpreをつかうように変更 2017/10/31 編集 Clipboard API でやる方法 clipboard API を使うと簡単に実装できます。 ただし、https じゃないと動かないようです。 参照: https://developer.mozilla.org/ja/docs/Web/API/Clipboard サンプル <textarea id="textarea">Hello, World!</textarea> <button type="button" id="button">コピー</button> document.getElementById('button').onclick
高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
Engadget | Technology News & Reviews
Nintendo Switch 2: Everything we know about the coming release
画像圧縮やオートコンプリートなどWeb開発を簡単にするJavaScriptライブラリ厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービスなどを開発する際に簡単な記述でさまざまな機能を組み込めるJavaScriptライブラリをご紹介します。 画像、ファイル、音楽、オートコンプリート機能など、高度な技術をできるだけ簡単に実現してくれるJavaScriptライブラリを厳選し、その基本的な使い方も合わせて解説しているのでぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 ■画像の圧縮機能を組み込めるライブラリ！ 【 Compressor.js 】 ブラウザに標準で提供されているtoBlob()を応用して、カスタマイズ可能な非可逆圧縮を手軽にWebページへ組み込めるJavaScriptライブラリです。 さまざまなフレームワークにも組み込
JavaScriptでも単体テストを導入しよう！ってかテストって何？
昔はお遊び程度の使われ方をしていたJavaScriptも、本格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト（ユニットテスト） プログラミングにおいて、特に小さな規模の開発においては
アルファシス – alphasis.info -
カテゴリー別アーカイブ JavaScript (2,265) リファレンス (1,050) Hello World (3) 基本構文 (8) 変数 (13) 定数 (2) データ型 (5) リテラル (13) 文字列リテラル (4) 配列リテラル (3) オブジェクトリテラル (3) 演算子 (52) 制御構造 (65) if (5) switch (4) while (6) do-while (6) for (10) for-in (8) for each-in (6) break (6) continue (5) debugger (1) function (1) return (1) var (1) with (1) try-catch-finally (3) throw (1) ユーザー定義関数 (21) ユーザー定義オブジェクト (10) 組み込み関数 (10) 組み込み定数 (
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
JavaScriptを使った開発を始めるなら！TypeScriptをはじめよう ～ ステップアップ
もしJavaScriptを扱う開発をこれから新たに始めるのであれば、ぜひ、TypeScriptを習得してください。TypeScriptを使うと、簡単に高品質で扱いやすいJavaScriptのコードを作成することができます。TypeScriptの概要と書籍「TypeScript実践マスター」がカバーする範囲、あるいは本書ではカバーできないその先の内容について紹介します。TypeScriptを新しいプロジェクトに採用できるかどうかイメージしていただけます。Read less
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」
TOP > plugin > JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」 Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。 SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になる
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
【Ruby入門】 jsonの扱い方まとめ 【parse load generate to_json】 | 侍エンジニアブログ
こんにちは! フリーエンジニアの長瀬です。 みなさんはjsonをご存知ですか？ json形式でのデータの取り扱いはとても軽量でシンプルなので、人気があります。 いまのうちに、Rubyでしっかり取り扱えるようにしておきましょう。 この記事では、jsonの扱い方について ・JSON.load ・JSON.parse という基本的なメソッドから、 ・JSON.generate ・JSON.fast_generate ・JSON.pretty_generate ・to_json といった応用的なメソッドについても解説していきます。 jsonとは jsonはJavaScript Object Notationの略でもともとはjavascriptで使用されていたファイル形式です。 非常に軽量で、直感的にデータを扱うことができるため、幅広い言語で使用されています。 Rubyでは、他の言語と連携するための
ブラウザだけでJavaScriptを使った3Dゲーム開発ができるWebエディタ「nunuStudio」を使ってみた - paiza times
どうも、まさとらん（@0310lan）です。 今回は、面倒な「インストール」や「ユーザー登録」など一切不要で、ブラウザから即座に起動できる無料の3Dゲーム開発エディタのご紹介です！ ゲームに限らず、3DコンテンツやVRアプリに興味のある方にもオススメのサービスですよ。 【 nunuStudio 】 「nunuStudio」は、既存のWeb技術（Web GL, Web Audio, Web VR…）を融合して構築されているのが特徴で、3D描画は「Three.js」をベースにしており、物理エンジンは「cannon.js」を活用しています。 ■「nunuStudio」を始めよう！ それでは、実際に「nunuStudio」の開発エディタを使ってみましょう！ まず、サイトにアクセスしたら、トップ画面にあるボタンをクリックします。 いくつかの選択肢が表示されますが、ここでは「Web版」のボタンをクリッ
ES6の新機能: 「let」「const」宣言を調べてみた - Qiita
JavaScript はES6によっていろいろと機能が充実することになっているのですが、classとかgeneratorとかがよく取り上げられていると思っ立てたので、てっきりこれだけだと思ったのですよ。 まさか他にも機能があるとは。。。 というわけで、あまり話題に登っていないように見える新機能。。。というか新宣言について調べてみました まさかの記事書きで年越すとは・・・ 宣言が追加されてた！ JSの宣言文といえば、「var」しかなかったのですが、なんとES6にて、「let」「const」が追加されていたようです。 いまのところ、'use strict'を使わないと動きませんでした。 let ・・・ 「再宣言」が不可 まずは「let」宣言です。 こいつは端的にいうと、「再宣言ができない」宣言です。 簡単な例を以下に示しています。 'use strict' var spam = 12;// 当
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptプログラミング講座【XMLHttpRequest について】
