はてなブックマーク

Emma Bostianの“De-Coding The Technical Interview Process”では、Javascriptで書かれたソートアルゴリズムがわかりやすく紹介されている。読みながら、Rustのいい紹介ないかなと探したら、ちょうどいい投稿が見つからなかったので、自分で修正しながらまとめた。 エピステミックステータス：学習中 （詳しい説明は今度追加する予定） 以下がクイックソート、マージソートとバブルソートの例： バブルソート これは一番簡単なやつ。 fn sort(array: &mut Vec<i32>) { for i in 0..array.len() { for j in 0..array.len() - i - 1 { if array[j + 1] < array[j] { // let tmp = array[j]; // array[j] = arr

デバッグにはconsole.logを使いがちですが、新しいコードを理解する場合はデバッグ機能の方が便利です。VSCodeでJavascriptとTypescriptをデバッグするのが思った以上に簡単です！ ①　デバッグしたいファイルを開けて、デバッグアイコンをクリックし、Debug with Node.jsをクリックします 以上です。設定したブレークポイントがあれば、ちゃんと止まってくれます！ ②　たまには、トランスパイルしないと実行できないJSもあるので、もちろんそのままデバッグはできません。この場合は、もう少しだけ複雑になりますが、その方法も下で紹介します。 トランスパイル必要なJSの場合と、Typescriptの場合は、手順が似ているので、一緒に紹介します。 ①　デバッグしたいTSファイルを開けて、デバッグアイコンをクリックし、Create a launch.json fileをクリ

理由はともかく、 まずconvertVueToReactツールの動きがよくわかるGIFを用意しました。 なぜこんなことができるのか？ 気づいている人もいると思いますが、ReactもVueも、内部にDOMの表象を持っているからです。DOMの表象というのは、DOMの構造とまったく同じ構造を持っている、単純なオブジェクトです。実際にコンソールで、Vueのappインスタンスにある_vnodeプロパティを調べてみると、DOMに関する情報がわかります。 Reactは、React.createElementというメソッドを持っているのですが、それもまさにDOMの表象を作るためのメソッドです。React.createElement("div", {}, ...children)というふうに使えば、ReactのDOM表象が出来上がります。ここでいうchildrenも、それぞれReact.createElem

FLIP手法って何？ 60fpsでスムーズなアニメーションを達成することは簡単ではない。ピュアなCSSでできることも多いが、DOMの変更とJavascriptがかかわるアニメーションは、メインスレッドが忙しいと、その影響を受けるので遅延することがある。 たとえば、setIntervalを使った、positionを変える「移動」のアニメーションは、設定したインターバルの値にもかかわらず、他に処理しないといけないことの多さによって実行が遅くなることがある。60fpsをはるかに下回ると、アニメーションがカクカクしてしまうのでユーザーにとって悪い体験になる。 が、Paul Lewis氏が考えたFLIP手法によって、複雑なアニメーションでもスムーズに実行することができる！ FLIPとは： 1. First : 最初（のDOM位置などの状態）と 2. Last : 最後（のDOM位置などの状態）を 3

Streams APIがブラウザーで使えるようになってからしばらく経つけど、Reactとの相性はどうだ？個人プロジェクトに導入するとき、試行錯誤した結果をここに投稿する。 TL;DR 細かい処理が多くて、抽象化してカスタムなHookができたので、以下のGistからコピペできる https://gist.github.com/jlkiri/bc0a9bbf5d81c6f8bbe1cfd59a106380 また、その動きが確認できるデモが以下のリンクでアクセスできる（12MBの宇宙の画像をダウンロードする） https://fetch-stream-hook-demo.jlkiri.now.sh/ (Githubレポジトリ: https://github.com/jlkiri/fetch-stream-hook-demo) 注意点 結論から言うと、MDNに乗っている例をそのまま使えばいいのだが

前の記事では、関数合成の力について語りました。 いいねの数からすれば、そこそこ興味を持ってもらっているようなので、 今回は、オブジェクトの合成の力について語ろうと思います。 オブジェクトデザインの二つのパターン Javaだろうが、C++だろうが、Javascriptだろうが、オブジェクトを作らないといけないときは絶対あります。 それぞれのオブジェクトは何を表すか、そしてどう自分の役割を果たすか検討するときに、主に二つのパターンがあります：継承 と 合成です。 継承 Qiitaを開いている時点で、「継承」という言葉を耳にしたことが一回はあるでしょうが、具体的に考えてみましょう。 ゲームの開発を頼まれたあなたに、クライアントはこう言います：「ゲームには犬とロボットがあります！犬は吠えます！ロボットはホイールついてて動き回ります！」 そこで、「なるほど」と思って、以下のようなクラスの図を作ります

Javascriptで役に立つ関数型プログラミングというシリーズを始めます。 今回は、関数型プログラミングの中心的な概念、関数合成について書こうと思います。 関数合成とは〜という学術的な話をするとキリがないので、例を見ていきましょう: const addFive = num => num + 5; const double = num => num * 2; const addFiveAndDouble = num => double(addFive(num)); addFiveAndDoubleはaddFiveとdoubleを合成した関数になります。タスクによっては、二つ以上の関数を合成することが多いと思います。しかしそうなると、コードが以下のように読みづらくなります: