JSONをURIに埋め込んでも%地獄にならない「Rison」のススメ - Qiita
さくらのクラウドでバックエンドを担当しております、@townewgokgok と申します（記事はフロントエンド寄りの記事になります）。これは さくらインターネット Advent Calendar 2018 11日目の記事です。 JSONのように階層化された値をURLに埋め込みたいことってありませんか？ たとえば 価格.com の商品検索結果ページ のように、リンクを開いたら検索フォームの内容が復元されて、URLのコピー時に見ていたものがそのまま表示されて欲しい。 これを実現するには、従来なら文字列のキーバリューとしてごく一般的な application/x-www-form-urlencoded 形式でURLにパラメータを埋め込むところです（上記の価格.comの例でもやはりそうなっています）。ただ、そこそこ複雑な検索フォームの値をいちいちこの形式にまとめたり復元したりするのはわりと面倒です
JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方
JSer.infoは2011年1月16日に公開したJavaScriptの情報サイトで、2021年1月16日で公開してからちょうど10年です。 JSer.infoでは、10年間で10201サイト紹介し、522コの記事書いてきました。 JSer.infoの紹介したサイト数(累計)。ソース 10年間途切れることなく毎週更新していて、月別の記事数は毎年同じ推移です。 JSer.infoの月別の記事数。ソース この記事では、10年間やってきたJSer.infoの目的を振り返り、 JavaScriptの情報の集め方、書き方、まとめ方について書いていきたいと思います。 ⚠️ すべてを書いているのでものすごく長いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 この記事をTweetする Twitter: #jserinfo GitHub Issue: JSer.in
視聴メモ : Why JavaScript Programmers Hate You: an ode to dynamic languages, Jan Vitek - ntaoo blog
www.youtube.com 2013年のプレゼン。ここでのYouは、このプレゼンの聴衆である言語研究コミュニティを指している。以下視聴メモ。 Why JavaScript Programmers Hate You: an ode to dynamic languages, Jan Vitek 型は生産性を上げるいう伝統的な信念がある。静的型付けは、より良いものだと。目標は正しさ。 その伝統的信念に反して、実世界では、動的型付け言語がデザインされ続けてきた。VB, Python, R, Lua, Java (= static + dynamic), JavaScript, PHP, Ruby, Clojure。 Adobe Lightroomは、大半のコードがLuaで書かれている。簡単に書けるし組み合わせることができるから。スウェーデンで500万人の顧客が利用するペンションの管理システム
イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあるので、最後まで頑張りたいと思います。 前提としてブラウザの実装の詳細や仕様については分からない部分も多いため、間違っている部分もあるかもしれません。 もし、お気づきの点などありましたら、教えていただけると助かります。 目次 目次 同期と非同期の比較その1 同期的実行 非同期的実行 同期的実行 非同期的実行 同期と非同期の比較その2 同期的実行 非同期的実行 並行処理と並列処理 非同期API 非同期APIの特徴 その他の非同期API addEventListenerに渡したコールバックの同期的実行 非同期処理のユースケース コールバック Pro
AudioWorkletについて調べたメモ - console.lealog();
[WebAudio API] AudioWorklet の使い方 | g200kg Music & Software この大先生の記事を読んで、自分の知ってるWebAudio知識のアップデートをしときたいなーと思って調べたことのメモです。 なので重複する部分もあるけど、+ αな部分もあります。 20191129: あらためて読み直したけど、特に更新すべき部分はない そもそもAudioWorklet Enter Audio Worklet | Web | Google Developers `ScriptProcessorNode`の後継 重い音声処理をメインスレッドでやりたくないよね いちおうAudioスレッドでやってたけど、完全ではなかった 今度こそAudioスレッドだけでできるよ 2017年12月の記事なんかこれ・・時代を感じる・・。 コード まずは使う側。 // app.js
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
Array.prototype.sort について
JavaScript の配列にはsortメソッドがあり配列のソートを実行することができるけど、この配列のソートの中の実装はどうなっているのかという話。v8 における配列ソートについての記事が大変参考になりました。 Chrome(V8)の実装はarray.jsにあり、配列の要素数が 10 以下の場合はInsertion sortを使い、それ以上の場合はQuicksortを利用する。Insersion sort の計算量は O(n^2)であるけど、少ない要素数の場合は Quicksort などより高速になるらしい。直近の commmitを見る限りだと、Chrome 69 か 70 あたりでTimsortに置き換えるつもりらしい。Timsort は average が O(n log n)で、最悪でも O(n log n)の計算量で済む。Quicksort を TimSort に置き換えるつもり
[メモ] JavaScriptエンジンを作る話 - Qiita
Rapidusの進捗を記していく。逐次更新 どんなJSエンジンを目指してるのか 自作ブラウザ(Naglfar)に組み込めるようなもの ↑でも当分はNodeJSみたいなのを目指すと思う (それ単体で使えるような物、という意味) JITに対応し、速い (LLVM使う?) 8/11追記: Tracing JITが部分的に動いた 課題 グローバル変数の呼び出し、遅い ネストした関数、実装してない 実装しました VMとVMのコード生成に関するコードのテストを書いてない (最近書き始めた) よく考えたら、字句解析器がコメントに対応してない 対応 参照渡しできない 進捗 日数は、Gitでコミットした日を数えてます。(7/1 7/2 7/5 とコミットしていたら、7/5は3日目としてカウント) 1日目 字句解析器がほぼ完成
![[メモ] JavaScriptエンジンを作る話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e9dcd766f1c17add475d0d299220e5dc8e8d604/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNjk2MjIlMkZwcm9maWxlLWltYWdlcyUyRjE2NzYwMjQ2OTE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MDhiYmI2ZDhiN2ZhYWVhMjU3NDBhNjRiZTU4MmMxNmI%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D9c18cc502b323675dcf107e0b8047f47%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUUzJTgzJUExJUUzJTgzJUEyJTVEJTIwSmF2YVNjcmlwdCVFMyU4MiVBOCVFMyU4MyVCMyVFMyU4MiVCOCVFMyU4MyVCMyVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MiU4QiVFOCVBOSVCMSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWM1NDgzZjQ0ZWNlYjdjYzJhOTJmODAyNWNjOTMxMGUw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB1aW50MjU2X3QmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0xZWZjMjE3OGFiYjE1MDk5YTY3MjdhZGYwNDRjMGFhZg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D9825707c8f559735775f9f1ab7769d8a)
差分検出アルゴリズム三種盛り - Object.create(null)
こんばんは. 気がつけばもうずいぶんと涼しくなってきました. 勢い余って凍ってしまったりせぬよう, くれぐれも普段の言動にはお気をつけください. はじめに さて, 我々人類にはどうしても二つの文字列 (あるいは行ごとに区切られたテキスト) 間の差分を求めなければいけない瞬間が発生します. 先人たちはそういった時のために diff のようなツールを開発し, それを利用することで文明はめざましい発展を遂げてきました. しかしながら, 使用するアルゴリズムを比較検討したい場合, 「差分」の定義を変えるなどして既存のアルゴリズムに変更を加えたい場合, diff のない異世界に飛ばされて自分で実装しなければいけない時などにおいては, 差分検出アルゴリズムについての理解が必要不可欠です. というわけで, この記事では文字列間の差分検出とは何かということと, 差分を求める三種類のアルゴリズムの紹介・解説
TypeScriptセッションの全スライド＆動画
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド＆動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 「第2回 Build Insider OFFLINE： TypeScriptスペシャル（東京で開催）」の各セッションのスライドと動画を掲載しています（関連：Togetterまとめ）。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部（大阪で開催）」の各スライドも掲載しています。 第2回 Build Insider OFFLINE： TypeScriptスペシャル
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
【JavaScript】 createEventとinitMouseEventを覚えた 【メモ】 - nplll
JavaScriptの演習がてら、Greasemonkeyをいじったんですが、createEventとinitMouseEventを使ったらめちゃくちゃ簡単になることが分かって凄く嬉しくなった。createEventはDOM2にあるけどinitMouseEventはGeckoのDOMメソッドぽい。でもまぁ、Greasemonkeyをいじるぶんにはそれで十二分。 document.createEvent – MDC event.initMouseEvent – MDC 以下、自分用のちょっとしたメモ。 document.createEvent 「document.createEvent」は、指定されたタイプのイベントを生成するメソッド。 var evt = document.createEvent("MouseEvents"); 生成したイベントは「element.dispatchEvent
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する - Qiita
npmにライブラリをアップロードするときに.npmignoreで生成物を公開/制限するパターン - Qiita
PC