インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコースDoctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
ライブラリ作者におすすめしたいBabelの新機能 babel-plugin-polyfill-corejs3 | Wantedly Engineer Blog
Babelの新しいpolyfill用プラグインであるbabel-polyfillsが2022年4月に脱experimentalを果たしていました。そこで本稿では、Babelにおいてpolyfillがどのように扱われていたかを振り返りながら新しいpolyfill pluginを紹介します。 注意: Babel 7.4で非推奨化された@babel/polyfillとは別物です。 何が問題だったのか?babel-polyfillsのREADMEと元issueにも説明がありますが、本記事ではあらためて日本語で説明したいと思います。端的に言うと今までは以下の要件を両立できませんでした。 ソースコード中で使われている機能のpolyfillだけを注入する。ターゲットブラウザを指定して、必要なpolyfillだけを注入する。副作用のない形でpolyfillを注入する。babel-polyfillsはこれら
Node.jsのネイティブES Modulesサポートが抱える問題を解決するBabelプラグインを書いた
babel-plugin-node-cjs-interop というパッケージを作ったのでその紹介です。 (GitHub) 何が問題か Node.jsのネイティブES ModulesサポートとBabelやTypeScriptのES Modulesサポートを併用したときに問題が起きます。 ESMとCJS JavaScriptには標準のモジュールシステム (ES Modules, ESM) がありますが、ESMの策定前に先だっていくつかのコミュニティー定義のモジュールシステムが存在していました。そのうちNode.jsを中心として使われていたのがCommonJS Modules (CJS) です。そのNode.js界隈でもESMへの移行が進んでいます。 移行にあたって問題になることのひとつが、ESMとCJSのエクスポートモデルの違いです。 ESMでは、モジュールは0個以上の名前つきエクスポートを定
Rust Is The Future of JavaScript Infrastructure
Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
全ての道はRomeへ続くのか - これからのJavascript開発を考える
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
Node.js v12のES Modulesと、Babel/TypeScriptの対応について - Qiita
本日は誕生日です。みなさんプレゼントありがとうございます。まだの方は急いでください。 あと年齢は聞かないでください。 はじめに Node.js v12で変更されるES Modulesの挙動についてと、Babelでの対応方法についての記事です。 10月に開催された関西Node学園 8時限目で発表した内容＋α（後日談含む）です。 対象者 ES Modules（import構文）は知ってるけどNode.js v12で何か変わったの？ 非対象者 v12での変更点もちゃんと知ってるし！ そういう強い子は、この記事本文はスルーしてもいいので最後にある「おまけ」だけでも見てください。 ES Modulesって何？ ていうかJavaScriptって何？ この記事のゴール Node.js v12におけるES Modulesの変更点について理解し、適切なコードを書けるようになる Babelを使っている場合は適
core-jsがメンテされていない理由→プロジェクトは継続する - Qiita
core-jsとは core-jsをみなさんご存知だろうか。直接は知らなくてもbabelでpolyfillを当てているなら間接的にお世話になっているはずだ。 メンテされない そのcore-jsは当分メンテされないらしい。というか2020/01/14を最後にパタッと活動が途絶えている。 なんとこの巨大projectはzloirockというたった一人によってメンテされてきた。 ここで彼のコメントをいくつか引っ張っておこう。 https://github.com/zloirock/core-js/issues/548#issuecomment-494112872 2019年5月21日 4:06 JST Dear @jpike88! Almost 5 years almost every day I spend some hour for maintenance core-js. It's not
module bundler を作った
このフロントエンドの魔境に生まれたからには一度は俺が考えた最強の module bundler を作りたい。みんなそう思ってると思う。作った。 mizchi/bundler: hobby bundler tldr このコードが // foo.js export default 1; // index.js import foo from "./foo.js"; console.log(foo); export const index = 1; こうなる // @mizchi/bundler generate const _$_exported = {}; const _$_import = (id) => _$_exported[id] || _$_modules[id]((_$_exported[id] = {})); const _$_modules = { "/foo.js": (_
Google App Script を V8 に切り替えたらものすごい速くなった - Qiita
この記事は衝動的な動機によって書かれており、事実を正確に捉えるのに必要な証拠に欠けていることを予め断っておきたい。 また、分かりやすい数字というものは人間の良からぬ想像力を掻き立てる災いのもとになることも思い出して欲しい。この記事にはなるべく事実だけを書くことにして、自分の推測は「〜かも知れない」とか「〜と思う」と書くことにする。この記事を読まれたみなさんが何らかの推論をコメントやツイッターに書き散らしたい衝動にかられた時は、ぜひ同じことを実践して欲しい。 GAS のランタイムで V8 エンジンが使えるようになった ソース https://developers.google.com/apps-script/guides/v8-runtime?hl=ja#enabling_the_v8_runtime Google App Script (以降 GAS) とは、Google スプレッドシート
コンポーネント時代のi18n - Qiita
グローバルからコンポーネントベースのid管理へ サービスを海外展開したい場合、国際化対応を行う必要性があります。これをi18n対応と呼びます。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがありますが、ダウンロード数的にyahoo製のreact-intl が最も使われているライブラリです。react-intlを実際に使っている例としては、スター15000を超えるReactボイラープレートであるreact-boilerplate やSNSの マストドンがあります。 react-boilerplate/react-boilerplate: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best
Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れはますます加速すると思われます。 私自身もこれまでいくつかのプロジェクトで Webpacker を利用してきました。Webpacker は webpack を Rails から簡単に利用でき非常に便利なのですが、使っているうちにいくつか不満な点がでてきました。 一番大きい問題として Webpacker が @rails/webpacker という npm パッケージに webpack の設定を隠蔽し、Webpac
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
Webpackerを導入してから外すまでをふりかえる - 弥生開発者ブログ
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
MSを偲び、ここにIE6対応SPAの作り方を記す - Qiita
JavaScript2 シェアフル Advent Calendar 2018 10 日目の記事です。 Microsoft EdgeがChromiumベースになるということで賑わっていますので、私も話に乗っかりたいと思い、IE6の話を書くことにしました。 BabelとParcelとHyperappでIE6対応SPA作ってみました デモ: https://boiyaa-ie6-compatible-spa.appspot.com ソース: https://github.com/boiyaa/ie6-compatible-spa これを見ているほとんどのみなさんはIE6を持っていないと思うので、↑を開いてもただの簡素なSPAでしかありませんが。。 記事の最後に載せた画面キャプチャのようになります。 IE6で見る方法 Windows XP マシンを入手するか、BrowserStack の有料プラン
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Developers Blog
宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ
ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech（テック）
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「ServiceWorker Side XXX」に登場したのは、mizchi氏。ServiceWorkerを駆使したある取り組みについて紹介します。講演資料はこちら 開発環境のためにServiceWorkerを使う mizchi氏（以下、mizchi）：では「ServiceWorker Side XXX」ということで発表させていただきます。mizchiです。よろしくお願いします。 （会場拍手） ちょっと自己紹介とかはする気ないんですけど、最近本を書いたので、その紹介だけ
Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptの設定の良し悪し
