JavaScript
どうも、趣味で JavaScript を書いている三井です。 先日、 JavaScript つまみ食い LT 会 というイベントを主催しまして。 そのメインの LT 会後の懇親会で「懇親会 LT」と銘打ったゆるゆる LT をやりました。 私も参加して「JavaScript で Hello,world! に…
ピクロスというパズルをご存知でしょうか。お絵描きロジック, ののぐらむ などとも呼ばれる、縦横に並んだ数字をヒントにドット絵を完成させるパズルゲームです。 WordPress でピクロスを作問・投稿するためのカスタムブロック wp-block-nonogram を作成した…
やんなきゃいけないのにやる気が出ないことありませんか? ポチッと押すだけでやる気がみなぎってくるスイッチがあればいいと思いませんか? やる気スイッチを作りました 使用例 todays-mitsui.github.io ※ やる気が出るとは言ってない 私からは以上です。
JavaScript においては typeof や constructor を参照するだけでは関数と class を見分けることができません。 // ただの関数 function myFunction() {} // class class MyClass {} // typeof では見分けられない typeof myFunction; // => 'function' typeo…
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)…
「ページ A」から「ページ B」へ遷移した後に「ページ B」で hidtory.back() が実行され「ページ A」に戻ってきたとき、「ページ A」で走っていたスクリプトの挙動について考えよう。 ちなみにブラウザの「戻る」ボタンでページを戻ったときにも全く同じ議論…
ブラウザにフォントが読み込まれたタイミングで JavaScript の処理を実行したいと思ったとき、以前であればサードパーティー製のライブラリを使っていた *1 けど、最近はブラウザの標準 API だけで読み込みタイミングの判定ができるようだ。 Document.fonts …
やっていきましょう。 実装 /** * 指定した範囲の整数をランダムに取得する * * @param {number} min ランダムに取得したい整数の下限 * @param {number} max ランダムに取得したい整数の上限 * @returns {number} min 以上 max 以下の整数 */ function rand…
意外と需要のある JavaScript のデータを CSV として保存するスニペットを書き留めます。 var data = [ ['name' , 'age', 'gender'], ['Andrew', 26 , 'male' ], ['Lisa' , 21 , 'female'], ['Fred' , 41 , 'male' ], ] このような多重配列を元にして、 この…
約5ヶ月前にこんな記事を書いたわけですが、 blog.mudatobunka.org この記事が今になってよく見られるようになってます。 先週までは毎日1桁のPVをコツコツを積み重ねていたのが本日だけで130PVです。 どこかの誰かに拾っていただいたんでしょうね。はてブも…
takatoh 様 が同じ問題を Ruby と Scheme で解いてくださいました。許可を得て転記させていたいています。 Ruby 版の簡素さはさすがという感じです。そして、Scheme 版の S式 は慣れないと読めないし分からないのが面白いですね。takatoh 様、本当にありがと…
これまでjQueryの使い方についてねちっこく解説してきましたが...。 今回は「使い方」ではなく「選び方」です。 ビギナーズからよく飛び出す質問「どのバージョンのjQueryを使えばいいの?」について。 jQueryは最新版だけでも全部で8つ 2016年8月末時点でjQ…
さて、前回までjQueryプラグインの基本的な使い方をおさらいして、さらに起動スクリプトについて詳しく解説してみました。 今回は、これまで意図的に触れずにスルーしてきた部分をピックアップします。 起動スクリプトを囲っているよく見るアレ についてです…
前回はjQueryプラグインを設置するための基本的な流れを解説しました。 今回はプラグインを使いこなすための要(かなめ)になる 起動スクリプト についてイメージしやすい例で解説していきます。 起動スクリプトとは 前回解説しましたが、jQuery本体やプラグイ…
jQueryプラグインの 作り方 ではなく、使い方 です。 Web上には多くのjQueryプラグインが公開されていますが、どのプラグインにも共通する基本の使い方を解説します。 普段、サンプルコードをなんとなくコピペするだけで済ませてしまっている人も、基本さえ…
React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか…
lazex さまのはてブコメントを受けて、animation プロパティを使った改良版を書きました。完全にこっちの方が良いので、参考にするならばどちらかというと新実装の方で。 lazex さま、ご指摘ありがとうございます。 JavaScript のコールスタックが溢れていた…
最近のフロントエンド開発に関して、 jQuery への依存を極力減らしてPure JS だけでいろいろな処理を書くように心掛けています。 具体的には ECMAScript2015 で書いたものを Babel でトランスパイルして、Browserify でバンドルするというスタイルですね。ホ…
これまでプライベート・業務の両面で個人的にブックマークレットを作っては利用してきました。このブログでもブックマークレット関連のネタは書いてきましたが、ブックマークレットそのものの作り方に関してまとめていなかったので、あらためて書いてみます。
スクレイピングネタです。 クローリング+スクレイピングするにあたってパスワード認証の掛かったページから情報を取得するのはなかなかに厄介な課題ですよね。 今回は、いま表示しているページをHTMLとして保存するスクリプトをブックマークレットにしてみま…
私はES6のコードを書いてみるなかで昇順に並んだ整数の配列が必要になりました。同時に、ES6にはそういう配列のための新しいコンストラクタがあるんじゃないか?と思ったのです。ES6にはこのようなrange()関数はありませんが、大丈夫。Python風の解法がある…
Webアプリケーションを作るとき、サーバーで重い処理を実行する際にはどうしても途中経過を通知したくなります。 この場合の重い処理とは完了までに時間が掛かる処理という意味合いです。 リクエストから結果の表示まで10分待たされる処理があったとして、「…
つい先日、js-sequence-diagramsというめっちゃっくそ便利なJSがある事を知りました。 シーケンス図をテキストベースで記述したものをSVGにレンダリングしてくれるというイカしたJSです。 ただ欲を言わせてもらえるならば、出来上がったシーケンス図を画像と…