JavaScriptのリファクタリングツール「jscodeshift」の使い方 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
asm.js: 仕様と実装の今 - Qiita
皆さんはasm.jsを覚えているでしょうか。4年ほど前（2013年）に登場してFirefoxで実装され、「C/C++で書かれたプログラムをWebで高速に実行できる！」みたいな話題になったやつです。その後WebAssemblyが登場したので、敢えてasm.jsに取り組む意味は薄くなりました。 しかしここでは懐古趣味として、asm.jsの現状を調査してみたいと思います。 仕様書 asm.jsの仕様書はここで見れます：http://asmjs.org/ （このサイトはどうやらGitHub Pagesでホストされているようで、GitHubリポジトリは https://github.com/dherman/asm.js です） この仕様書は「asm.js Working Draft -- 18 August 2014」となっており、結構古いです。これが「枯れている」ことを意味していればよかったのです
ヤフーのフロントエンドと Node.js の関係性
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチューニング支援なども行っています。 ヤフーには Node.js と JavaScript の言語サポートチームがあります。Node.js サポートチームは主にバックエンドとして、JavaScript サポートチームはフロントエンドとして、それぞれ JavaSc
WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io
Intro 依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。 これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。 Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。 draft-yasskin-wpack-bundled-exchanges-latest WebBundle かつて Bundled HTTP Exchanges と呼ばれていた仕様であり、複数のコンテンツを 1 つにまとめ、配信することができる。 例えば index.html とそれが依存する css/js/favicon etc を 1 つ
JS 大規模プロジェクトの管理手法 – ロードオブナイツの実例紹介
どうもこんにちは。 Aiming で東京開発グループのゼネラルマネージャをやっている小林です。 8月に mobage と Yahoo! モバゲー で ロードオブナイツ というシミュレーション RPG をリリースさせて頂きました。 そして、先週、 Yahoo! モバゲー版の PC ブラウザ専用デザインをリリースさせて頂きました。 今回リリースしたものは元々 Unity で作られていた iOS アプリ版 Lord of Knights を HTML5 で書きなおしたものです。 （今は Android 版 もあります） HTML のポチポチゲーをネイティブに移植したというのはよく聞く話ですね。 ですが、逆にリッチなネイティブアプリを HTML5 に移植し、かつスマフォブラウザと PC ブラウザで同じものを動かすなんてのは前例が見当たりませんでした。 技術的ハードルが高かったことに加えて期日がタイ
Evaluating JavaScript code via `import()`
The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works. eval() does not support export and import # A significant limitation of eval() is that it doesn’t support module syntax such as export and import. If we use i
心理的負担を抑えつつVue.jsを0.12→2.4にアップグレードした話 - 弥生開発者ブログ
こんにちは、@mugi_uno です。 RubyKaigi盛り上がりましたね〜！ そして広島は美味しいものがたくさんでした。次回の仙台も楽しみですね！ さて、みなさんはフロントエンドのフレームワークには何を利用していますか？ Misocaでは一部機能でReact/ReduxによるSPA構成を採用しています。 めろたん(@renyamizuno_)の書いた過去のエントリーにも登場していますね。 tech.misoca.jp しかし、Misocaで利用しているのはReactだけではありません。 jQuery React/ReduxはSPAなどでパワーを発揮しますが、逆に気軽に取り回しにくいため、ちょっとしたコンポーネントを作りたいケースなどでは、さくっと書けるjQueryを利用することもまだまだ多いです。 しかし、DOM操作が柔軟すぎるため影響範囲が読めなかったり、ビューと状態の管理が複雑にな
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
こんにちは。PLAID Software Engineer, tai-hey ( @Victoria_Peak_ ) です。 まえがき 私はプレイドに入社して1年ほどとなりますが、業務で Vue.js の開発を経験し、自身がフロントの実装にメインで携わり、サービス設計から実装まで取り組む中で設計について思慮することが多くなりました。 プレイドは SPA を実現可能な Vue.js を採用しているのですが、設計をしていく中で、設計のヒントをネット上で検索をしてみても、チュートリアルや部分的な設計の話はでてくるものの、設計概念の依存関係を表すものが無いことに気づきました。 そこで、今回のブログはフロントエンドに関連する設計概念を整理し、それぞれの依存関係を可視化することで今後のスムーズな開発に役立てるべく考察したいと思います。 プレイドでは、会社として開発プロセスを具体的に定義しているわけでは
GitHub - finom/check-imports: Node.js tool that helps to control validity of imports and dependencies in a TypeScript project
The library gets all .js, .jsx, .ts, .mjs, .mts, .cjs files from CWD or directory relative to CWD that's defined with -d flag; Builds AST via ts-morph and retrieves import paths from import from, require(), import(); Runs the following filtering and mapping: Ignore relative paths; Ignore built-in NodeJS modules such as node:path, path, node:fs, fs, etc; Retrieve module names (lodash/pick becomes l
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 React ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
FacebookのHermesというJSエンジンがエロい - Qiita
FacebookがHermesという組み込みのJSエンジンを公開したようです。 ReactNative用の組み込み用のJSエンジン（最新版だとオプション切り替えで使えるっぽい） MITライセンス プロプラなものとの組み合わせが発生しうる組み込みにおいては正義しかない ES2015をサポート(予定） 現時点ではクラスとかlet/constのブロックスコープは実装途中 Map/Setとかの組み込みクラス系は実装済み サイズの小ささをうたった処理系はES2015への対応はまだまだなのが多いので（Duktapeとか）良い 事前にJavaScriptのソースコードをパースして中間表現（LLVM IRをそのまま利用？）にしておいてロードする モバイルのCPUやバッテリー、メモリーにも優しい なお、エロいというのは強く感情が揺さぶられた結果が出てきたワードであってセクシャルな内容は一切含まれておりません
ESLint v6.0.0 の変更点まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前 v5.16.0 | 次 v6.1.0 We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint 6.0.0 がリリースされました。 既存の機能を改善するための非互換な変更があります。特に、グローバル インストール (npm install -g) された ESLint コマンドを利用している場合、今まで通りには利用できない可能性が高いです
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
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めてい
TypeScriptの`--esModuleInterop`は一体何をやっているのか - stone's throw
そんなオプションあったんですか TypeScript2.7で追加されたらしい。 デフォルトでtrueとなるオプション。 Announcing TypeScript 2.7 | TypeScript まずはどうなるかチェック tsconfig.jsonにesModuleInterop: falseをセットした時と、esModuleInterop: trueをセットした時で違いを見る。 オプションなし //controller.ts //falseの場合、CommonJSはrequireで読み込まなければならない import commonjs = require('../CommonJS') import esmodule from '../EsModule1' import * as esmodule2 from '../EsModule2' const commonobj = new c
Angular 4アプリケーションをAngular 6に移行する | 株式会社カブク
初めまして！ カブクでアルバイトをしている長瀬です。普段はWebフロントエンド関連の業務をしています。 先日、Angular 4.3.6で動いていたアプリケーションを6.1.0へ移行した際に得られた知見を共有します。Angular/Angular CLI 6への移行に関する日本語記事は、すでに以下をはじめとするすばらしい記事が世に出ています（私も参考にさせていただきました）。 Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) lacoさんの記事 angular-cliの移行作業がまとまっている Angular6に移行メモ 5.2 -> 6.0の移行 ngx-bootstrapなど、外部パッケージ関連の移行作業についても触れられている この記事では、上記の記事で紹介されている内容（移行手順や移行により改善されたこと）に加えて、 –
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
外部ライブラリもインストール・型解釈できるTypeScript playgroundを作った
GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥
GitHub - daybrush/scenejs: 🎬 Scene.js is JavaScript & CSS timeline-based animation library
