はてなブックマーク

Railsのプロジェクトを書いていたところ、ある1つのGemの存在を知りましたが、そこから派生していろいろなことに考えが思い至っていきました。 therubyracerとは Railsでは、JavaScriptやCSSといったアセットの生成用としてSprocketsという仕組みが組まれていますが、CoffeeScript、Uglifier、autoprefixerなど、アセットのコンパイルにはJavaScriptで書かれたコードを多用するものなので、execjsという仕組みが入っています（過去に自分が書いたもの）。 そして、JavaScriptを動かすランタイムが必要なのですが、Unix系では多くの場合、V8エンジンを組み込んだtherubyracerがよく使われて…いました。 問題点 therubyracerはV8を細かく制御できる…のはいいのですが、細かなところまで使っているのが仇とな

ふつうにvalueを書くことができない<input type="file">ですが、ブラウザによっては動的な設定もほぼ自由に行えることが判明しました。 <input type="file">へ値を設定する 入力するものがファイルである以上、<input type="file">に対してvalueは（空にするvalue = ''を除けば）使えないのですが、別ルートとしてfilesというプロパティがあります（MDN）。ここには選択したファイルのリスト（multipleでなければ1つだけ）が入ったFileListオブジェクトが入っていて、また代入することで設定が可能です。 FileListって、何？ ところが、filesに代入するものもFileListオブジェクトでなければならず、代わりにFileの配列を持ってきてもエラーになります。しかも、new FileListも動かないため、一見すると他の

Railsで運用していた本番環境を、マイグレーションの加減で止めてしまいました。 経緯 AWS上にRailsで作ったプロジェクトがありまして、環境管理をElastic Beanstalkで行っていました。毎週1回、人の少ないタイミングに更新を行っていたのですが、あるときに反映したところで、マイグレーションが全く進まなくなってしまいました。 原因 もちろん、開発環境で同じマイグレーションは回していたので、マイグレーションの記載ミスではなかったのですが、本番環境にアクセスがあった中でマイグレーションを動かしてしまったこと、そして作成するマイグレーションが新しいテーブルを作るようなものではなく、既存のテーブルの定義を書き換えるものだったがために、ロックが絡み合って一向に進まなくなってしまったのでした。 その場での対応 ひとまず、強引にデータベースサーバを再起動して元の状態に戻して、古いバージョン

ひょんな拍子に、JavaScriptで「ガ」のような濁点付きの仮名を「カ」に直さないといけなくなったのですが、テーブルなしで対応できることが判明しました。 NFCとNFD 「ガ」と「ガ」、肉眼で見ればほぼ違いがないですが、データとしては全く別物になっています。 ガ…文字コードは\u30ac、濁点まで含めて1つの文字 ガ…文字コードは\u30ab\u3099、「カ+結合文字の濁点1」 このように、Unicodeでは、「複数のコードポイントを結合した文字」と「結合した状態で1つのコードポイントに登録された文字」の両方が存在していることがあります。視覚的にも意味的にも全く同じものが別なコードで表されていると（正準等価）、検索の際に厄介です。 そのようなときに役立つルールとして、Unicodeは正規化の手順も定義しています。これは4つありますが、まずは2つを取り上げます。 NFD…正準等価な文

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。 ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この「★★★★」は、「守らないと正常動作しなくなる」レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。 eslint

Babelで変換されたあとのコードを見ると、一見無駄にも思えるコードが生成されていたのですが、実はそれが必要だった、というお話です。 Template Literalとは ES5までのJavaScriptでは、文字列を合成するには「1つ1つ+演算子で連結していく」「Array.prototype.joinで連結する」などの手法があったのですが、どちらの方法にしてもどのような構造の文字列ができるか、分かりづらいものでした。 ES6では、他言語のように文字列途中で式展開ができる、Template Literalが登場しています1。引用符として`...`を使い、式展開はその途中に${...}と書くという、他言語と比べてもそこまで違和感のない記法となっています。 Babelでの変換結果 で、例によってIEは非対応なので（MDN）、IEを切り捨てられない環境ではBabelでの変換が必要となります。こ

