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
javascriptのWebWorkerを使ってみた - Qiita
WebWorkerとは？ 初心者です。 WebWorkerとはjavascriptでマルチスレッドを行うための仕組みです。 マルチスレッドとは、複数の処理を同時に行うことです。 例えば、描画処理などで ・データ取得処理 ・取得したデータの描画処理 を同時に行うと描画が滞りなく行われます。 処理を同時に行わない場合は、 の様に処理A、Bを同時に行ってスムーズに描画するという機能です。 （あくまで一例。処理が軽い場合は普通に記述して問題ない） 非同期処理は？ javascriptは非同期処理でpromiseなどありますが、 あれは処理の順番を変えているだけで同時に処理を行うものではありません（でした）。 非同期処理 ＝ 並行して処理を行ってくれる と考えがちですが、javascriptは（原則）違います。 概要とか特徴 概要 ・メインスレッド(main.js) ←メイン処理 ・サブスレッド(d
経産省発の 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 ぶっちゃけ当初はあまり期待
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.
よくわからないJavaScriptが綺麗にされたらCard Stealerだった件
こんにちは、Recruit-CSIRTのきっかわです。 「ウィルスオタクの若手エース」と呼ばれるようになったから、というわけではないでしょうが（笑）、このたび、話にはよく聞くが見かけたことのなかった「クレジットカード情報を盗むJavscript」を見つけたので、そのマルウェアと周辺の攻撃について情報を共有します。みなさんにとって本ブログが有益な情報になれば幸いです。 忙しい方へ 今回発見されたJavaScriptの概要 クレジットカードのチェックディジットの計算とクレジットカード番号の構成をチェックする チェックが通ると、外部サイトへ入力情報を全て送信する Javascriptコードの仕込まれ方 Webサイトのjsファイルを改ざんして動作 元のサイトの動きに対して、見た目上の動きは変わらない IOC https://ww1-filecloud[.]com/img 攻撃の流れ 今回観測した攻
無限アラートはブラクラではない - Qiita
まずこの記事はChrome最新版に基づくものです。その他のブラウザの情報や検証結果などありましたらコメントいただけるとありがたいです。 今回の無限アラートがブラクラだとして、不安を煽るような記事が多数存在しており、もちろんエンジニアなら簡単にわかることですが、その会社の影響なのかブラクラだと勘違いする人が自分の観測範囲に多くいたので、なぜブラクラではないのか技術的な観点から検証していきたいと思います。 まずブラクラ（ブラウザクラッシャー）は広い意味で使われているので、齟齬が無いようにこの記事内での言葉通りブラクラはブラウザをクラッシュさせるものだと定義します。実際にブラウザがクラッシュする他に著しく不安定になったり、正規の方法で閉じれなくなるようなこともクラッシュに含め、ブラウザのバグに起因するものは除外するとします。 無限アラートがブラクラではないことを検証する前に、ブラクラがどんな物な
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
「Webサイト用」モダン開発環境の考察 - Qiita
社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts（タスクランナー） Gulp -> webpack（バンドラー、トランスパイラー） jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript（Classベース） EJS -> Pug 脱Gulp（Gulpをや
【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 Rails 5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより 公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました（せめてファイル名の頭に番号でも振ってくれれば...）。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要 ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。 上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ
GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
jqPlotでブラウザが落ちる場合の対応 - Qiita
jqPlotでグラフを描画しています。 セレクトボックスの値が切り替わったら、グラフを再描画しています。 セレクトボックスを数回変更したら、ブラウザが落ちてしまいました。 原因はメモリリークのようで、destroyメソッドを実行したら解決しました。 コード document.getElementById("selectbox").onchange = drawChart; function drawChart() { //グラフ描画処理 $.jqPlot("chartArea", ...); }; var chartObject; //グラフオブジェクト(グローバル変数) document.getElementById("selectbox").onchange = drawChart; function drawChart() { if (chartObject != null) { c
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Opal: Ruby ♥︎ JavaScript
Opal is truly amazing and it has taken me in a whole new direction. — @mistergibson from Gitter, on Jan 22 2018 [about Opal 1.7] Fantastic! No failing specs for [isomorfeus](https://github.com/isomorfeus/isomorfeus-project#readme), asset size reduced, performance a tiny bit improved too :+1: — @janbiedermann, on Dec 25th 2022 These guys are great. We have a large production app (www.catprint.com)
コラム - Ruby ＆ Rails | 第16回 Opal ～JavaScriptもRubyで～｜CTC教育サービス 研修/トレーニング
また、JQueryではキャメルケースでメソッド名やプロパティ名などが定義されていますが、OpalではRubyの文化に合わせてスネークケースで定義されているようです(*9)。 Nativeなコードの実行 「`（アクサングラーブ）」を使うことで、NativeなJavaScriptのコードを実行することができます(*10)。 `window.open("http://example.com", "example")` windowオブジェクトのほか、前回までに使用したWebSocketやEventSourceなどへアクセスする際にもこの構文を使うことになりますが、「`」の中はJavaScriptの文法になるためOpalを使うメリットが半減してしまいます。 そのようなケースのために、OpalではKernel#Nativeが用意されています。このメソッドを使うことでRubyライクにJavaScrip
Opalのすすめ - Qiita
この記事はOpal Advent Calendar 2016の一日目の投稿として書いています。 OpalというのはRubyからJavaScriptへソースコードを変換するコンパイラです。 RubyをJavaScriptに！ずいぶんキワモノ感がありますね。私も最初はそう思っていました。 しかし実際に使ってみると、割とRubyとして書けるということが分かりました。 RubyとOpalの違いについては別稿にゆずるとして、わたしがなぜOpalをすすめるのかについて書こうと思います。 一言で言ってしまうと、言語としてJavaScriptが好きでないというのが一番の理由なのですが、それならばAltJSというのも世の中には沢山存在しています。 そういえば数多くあったAltJSたちは今どうしているのでしょうか?私もかつてはRubyistらしくCoffeeScriptなぞ嗜んでいました。 ところが、ES6(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 5 で Opal を使う - Qiita