無駄と文化

実用的ブログ

JavaScript

やる気スイッチを作った

やんなきゃいけないのにやる気が出ないことありませんか? ポチッと押すだけでやる気がみなぎってくるスイッチがあればいいと思いませんか? やる気スイッチを作りました 使用例 todays-mitsui.github.io ※ やる気が出るとは言ってない 私からは以上です。

JavaScript で関数とクラスを見分ける

JavaScript においては typeof や constructor を参照するだけでは関数と class を見分けることができません。 // ただの関数 function myFunction() {} // class class MyClass {} // typeof では見分けられない typeof myFunction; // => 'function' typeo…

JavaScript で割り算の商と余りを求める

JavaScript で整数同士の割り算をして商と余りを求める方法について解説します。 まず2つの整数 m, n を受け取って商と余りの組を返す関数 div を定義しましょう。 const div = (f=>(u=>u(u))(x=>f(y=>x(x)(y))))(g=>m=>n=>m>=n?(b=>b?1+g(m-n)(n)(1):g(m-n)…

history.back() でページを戻ったときの JavaScript の挙動

「ページ A」から「ページ B」へ遷移した後に「ページ B」で hidtory.back() が実行され「ページ A」に戻ってきたとき、「ページ A」で走っていたスクリプトの挙動について考えよう。 ちなみにブラウザの「戻る」ボタンでページを戻ったときにも全く同じ議論…

フォント読み込み完了のタイミングで処理を実行する

ブラウザにフォントが読み込まれたタイミングで JavaScript の処理を実行したいと思ったとき、以前であればサードパーティー製のライブラリを使っていた *1 けど、最近はブラウザの標準 API だけで読み込みタイミングの判定ができるようだ。 Document.fonts …

JavaScript で、指定した範囲の整数をランダムに返す関数

やっていきましょう。 実装 /** * 指定した範囲の整数をランダムに取得する * * @param {number} min ランダムに取得したい整数の下限 * @param {number} max ランダムに取得したい整数の上限 * @returns {number} min 以上 max 以下の整数 */ function rand…

JavaScript のデータを CSV で保存する

意外と需要のある JavaScript のデータを CSV として保存するスニペットを書き留めます。 var data = [ ['name' , 'age', 'gender'], ['Andrew', 26 , 'male' ], ['Lisa' , 21 , 'female'], ['Fred' , 41 , 'male' ], ] このような多重配列を元にして、 この…

JavaScript のコールスタックが溢れていたのをどうにかしたら JS 要らなくなった話

約5ヶ月前にこんな記事を書いたわけですが、 blog.mudatobunka.org この記事が今になってよく見られるようになってます。 先週までは毎日1桁のPVをコツコツを積み重ねていたのが本日だけで130PVです。 どこかの誰かに拾っていただいたんでしょうね。はてブも…

九九表のすべてのマスの和

takatoh 様 が同じ問題を Ruby と Scheme で解いてくださいました。許可を得て転記させていたいています。 Ruby 版の簡素さはさすがという感じです。そして、Scheme 版の S式 は慣れないと読めないし分からないのが面白いですね。takatoh 様、本当にありがと…

【jQueryの基本の"き"】パート4 - jQueryのいろんなバージョン

これまでjQueryの使い方についてねちっこく解説してきましたが...。 今回は「使い方」ではなく「選び方」です。 ビギナーズからよく飛び出す質問「どのバージョンのjQueryを使えばいいの?」について。 jQueryは最新版だけでも全部で8つ 2016年8月末時点でjQ…

【jQueryの基本の"き"】パート3 - 起動スクリプトを囲っているアレをひもとく

さて、前回までjQueryプラグインの基本的な使い方をおさらいして、さらに起動スクリプトについて詳しく解説してみました。 今回は、これまで意図的に触れずにスルーしてきた部分をピックアップします。 起動スクリプトを囲っているよく見るアレ についてです…

【jQueryの基本の"き"】パート2 - 起動スクリプトを詳しく解説

前回はjQueryプラグインを設置するための基本的な流れを解説しました。 今回はプラグインを使いこなすための要(かなめ)になる 起動スクリプト についてイメージしやすい例で解説していきます。 起動スクリプトとは 前回解説しましたが、jQuery本体やプラグイ…

【jQueryの基本の"き"】 パート1 - jQueryプラグインの使い方

jQueryプラグインの 作り方 ではなく、使い方 です。 Web上には多くのjQueryプラグインが公開されていますが、どのプラグインにも共通する基本の使い方を解説します。 普段、サンプルコードをなんとなくコピペするだけで済ませてしまっている人も、基本さえ…

React で this.props.children に新しい Props を渡す

React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか…

【今日のバグ取り】 JavaScript でコールスタックが溢れていたのをどうにかした話

lazex さまのはてブコメントを受けて、animation プロパティを使った改良版を書きました。完全にこっちの方が良いので、参考にするならばどちらかというと新実装の方で。 lazex さま、ご指摘ありがとうございます。 JavaScript のコールスタックが溢れていた…

Fetch API が 4xx エラーを reject してくれない

最近のフロントエンド開発に関して、 jQuery への依存を極力減らしてPure JS だけでいろいろな処理を書くように心掛けています。 具体的には ECMAScript2015 で書いたものを Babel でトランスパイルして、Browserify でバンドルするというスタイルですね。ホ…

いまさらまとめるブックマークレットの作り方 〜 2016年版 〜

これまでプライベート・業務の両面で個人的にブックマークレットを作っては利用してきました。このブログでもブックマークレット関連のネタは書いてきましたが、ブックマークレットそのものの作り方に関してまとめていなかったので、あらためて書いてみます。

JavaScript実行済みのDOMをHTMLファイルとして保存するブックマークレット

スクレイピングネタです。 クローリング+スクレイピングするにあたってパスワード認証の掛かったページから情報を取得するのはなかなかに厄介な課題ですよね。 今回は、いま表示しているページをHTMLとして保存するスクリプトをブックマークレットにしてみま…

指定した範囲の整数配列の作り方 in JavaScript ES6

私はES6のコードを書いてみるなかで昇順に並んだ整数の配列が必要になりました。同時に、ES6にはそういう配列のための新しいコンストラクタがあるんじゃないか?と思ったのです。ES6にはこのようなrange()関数はありませんが、大丈夫。Python風の解法がある…

サーバーでの重い処理の経過をリアルタイムに通知する

Webアプリケーションを作るとき、サーバーで重い処理を実行する際にはどうしても途中経過を通知したくなります。 この場合の重い処理とは完了までに時間が掛かる処理という意味合いです。 リクエストから結果の表示まで10分待たされる処理があったとして、「…

シーケンス図をお手軽に保存できるtxt2seq2pngを作りました。

つい先日、js-sequence-diagramsというめっちゃっくそ便利なJSがある事を知りました。 シーケンス図をテキストベースで記述したものをSVGにレンダリングしてくれるというイカしたJSです。 ただ欲を言わせてもらえるならば、出来上がったシーケンス図を画像と…