ReactのJSXでも子要素を定義できますが、これが結構面白いものでした。 自作エレメントにも子要素 ReactのJSXでは、（DOMを組み立てるものである以上当然ですが）<div>の中に<a>を書いて、そしてさらに文字列を書き込む、ということが可能です。 そして、これはHTML由来のエレメントだけでなく、自作のコンポーネントでも実現可能です。 このように、子要素はchildrenというPropとして渡ってきます。 childrenの中身が知りたくて では、このchildrenには何がどのような形式で来るのでしょうか。JSXの変換先であるReact.createElementのソースコードに当たってみました。挙動はchildrenの数によって違います。 0個…childrenにはpropとして渡したchildrenが（もしあれば）渡される 1個…childrenには唯一のchildren引

React Hooksを使っていくと、今までの感覚ではうまくいかないことがよくあります。 大前提：関数内の関数はクロージャを形成する ReactではなくJavaScriptレベルの話ですが、関数内のローカル変数は関数の実行ごとに生成されます。そして、関数Aの内で別な関数Bを作成して、Bの中からAのローカル変数を参照すると、Aの実行によって生成された変数が、Bから使うためにAの終了後も生き残ることとなります。これが「クロージャ」です。 React Hooksの場合 React Hooksを使う場合、忘れてはならないのは、コンポーネントの描画ごとに関数が再実行されることです。ただ単にコンポーネント内で書いた関数ももちろんクロージャになりますが、コンポーネントの描画（=再実行）ごとに関数が再生成されますので、そのままReact内のイベントハンドラなどにセットしている場合は値の束縛の問題は生じませ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Hooks関数を関数コンポーネントやCustom Hooksの外から呼んではならない Hooks関数の呼び出しは、関数コンポーネントやCustom Hooksのトップレベルに置かなければならない ある関数コンポーネントについて、Hooks関数の呼び出しは毎回同じ順序・回数でなければならない 掟の存在理由 クラスコンポーネントであれば、明確なデータの保管場所として「インスタンス」がありますし、前にWeakMapへの保管をしてみたときも、保存用のWeakMapオブジェクトと、キーとなるオブジェクトが存在しました。では、そういったインスタンスとコード上で結びつかない関数コンポーネントの場合、Hooksのデータをどう管理すればいいのでしょうか。 実は、それはReact内部でのコンポーネント管理に組み込まれています。コンポーネントと関連付けたデータ領域が存在して、そこへHooksの実行に関して必要な

まずはじめにお断りしておきますが、タイトルだけを見て、「Reactなどで、JavaScriptとCSSを融合させる」ような技術を連想した方は…大外れです。 カレンダーのとおり、これは現代には伝わっていないロストテクノロジーです。 JavaScript Style Sheet（JSSS）とは HTML5では<style>のtype="text/css"を省略できるようになりましたが、現実問題としてブラウザで直接使う、他のスタイルシート言語は存在しないように思えます。 …と思いきや、かつてtype="text/javascript"で書くスタイルシート言語が存在しました。これが、JavaScript Style Sheet、略してJSSSです。 文法概要 現代でもJavaScriptで要素ごとにCSSを指定する際にelement.style.marginLeft = '20px';のように書け

強力かつ柔軟なクライアントサイドキャッシュを適用できるService Workerですが、ブラウザ内で動くJavaScriptである以上、クロスドメインによる制約がかかってきます。 クロスドメインなソースからWorkerの登録 Service Workerはnavigator.serviceWorker.register(pathToJs)で登録しますが、このpathToJsにはクロスドメインなURLは渡せません。 ただ、アセットだけ別サーバに置いているような場合など、クロスドメインで登録したくなることがあるかもしれません。このような場合、 同じドメインあるいはBlobの形で、「importScripts()するだけのService Worker」を登録する importScripts()はクロスドメインでも問題なし という2段階を踏むことで、クロスドメインに置いたJavaScriptのコ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactで最初から最後まで作るときは、「全機能が1つの巨大なコンポーネントに入っている」「React外で書くコードは、その巨大なコンポーネントを、変化するようなpropsを指定せずrenderするだけ」というようなコードになることも多いかと思います。多くのReactの解説もそれが前提となっています。 ただ、別な仕組みで作ったHTMLにReactを混ぜこみたい、あるいは既存のサイトを徐々にReactへ移行したい、という場合には、部分的にReactを入れることが必要となってきます。もちろん、Reactでもそのような使い方は可能です。 Fa

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JSONは身近なフォーマットですが、手で書こうとすれば案外に書きにくいものです。実は、そういった問題をクリアするような「JSON5」というフォーマットがあって、しかも多くの人が利用可能な環境にあったりもします。 JSONの書きにくさ JSONはJavaScriptのオブジェクトリテラルから派生したものですが、データ交換用のフォーマットという性格もあってか、JavaScriptと比べて制約もあります。 オブジェクトのキーは二重引用符で括る必要がある（一重引用符や、何も書かないのは禁止） 文字列も二重引用符で括る必要がある（一重引用符は禁止

