WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly（Wasm）は、ブラウザー上で直接動くプログラミング言語として、JavaScriptを置き換える期待が寄せられますが、実際にWasmが果たすべき役割や適したユースケースとはどういったものでしょうか？ Wasmの動作を体験するチュートリアルとあわせて、山本悠滋（igrep）さんが解説します。 WebAssembly（以下、略称の「Wasm」と呼びます。「キャズム」や「～イズム」などからの類推なのか「ワズム」と発音するようです）とは、ブラウザーをはじめとするさまざまな環境で動作する、仮想マ
RedwoodJS を Ruby on Rails と比較してみる
RedwoodJS RedwoodJS は JavaScript/TypeScript で構築されたフルスタック Web アプリケーションフレームワークです。RedwoodJS プロジェクト自体は Tom Preston-Werner 氏 (GitHub 創設者であり Gravatar や Jekyll などの作成者) が中心となり始まりました。 私自身もつい最近になって同じ職場の @sakitoさんに存在を教えてもらったばかりです。 RedwoodJS は、READMEから抜粋するだけでも、次のような機能を持ちます。 フォーマット・ディレクトリ・ビルドなどに関するデフォルト構成 単一ファイルによるルーティング定義 GraphQL Client / API (with Serverless deploy) の構築 ページ・レイアウトなどのジェネレータ CRUD 操作に特化した Scaffo
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
mrubyをWebAssemblyで動かす（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Tom Black — Ruby on WebAssembly 原文公開日: 2018/04/28 著者: Tom Black 日本語タイトルは内容に即したものにしました。 要約: WebAssemblyがやってきました！やってみたい方は本記事のwasm gemをお試しください。 2018年の世界へようこそ。最も興奮を呼び起こすイノベーションがコンパイラ界隈にも巻き起こりつつあります。ARやVRや機械学習など先端を行く話題はいくつもありますが、ソースコードを機械が実際に理解できる形に変換する役割を担うコンパイラの歴史に比べればまだまだ新顔です。コンパイラの復権は主にLLVMのおかげです（LLVMはモジュール形式のコンパイラインフラストラクチャプロジェクトです）。LLVMの重要性については、Wiredの2013年の記事に的確な指摘が
javascriptのWebWorkerを使ってみた - Qiita
WebWorkerとは？ 初心者です。 WebWorkerとはjavascriptでマルチスレッドを行うための仕組みです。 マルチスレッドとは、複数の処理を同時に行うことです。 例えば、描画処理などで ・データ取得処理 ・取得したデータの描画処理 を同時に行うと描画が滞りなく行われます。 処理を同時に行わない場合は、 の様に処理A、Bを同時に行ってスムーズに描画するという機能です。 （あくまで一例。処理が軽い場合は普通に記述して問題ない） 非同期処理は？ javascriptは非同期処理でpromiseなどありますが、 あれは処理の順番を変えているだけで同時に処理を行うものではありません（でした）。 非同期処理 ＝ 並行して処理を行ってくれる と考えがちですが、javascriptは（原則）違います。 概要とか特徴 概要 ・メインスレッド(main.js) ←メイン処理 ・サブスレッド(d
Vue.js ユニットテストの基本まとめ - Qiita
Vue.js アプリでユニットテストを書くには、Vue Test Utils や Jest など、知っておくべきことがそれなりにあります。 現在、Vue CLI でアプリを作っていますが、ユニットテストを書くために色々と調べないといけませんでした。 今回はその過程で理解した Vue.js でのユニットテストの基本を以下にまとめます。 Vue.js のユニットテスト まず、Vue.js では何を「ユニットテスト」として考えるのかを整理します。 ユニットテストの単位 Vue.js アプリは、複数のコンポーネントで構成され、それぞれのコンポーネントが連動しながら動きます。 そのため、ユニットテストの単位は「コンポーネント」となり、コンポーネントごとにテストを書いていきます。 何をテストすべきか？ コンポーネントごとにユニットテストを書くということですが、コンポーネントのどの部分に対してテストを書
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！ Code for Japan の関さんが SNS でシェアしてて知ったのですが、経産省さんがなにやらオープンソースで住所や電話番号の正規化などなどをするツールを公開したとのこと。 https://info.gbiz.go.jp/tools/imi_tools/ 経産省が住所変換や法人種別名、電話番号の正規化に使えるIMIコンポーネントツールを公開しました。 ソースコードも公開。README にも使い方が丁寧に書かれていました。https://t.co/fPbV00EgZP 素晴らしい動き。こういう... #NewsPicks https://t.co/bew0qGKMFE — Hal Seki (@hal_sk) May 28, 2020 ぶっちゃけ当初はあまり期待
複数ページ間でチェックボックスの値を保持してsubmitする - 電気ひつじ牧場
ページャなどにより複数ページにチェックボックスが配置されている状況を考えます。 要件としては、 ・ページ遷移しても以前チェックした値はチェックされたまま保持されている ・submitした際にチェックしてある値を別ページのものも含め全て送信する というものがあるとします。 チェックした値をどこかに保持させる必要があるわけですが、cookieはjsから操作しづらいのでsessionStorageを使います。 なお以下のコードでは私の好みの関係でjQueryは使いません。 checkbox_page1.html <!DOCTYPE html> <html> <body> <form action='' method='POST' id='boxform'> <input type='checkbox' id='checkbox_1' name='boxes[]' value='1'> <labe
Storageのデータを消去する－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] Storageのデータを消去する このページでは、Storageに書き込んだデータを消去する方法について見ていきます。 cookieの場合、データ保持期間を定めて書き込みを行ないますが、 ローカルストレージではずっとデータが残ります。それで意図的に消去しないと、 ゴミデータが蓄積されてしまうことになりかねません。 Storageのデータ消去方法 では最初にデータを消去する方法を見ておきましょう。 localStorage.removeItem(キー名) ローカルストレージの指定されたキー名のデータを消去します。 sessionStorage.removeItem(キー名) セッションストレージの指定されたキー名のデータを消去します。 localStorage.clear() ローカルストレージの全データを消去します。 sessionSto
Storage - Web API | MDN
Storage.key() 数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。 Storage.getItem() キーの名称を渡すと、キーに対する値を返します。 Storage.setItem() キーの名称と値を渡すと、ストレージにキーを追加し、または既存のキーに対する値を更新します。 Storage.removeItem() キーの名称を渡すと、ストレージからキーを削除します。 Storage.clear() ストレージからすべてのキーを消去します。 ここでは、localStorage を呼び出して Storage オブジェクトにアクセスしています。始めに !localStorage.getItem('bgcolor') というコードを使用して、ローカルストレージにデータアイテムが含まれているかを確認します。含まれている場合は、Storage.getItem() を
From data to Viz | Find the graphic you need
From Data to Viz leads you to the most appropriate graph for your data. It links to the code to build it and lists common caveats you should avoid. What kind of data do you have? Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities. Alternatively, check the complete decision tree.
Opalとは(2018年版) - Qiita
OpalはRubyのコードをJavaScriptに変換するコンパイラです。Opalを使うと、Rubyのプログラムをブラウザ上で動かすことができます。 Opal: Ruby to JavaScript Compiler Opalの用途 ブラウザで動くアプリケーションをRubyで書けるよ、というのが主な用途になります。JSでいいじゃん、という人には訴求しないですけど…、Rubyをブラウザでも使いたい、という人にはとても良くできているツールだと思います。筆者はJSも書けなくはないですがRubyが一番長く使っていて手に馴染むので、Opalの可能性には期待しています。というだけではなくて、DXOpalというゲームフレームワークと、OvtoというWebフレームワークを実際に作って使っています。 Opalでゲームプログラミング DXOpalは筆者が作ったゲームフレームワークです。Rubyist Maga
無限アラートはブラクラではない - Qiita
まずこの記事はChrome最新版に基づくものです。その他のブラウザの情報や検証結果などありましたらコメントいただけるとありがたいです。 今回の無限アラートがブラクラだとして、不安を煽るような記事が多数存在しており、もちろんエンジニアなら簡単にわかることですが、その会社の影響なのかブラクラだと勘違いする人が自分の観測範囲に多くいたので、なぜブラクラではないのか技術的な観点から検証していきたいと思います。 まずブラクラ（ブラウザクラッシャー）は広い意味で使われているので、齟齬が無いようにこの記事内での言葉通りブラクラはブラウザをクラッシュさせるものだと定義します。実際にブラウザがクラッシュする他に著しく不安定になったり、正規の方法で閉じれなくなるようなこともクラッシュに含め、ブラウザのバグに起因するものは除外するとします。 無限アラートがブラクラではないことを検証する前に、ブラクラがどんな物な
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
jQueryはどうやって型判定してるのか - Qiita
jQueryにはtype()という型判定のメソッドがあります。どういう判定をしているのか気になったので、調べてみました。 とりあえずコード 主要な部分だけ抜き出しました。 var class2type = {}; var toString = class2type.toString; jQuery.extend({ /* ... */ type: function( obj ) { if ( obj == null ) { return obj + ""; } // Support: Android <=2.3 only (functionish RegExp) return typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call(obj) ] || "object" : typeof
JavaScriptで即時関数を使う理由 - Qiita
(function (param1, param2) { //処理 }('hoge', 'fuga')); var result = (function (param1, param2) { return param1 + param2; }(1, 2)); console.log(result); //3が出力される。 ズバリ、スコープの汚染を防ぐため。 JavaScriptのスコープ JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ」のみ。すなわち関数は任意にスコープを作るための唯一の手段である。 関数スコープの中でvarを使って定義された変数は関数の中でローカルな変数になるので、関数の外側の変数を上書きしたりすることはない。 なるべく変数の有効範囲をせばめる 一時変数を使用する一連の処理があった時に、それらの変数をすべてグローバル変数にしてしまうのはアンチパタ
javascriptでお手軽に顔認識できちゃうライブラリ - Qiita
前書き esa.ioで社内向けに書いたものをこちらに移転。 当時フロントエンドエンジニアだった頃、社内勉強会で機械学習の講習を受け、特に画像の機械学習に刺激を受けて、javascriptで画像をごにょごにょして、それを機械学習になんか応用できるんじゃね？？ っていう考えのもと調べてたら、顔認識のライブラリを見つけたので使ってみた感じです。 Face Detection Face DetectionというJqueryのライブラリを使用する。 導入 ざっくり以下の３ステップ。 ①Face Detectionから必要なものをダウンロード ②ダウンロードしたものを任意のディレクトリに配置し、jqueryと共に読み込ませる。 ③画像を準備。決められたclass,idを振るだけ。 使ってみた結果 画像は拾い物で申し訳ないですが、、、 顔が多い方が検証としては面白いのでこちらで笑 Before (画像参
Chromeデベロッパーツールで圧縮(minified)されたJavaScriptを読みやすく表示する - Qiita
以下の内容は、Googleの開発者向けページにある 読みやすい形式への JavaScript の変換 ほぼそのままです。 (引用) JavaScript を読みやすい形式に変換するには、Chrome DevTools で [Pretty-Print] アイコンをクリックします。 実際にやってみます。 たとえばGoogle Earthの app_ja.js のソースコードは圧縮されているので次のように表示されますが、これだと読める気がしませんね。 そんなときには、 Pretty Print {} のアイコンをクリックします。 すると、 app_ja.js:formatted というタブの中に、読みやすく整形されたスクリプトが表示されます。 ちなみに、デバッグ時のブレイクポイントはformatted側に設定すれば良いので、既定のAPIを使うような開発作業も楽になりますね。 Register a
jquery.jpostal.jsを使って郵便番号から住所を検索する @餅。
2015年6月10日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 フォームメールを設置するとき、郵便番号や住所を入力する欄があることがあります。 郵便番号を入力したら自動的に住所が表示されると親切で良いですね。 というわけで、その方法です。 使用するjsは「jquery.jpostal.js」というものです。 <script src="/js/jquery-1.11.1.min.js"></script> <script src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
スッとスライドを作れ！
とつぜんですがみなさま．大急ぎでスライドを作る必要に迫られたときどうしておられるでしょうか． 先日，わたしもそんなような感じになったので，どうやってやり過ごしたのかを紹介します． 環境 基本的にはUbuntu 18.04で作業しますが，発表はmacOSあるいはWindowsで行わなければならないかもしれません． 時間がないのでちょちょっと書かないといけません． 高価なソフトウェア（およびそのライセンス）は所持していません． 現代人として版管理はしますよね？ 要望 ようするに，まずはクロスプラットホームを望みます．というより，プレーンなテキストとして書く→なにがしかの処理をする，という感じであれば，動作する環境は限定的であるとしても，スライドの作成自体はいつでもどこでもできそうだなぁという感じでしょうか． テキスト自体はやはりAsciidocで書きたいというか書くべきというかそう思います．M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
