なぜ昨今のJavaScriptではイミュータブルであるべきと言えるのか歴史的背景を踏まえて言語化する - Qiita
先日JavaScriptに慣れていない人のコードをレビューする機会があり、constで宣言されたオブジェクト内部に副作用を与えている記述がありました。 その時に「今の動作に問題ないけど、今風のJSならイミュータブルの方が良いかも」と指摘したものの、JSに疎い人からすれば背景が分からないはずで、理由を自分なりに説明したものの案外言語化が難しかったことがありました。 難しい理由として、イミュータブルであることは実利面と同時に、Facebook発祥のトレンドという側面も多分に含んでおり、JavaScript自体の潮流も踏まえておく必要があるからです。 今回は実利面に加えてトレンド面も交えて、なぜイミュータブル性がJavaScriptで重宝されるのかを見ていきましょう。 フロントエンドの世界では状態を持ち、時間やインタラクションと共に変化するから サーバーサイドの世界から見た場合、HTTPはステー
chart.jsのグラフで軸のラベルを飛び飛びに表示する方法 - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> </head> <body> <div style="height: 500px; width: 500px;"> <canvas id="myChart" width="400" height="400"></canvas> </div> <script> var
Chart.jsで作成する折れ線グラフの実例
たまに必要に迫られて、ブラウザで完結するように生のJavaScriptを書くことがあります。 今回はそんなシンプルな構成でも案外きれいなUIを作成するのに役立つグラフ作成ライブラリ、Chart.jsについてメモしておきます。 機能の豊富さとコーディングの簡潔さは往々にしてトレードオフなので、ライブラリの選択が重要ですね。 D3ほど高機能でなくてもいいが、できるだけ簡単にグラフを書きたい、という時に扱いやすい（と個人的に思っている）ライブラリです。 ■ シンプルな記述 ■ よく使われるような種類のグラフなら標準の機能だけでも作成できる ■ (ちょっとサイズが大きいが)ファイルひとつで動く ■ デフォルトでアニメーション(パフォーマンス要件が厳しければ無効化することもできる) もくじ： Chart.jsの設置 基本の折れ線グラフ 線のスタイル 線の色と背景色 破線 直線 ステップ 点 欠損値
JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
けものフレンズっぽいロゴのジェネレータができたよ！ - Qiita
けものフレンズのロゴってカラフルでかわいいですよね！そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。（ただしＩＥはブラウザではないものとする。また、一部のブラウザでセキュリティ制限のため保存ができないという情報が入っています） けものフレンズ ロゴジェネレータ つかいかた！ 使いかたはサーバルちゃんでもわかるくらい簡単！テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればＯＫです。下の方にダウンロードボタンもつけたので、これを押しても保存できます。ロゴの画像は背景が透明のPNG画像なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みして
IE9+対応でjQueryのajaxを使って非同期的にファイルをアップロードする | ITハット
IE9以下でも画面遷移なしにファイルをアップロードする必要があり、少しつまづいたので紹介したいと思います。古くからある手法のようです。 ajaxでアップロード HTML ファイルをアップロードする わかりやすいように必要最低限のHTMLです。<button> の type 属性は はJS側で送信するので、buttonとしておきます。 PHP // 一時ファイルパス $tmp = $_FILES['file']['tmp_name']; // アップロードするフォルダのパス $save = 'test/'.$_FILES['file']['name']; // アップロードに成功したとき if (@move_uploaded_file($tmp, $save)) { echo json_encode(array('state' => true, 'name' => $_FILES['file
ファイルアップロードをajaxで行う IE対応 - AUSGANG SOFT
ファイル選択をしたら自動的にajaxでアップロードする機能をつくっていたのだけど、やっぱりIE対応でつまづいた。いちおうIE8対応を目指した。 ajax送信は、このライブラリを使用。 jQuery Form Plugin http://malsup.com/jquery/form/ そのままだとIEで動かない。 596行目のfinallyがIEではエラーになるので、コメントアウト。 次、ファイル選択で自動アップロードしたかったので、jQueryのchangeイベントで処理を書いたが発火してくれない。 jQueryのchangeイベントで気をつけること http://d.hatena.ne.jp/sho-yamasaki/20120319/1332168988 onchangeならうまくいくらしい。 あと、ファイル選択部分を以下をつかって整えた。 JavaScript · Jasny Boo
テキストファイルを読み込む－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] テキストファイルを読み込む 前のページではファイル選択ダイアログの出し方を見ました。 ここではそれを利用してローカルにあるテキストファイルを選択し、 テキストエリアに読み込む方法を見ていきたいと思います。 テキストを読み込む ローカルにあるファイルを読み込むには、FileReaderを使います。以下に使い方を掲載します。 変数 = new FileReader() FileReaderを作成し、変数に格納します。 変数.readAsText(Fileオブジェクト) テキスト形式でファイルを読み込みます。 変数.result 読込結果を取り出します。 以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。もしUTF-8形式のテキストファイルが無ければ、 以
enchant.jsでのイベントの追加・削除について - Qiita
//タッチイベントリスナを登録 sprite.ontouchstart = function(){ //hitイベントを発行 var e = new enchant.Event("hit"); this.dispatchEvent(e); }; //hitイベントリスナを登録 sprite.onhit = function(){ alert("HIT"); }; イベントの削除 一度しかイベントを実行したくない場合は removeEventListener()でイベントの削除を使う。 引数にはイベント名と登録した関数を渡す。 var touchFunc = function(){ alert("タッチ"); //イベントの削除 this.removeEventListener("touchstart", touchFunc); }; object.addEventListener("tou
(0, eval)('this')とは何なのか - Qiita
この(0,eval)('this')はいったい何なのか。調べた。 調べた結果 これはindirect eval callを使用した、どのスコープでも必ずグローバルオブジェクトのthisを取得するためのテクニックであった。 ES5ではevalを直接呼び出すと、引数のコードはそのスコープで実行されるが、間接的にevalを呼び出すと、引数のコードは必ずグローバルスコープとなるそうだ。なので引数のthisは必ずグローバルオブジェクトとなる。ブラウザではwindowとなり、Nodeではglobalになるのだ。実際どうするかだが、eval関数を変数に代入し、その変数で実行すればよい。 // Nodeで実行 var obj = new (function(){ this.direct = eval('this'); var ev = eval;// 変数に代入 this.indirect = ev('t
JavaScriptでHtmlのtable要素をCSVに変換する
Total: 24402, Today: 2, Yesterday: 1 Posted by aterai at 2012-07-25 Last-modified: 2019-03-12 18:18 概要 Htmlの<table>要素をCSV(character-separated values)に変換するBookmarkletです。colspan、rowspanで結合するセルがある場合は、同文字列を挿入しています。 区切り文字はタブ(TSV) ブックマークレットなどに登録して表(<table>要素)のあるページで実行 <table>要素をダブルクリックすると、その内容をCSVに変換して<textarea>に文字列として挿入 子要素に<table>が存在する場合は、ダブルクリックに反応しない <table role="presentation">や<table border="0">のよう
applican/アプリカン
周囲にあるアクセスポイントのSSID一覧や、現在接続中のSSIDを取得するにはJavascriptを記述します。 周囲にあるアクセスポイントのSSID一覧を取得（Androidのみ） applican.wifi.getSSIDList(getSSIDList_Success, getSSIDList_Error); function getSSIDList_Success(result){ var dump = ""; var cnt = result.length; for(var i=0; i<cnt; i++){ dump += result[i] +"\n"; } alert(dump); } function getSSIDList_Error(err){ alert(err.code); } 解説 applican.wifi.getSSIDList([成功時のコールバック],
クロージャ - JavaScript | MDN
function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側の関数で宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を使用
PhoneGap/CordovaがiOSのネイティブ機能を使うしくみ - 方向
さいきんWebとiOS/Andoroid Native Appの融合がすすんでいますね！ ブラウザコンポーネント(WebViewという)のJSからiOSのネイティブ機能を呼び出すスタイルも流行っています． PhoneGapとかFacebookアプリとかね！ 自分は勝手にJS-Native Bridgeと呼んでいるのですが， あれってどうやってるのって話 Google先生で「uiwebview native」でぐぐると UIWebViewでWebとネイティブを相互連携させる方法について iPhoneのネイティブ機能をWebViewから呼び出す方法 こういう記事が出てきます ようするに Obj-C → JS [webView stringByEvaluatingJavaScriptFromString:@"JSCode"] JS → Obj-C webView:shouldStartLoadW
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
javascript - には整数はない : 404 Blog Not Found
2009年05月22日15:00 カテゴリLightweight Languages javascript - には整数はない 違います。 javascriptで整数の変数を強制的に符号なし整数に変換する方法 ? ku javascriptの整数は内部的には32bit intで扱われていて(Firefox3.1, Chrome0.2の場合)、演算の結果が0×80000000を超えると自動的に負の値になります。 事実はもっと驚くべきものです。 以下をご覧下さい。 puts = make_puts(document.getElementById('ttyp0')); for (var n = 1; n <= 54; n++){ puts(2, '**', n, ' - 1 = ', Math.pow(2, n) - 1); } 2の32乗どころか、2の53乗まできちんと計算できていますが、54
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ace Editor使用心得-CSDN博客
Loading...