JavaScript界で非同期処理の切り札的存在となっているasync-await、そして軽やかにループ処理を行っていくforEach。ただ、この2つを合わせて使おうとしたら、うまくいきませんでした。 素直に書いてみる 準備 まずは、非同期実行するもののモデルとして、こんなコードを書いてみます。 const sleep = time => new Promise(resolve => setTimeout(resolve, time)); const sleptLog = async val => { await sleep(1000); console.log('sleptLog', val); };

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Babel 7がリリースされたということで、気になる点について調査を行っていたのですが、その過程で一部のプラグインにlooseモードがあるということを知ったので、それについてまとめてみます。 looseモードとは JSXのようなそもそもJavaScriptにないものは別として、Babelのプラグインが変換する各文法構造については、EcmaScriptとして厳密な動作仕様が決まっています。 ただ、変換して実行する過程で、「厳密に言えば仕様どおりになっていなくても、重箱の隅はつつかないから処理が早い/コードが短い、実用充分なコードになればそ

CSS Transitionを使うことで、JavaScriptなしでアニメーションを行えるようになりますが、凝ったことをしようとするとハマることがあります。 なお、典型的なパターンとして、「1つのクラスを付け外しする」ことでアニメーションさせるようなものを前提とします。 ふつうにクラスを切り替えた場合 ある意味当たり前なのですが、Transitionが絡まない状態でクラスを切り替えれば、すべての値が新しいクラスで適用されるものに切り替わります。 CSS Transitionの場合 transition:を指定すると、指定したプロパティは即座に変化せず、transitionの指定に従って変化します。ここで注意しないといけないのは、transitionプロパティ自体は、クラスの切り替えと同時に変化してしまう、ということです。つまり、変更後のクラスで適用されるtransitionの指定に従って、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ES6 Moduleには、import ～;と書く静的なものだけでなく、import()と関数っぽく書く、動的なものも登場しようとしています。すでに一部のブラウザに実装されていますが、Webpackでも利用可能です。 事前準備 Webpack本体はバージョン3でもすでにimport()を使えるようになっていますが、周辺ツールは対応するために事前準備が必要となります。 babel - import()をシンタックスエラーとせずスルーさせるために、babel-plugin-syntax-dynamic-importが必要です。 eslint - 標準ではimport()を文法エラーとしてしまうので、"parser": "babel-eslint"とする必要があります（もちろん、babel-eslintのインストールも必要です）。 コードを書いてみる あとは特に設定は必要なく、import()で

npmには多数のライブラリが存在しますが、自分でライブラリを作ろうとしたところ、正しい設定にたどり着くまでにちょっと手間取りました。 ライブラリの特徴 ブラウザやNode向けのプロジェクトの場合、ビルドした後は読み込んで使うだけなので、外部との関係性を考える必要はそこまで大きくありません。一方で、ライブラリの場合は、 ライブラリを読み込む側との連携（CommonJS、ES6 Module、AMD、UMD） ライブラリ内で使うライブラリの切り離し（そのままにすると、他のライブラリを取り込む形となってしまい、あとで依存ライブラリを差し替えることができなくなる） といった処理が必要となります。ただ、これらはWebpackでも実現できます。 ライブラリモードの利用（&エクスポート） まず、Webpackをライブラリのビルドに使いたい場合、output.libraryに名前を指定します。この名前は、

Webpackを使えばCommonJSに準拠した形でJavaScriptどうしの依存関係を構築していけますが、状況によってはWebpack外との連携を取っていく必要が出てきます。 Webpack管理外のライブラリを使う プロジェクトを作った後からWebpackを導入したなどで、Webpack管理下のコードから、外部にあるライブラリを呼び出す必要があるかもしれません。 また、jQueryなどの著名なライブラリの場合、「そちらはWebpackのバンドルに含めず、既存のパブリックCDNを使いたい」というような状況も、発生するものです。 このような場合、いちおう「グローバルにあるjQueryをそのまま使う」という選択肢も、ないわけではありません。ただ、それをやると、依存関係がはっきりしなくなって、Webpackの魅力が半減してしまいます。また、Node経由で入れるライブラリなどでは、きちんとreq

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? MySQLで、BMP外の文字を入れる場合には、utf8ではなくutf8mb4が必要となります。ただし、ただ書き換えただけではうまくいかない部分がありました。 TL; DR MySQLのインデックス長は767バイトまで 1文字4バイトのutf8mb4では191文字が限界 その（文字コード/カラム長/インデックス）、必要ですか？ エラーを食らう モバイル向けのサービスを作ることになったのですが、Unicodeの絵文字入れられるようにすることが必要だろう、ということで、文字コードをutf8mb4とすることにしました。で、いつものようにマイグレ

onLoad系のイベントとPromiseは、相性が良いのではないかと思い始めました。 onLoad系のイベントをそのまま使うと onloadやDOMContentLoadedを筆頭に、JavaScriptの世界には「ロード完了時に」何かを実行するようなイベントがあります。ただ、そのままイベントにセットしようとすると「すでに終了済みだった」というような事態が発生することがあります。 また、「複数の条件が満たされてから実行したい」ということがあるかもしれません。 Promise化するメリット このような状況にも、Promiseなら柔軟に対応できます。 遅れてのセット…Promise#thenはresolve前でもresolve後でも問題なく動く Promiseはデフォルトで非同期実行 複数の条件…Promise.allで取れる 例えば、DOMContentLoadedをPromise化してみる

JavaScriptは、「Don't break the web」ということを念頭に、仕様拡張なども構成されていっているのですが、時として妙なものも発生してしまいます。 falsyな値 JavaScriptにはfalsyな値が7つ（0、-0、NaN、false、null、undefined、''）ある、ということは有名かと思います。…で、MDNを見てみると、8つ目の値が存在します。それが、document.allです。 仕様としての挙動 通常のJavaScriptにfalsyとなるオブジェクトは存在しませんから、明らかに目立つ挙動なのですが、WHATWGの仕様を参照してみると、さらにすごい挙動をするとのことでした。 typeof document.all === 'undefined' document.all == null、document.all == undefined（===では

JavaScriptで書いていた複雑な部分をフレームワークで運用する形としていくと、jQueryの必要性がどんどん減ってきます。そこで、既存のjQueryコードもVanilla JSで書き直すこととしていったのですが、イベント処理まわりではjQueryに慣れた観点からすれば、意外なことが多かったです。 なお、「イベントをaddEventListenerでセットする」というのは、当たり前すぎるので省略します。 「イベントハンドラ」と「デフォルト処理」の区別 jQueryの場合、.focus()とすれば「フォーカスを当てる処理」と「イベントハンドラ」の両方が動きます。それに対して、JavaScriptでは、この2つの操作は別個に行う必要があります（ただし、.click()だけは例外で、実際にクリックしたときと同様に「イベントハンドラ」→「クリックしたことによる動作」と進んでいきます）。 まずは

Riot 3.7にアップデートしたところ、今まで動いていたコードがうまく動かなくなってしまいました。 falsyな値 JavaScriptには、falsyな値（条件式に入れるとfalseとして処理される値）が7つあります1。 false null undefined 0 -0 ''（空文字列） NaN Riot 3.7では、このうち数値でない4つ（false、null、undefined、''（空文字列））の挙動が3.6以前と違ってきます。 実際にやってみた まずはこちらのPlunkrを御覧ください。ラジオボタンを生成して、onchangeでvalueをalertするようにしてあるだけですが、false、null、undefined、''の4つは、「on」という妙な値を表示します2。これは、Riotで値のないvalue属性を削除してしまっているからということです（Issue）。そして、va

Railsのリファクタリングの際に、クラスを細かく分ける手段として、Railsのdelegateを使ってみました。 直しづらい、クラスの長さ プロジェクトにRubocopを入れて、ヤバそうなコードをチェックしているのですが、書式の問題はものによっては自動解決も可能ですし、長すぎるメソッドも、どうにか分けられるものです。 一方で、「長すぎるクラス」というのは、そう簡単に分割できるものではありません。クラスは最終的に1つものとして動作させることになるので、メソッドみたいに「一部切り出す」というのが、あまりスッキリしません。 Moduleは使える、けど もちろん、一部を別なモジュールに分けてincludeする、という手段はあります。 Railsのモデルではhas_manyとかvalidatesとか、DSL的なメソッドを多用しますが、これに関しては「クラスに直接書く」あるいは「Concernのin