去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。 今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。 公式のベンチマーク結果 計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
DevTools の新機能 (Chrome 96) 公開日 2021年10月25日月曜日 • 更新日 2021年10月25日月曜日 翻訳先言語： English, Español, Português, 한국어, 中文, Pусский # プレビュー機能: 新しい CSS Overview パネル新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます。 CSS Overview パネルを開き、Capture overview をクリックしてページの CSS のレポートを生成してください。 情報をさらに詳細化することも可能です。例えば、Colors セクションの色をクリックして同じ色を適用する要素のリストを表示できます。いずれかの要素をクリックすると Elements パネルでその要素が開きます。 CSS Overview パネルはプ
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
フロントエンド監視の全体像と実現方法
必要性 フロントエンドの監視はバックエンドやインフラのそれらと比べ、優先度が低くなりがちです。 バックエンドやインフラでの障害はサービス継続に直結するため、これは当然と言えば当然なのですが、別の理由もあると考えています。 それは計算リソースをサービス提供側が管理していないことです。 例えばアプリケーションがインフラとして AWS を利用しているなら、AWS のリソースを管理するのはサービス提供側です。 これは AWS 以外のクラウドサービスプロバイダやオンプレであっても同様です。 一方でフロントエンドはエンドユーザのブラウザ上で動作し、これを管理しているのはエンドユーザです。 フロントエンドはその性質上、監視の「盲点」になりがちです。 しかしフロントエンドはエンドユーザが直接触れるものであるため、そこで何が起きているかサービス提供側は正確に把握する必要があります。 マイルストーン フロント
初めてのTypeScript
TypeScriptの本格的な入門書。TypeScriptは、世界で最もよく使われ、かつ最も好まれているプログラミング言語の1つです。本書では、JavaScriptの基礎的な知識のあるプログラマーを対象に、「型」や「型システム」の基本から、明快かつ包括的にTypeScriptを解説します。TypeScriptはバグやタイプミスを防ぎ、コードを読みやすくするのに有用なだけでなく、JavaScriptがどのように動くべきかを宣言し、それを維持するのに役立つ優れたシステムです。読者は本書を読むことで、TypeScriptの基礎と最も重要な機能をマスターできるでしょう。 賞賛の声 監訳者まえがき まえがき 第I部 TypeScriptの概念 1章 JavaScriptからTypeScriptへ 1.1 JavaScriptの歴史 1.2 バニラJavaScriptの欠陥 1.2.1 コストのかかる
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
プログラミングTypeScript
プログラミング言語TypeScriptの解説書。TypeScriptの型に関する基礎的な内容からその応用、エラー処理の手法、非同期プログラミング、各種フレームワークの利用法、既存のJavaScriptプロジェクトのTypeScript移行の方法まで、言語全般を総合的に解説します。本書全体を通じて、TypeScriptの洗練された型システムを最大限活用するために、コードをどのように記述すべきか、なぜそうすべきかを学べます。 賞賛の声 監訳者まえがき まえがき 1章 イントロダクション 2章 TypeScript：全体像 2.1 コンパイラー 2.2 型システム 2.2.1 TypeScript対JavaScript 2.3 コードエディターのセットアップ 2.3.1 tsconfig.json 2.3.2 tslint.json 2.4 index.ts 2.5 練習問題 3章 型について
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
限界を極めた内定者が語る！ Web Speed Hackathon 2022 戦略と秘訣 | CyberAgent Developers Blog
本記事は CyberAgent Developers Advent Calendar 2022 21 日目の記事です。 2023 年度入社予定の加藤 零(@cut0_) です。現在は株式会社 WinTicket で内定者アルバイトをしています。Web Speed Hackathon 2022 Public では 499.1 点を記録しました。 お疲れさまでした！ 届かなかった残り 0.9 点を噛み締めて社会人エンジニアを迎えようと思います。 CDN 使わずに Heroku 単体でもここまで戦えます！！https://t.co/ikVmhml6iq #WebSpeedHackathon — レイ (@cut0_) November 27, 2022 本記事では、Web Speed Hackthon 2022 Public で取り組んだことに加え、これから Web Speed Hacktah
今年もこの一週間がやってきて終わりました。Cloudflareを使って開発をする開発者大歓喜のDeveloper Weekです。 新製品、新機能の発表や、既存製品のアップデート、技術的解説などをブログで行うというものです。 4月1日(月)〜4月5日(金)に行われました。 すごい。数えてみたら21個のブログ記事がありました。各記事について雑な箇条書きをしてみます。 4/1 (月) 1. Welcome to Developer Week 2024 https://blog.cloudflare.com/welcome-to-developer-week-2024 まずはプロダクトディレクターのRitaから開始宣言 Cloudflareのプラットフォームは200万人が使っている 5つの「Cloud」を提案する Full-stack Cloud、Connectivity Cloud、Experi
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
ありがとう Webpacker さようなら Webpacker - クラウドワークス エンジニアブログ
こんにちは。crowdworks.jp における技術的負債の解消をリードするジャンヌチームです。 12 月ということでアドベントカレンダーの時期ですね。今年も弊社で開催しており、合計 25 名が参加して盛り上げております。 qiita.com ジャンヌチームからは @okuto_oyama が今年のフロントエンド活動の振り返りをしていました。 engineer.crowdworks.jp その中の１つに「Webpacker から Simpacker + webpack 構成へ」というものがあり、今回はそれに関する取り組みを紹介していきます。 Webpacker とは Webpacker は Rails アプリケーションにおける webpack でのフロントエンド開発をするときに用いる公式ライブラリです。このライブラリの利点として webpack のビルドシステムに詳しくなくとも汎用的な設定
バグバウンティにおける JavaScript の静的解析と動的解析まとめ - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティなどの脆弱性調査で行う、JavaScript の静的解析と動的解析についてまとめて紹介します。 1. 始めに 免責事項 想定読者 検証環境 静的解析と動的解析 2. 静的解析 (Static Analysis) 2.1 JavaScript File の URL を収集する getJS hakrawler getallurls (gau) 2.2 エンドポイントを列挙する LinkFinder xnLinkFinder katana jsluice endext 2.3 シークレット情報を検出する SecretFinder jsluice Mantra trufflehog 2.4 潜在的な脆弱性情報を検出する Retire.js ESLint 3. 動的解析 (Dynamic Analysis) DevTool
スマートキャンプに入社しました！& Chrome拡張機能をVue.jsで作りました！ - SMARTCAMP Engineer Blog
初めまして！8月よりスマートキャンプにエンジニアとして中途入社した吉永です！ 私は現在19歳で、通信制の大学に通いながらエンジニアチームの一員として開発に携わっています。 プログラミングは中学生の時に始め、高校在学時にとあるスタートアップ企業でインターンしたり、卒業後はエンジニアとして正社員で開発を行っていました。 得意分野はフロントエンドで、主にVueやNuxtを使った開発が好きですが、前職ではLaravelやDjangoを使ったバックエンドの開発も行っていたため、メンバー構成に左右されない柔軟な開発を行えることが強みだと思っています。 薪入れ作業でChrome拡張機能を開発しました なぜこの拡張機能が必要だったのか どうやって作ったか 主要ファイル解説・作り方 詰まったところ 全体的なまとめ 参考にさせていただいたサイト 薪入れ作業でChrome拡張機能を開発しました スマートキャンプ
Puppeteer と Coverage の話
アドカレの 1 日目も Puppeteer の話を書いてたのだけど、別にその続きとかではまったくなくて、少し前に Puppeteer のカバレッジ関連でドハマリしたのでそれを書こうと思う。 背景他のところで散々書いてきているので、軽く触れる程度にしておくが、 https://github.com/reg-viz/storycap というツールの開発・メンテをしている。Puppeteer で Storybook をクローリングして各 Story を PNG 画像にする、ただそれだけの CLI だ。 このツールは画像ベースの回帰テストを自動化する目的で作られていて、日々の業務でも reg-suit や reg-cli などのツールと組み合わせて使っており、僕自身も前職の頃から世話になっている CLI だ。 自動テストの一環として Storycap を使っている関係上、Storybook をコン
Sentryをちゃんとセットアップしたら、想像以上にできるやつだった話（フロントエンドのエラー監視） | スマートショッピング
2020-05-29Sentryをちゃんとセットアップしたら、想像以上にできるやつだった話（フロントエンドのエラー監視） はじめにこんにちは。エンジニアリング事業本部の@1010realです。 今年初めからスマートショッピングに入社して、既存サービスの管理画面のリプレースや運用・新規機能開発におけるフロントエンド開発を全般的に行っております。 今回はWebフロントエンド開発における本番環境のエラートラッキング及びそのバグフィックスについて、Sentryを用いて効率的に行う方法を紹介しようと思います。 内容としては、Webフロントエンドに限らず、バックエンドやアプリなど、Sentryが対応しているPlatformであれば、参考にできる内容となっています。 目次はじめに目次Sentryについてなぜこの記事を書こうと思ったかちゃんとセットアップってどういうこと？導入手順 最初のエラーをトラッキン
概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい
調査:良いDXをライブラリユーザーに提供するために、TypeScriptライブラリのtsconfig設定はどうあるべきか？
調査:良いDXをライブラリユーザーに提供するために、TypeScriptライブラリのtsconfig設定はどうあるべきか？ このスクラップでは、TypeScriptでライブラリを開発し、それをNPMを通じて提供する際、ライブラリユーザーにより良い開発体験(DX)を提供するには、tsconfigの設定はどうあるべきかを調査するものです。 このスクラップが役立つかも知れない人 TypeScriptでライブラリを開発する人 アプリ開発者にはたぶん役に立ちません 良いDXとは？ 良いDXは次のように定義する。 TypeScriptソースコードの閲覧可能 GOOD: IDEでライブラリのシンボル(関数名など)へジャンプしたときに、その実装がTypeScriptで読める BAD: 型定義ファイルにジャンプするので、実装を知ろうと思ったら、対応するバージョンのソースコードをGitHubで調べないといけな
Why Next.js 私は、業務でもプライベートでも Next.js を使っています。 Next.js は "Zero Config" をうたっているわけですが、実際業務で使うとなると、なかなか Zero とはいきません。IE11用にトランスパイルが必要になったり、ソースマップのアップロードのために webpack の拡張が必要なるケースにおいては、next.config.js のカスタマイズが必要になります。 そういったカスタマイズをサポートし、設定のストレスから我々エンジニアを開放してくれるパッケージが世の中にはたくさんあります。ということで、自分以外の方々が next.config.js にどのようなプラグインを入れているか気になりました。 まずは、自分がどのようなプラグインを入れているかシェアしたいと思います。 「自分はこんなプラグイン入れていて便利ですよ」みたいなシェアを、Tw
rollup.js と TypeScript を使って npm 公開用のライブラリを作ろうとしたら、 Rollup の公式プラグインがRollup Pluginsに移動していて、 ビルド環境構築に苦労したので、雑にメモを残しておきます。 作るもの ✍ npm で公開するためのライブラリを作成する環境 モジュールバンドラに rollup.js を利用する TypeScript を使って開発する 他の npm のモジュール(CommonJS も含む)も利用できる 作成したライブラリは、汎用的に使えるようにする CommonJS、ESModule で利用できる CDN 経由でブラウザで利用できる (buble でトランスパイルし、IE でも動くように 😇) babel を利用して ES2015 まで構文変換は行うが、pollifill は利用者側に委ねる ライブラリが個々に pollifill
コラム - Ruby on Rails 海外事情コラム | 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？｜CTC教育サービス 研修/トレーニング
CTC教育サービス・ホーム ＞ コラム ＞ Ruby on Rails 海外事情コラム ＞ 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ [IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ (野田貴子) 2020年6月 こんにちは。アプリケーションを作るときには、様々な技術の取捨選択を行いますよね。たとえば、フロントエンドの実現に使う技術（React、Vue、Angular、jQueryなど）の選択です。私も、これまでに何度も何度も類似技術の調査をして、比較表を作り、上司やチームメイトに提案してきました。その度に、「すでにどこかに要
gulp（ガルプ、以下gulp）とはどういうものかご存じですか？ gulpとは、タスクを自動化するツールの一つで、画像の圧縮などに使われています。 この記事では、そもそもgulpとはどういったものなのか、インストールの方法、使用例などを、わかりやすく解説します。 gulpってなに？ gulpとは gulpはNode.jsをベースとしたタスクランナーの一つです。 タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。 gulpを使うことで以下のような手間や時間がかかる作業を自動化できます。 cssにベンダープレフィックスをつける cssのプロパティをアルファベット順に並べ替える ソースマップの作成 SassやLESSのコンパイル 画像(jpeg, png, gif)、css、javascriptの圧縮 PC・スマホ・タブレット
ディレクトリ構造ディレクトリ構造はこんな感じです。 srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。 gulpが走ると、distディレクトリにコンパイルされます。 ├─ index.html ├─ gulpfile.js ├─ package.json ├─ package.look.json ├─ /node_modules ├─ /dist │ ├─ /css │ │ └─ style.css │ ├─ /js │ │ └─ script.js │ └─ /img └─ /src ├─ /scss │ └─ style.scss ├─ /js │ └─ script.js └─ /img npmパッケージについての説明は割愛しますが、progateで解説されている記事があったので紹介しておきますね。 基本的なg
Sentry を活用したい！
Agenda はじめに Sentry によるエラー検知 Sentry の初期設定 フロントでのエラー検知 フロントから Sentry へのエラー通知 リリース、環境と紐付けたエラートラッキング Source Map のアップロード Slack への通知 まとめ はじめに プロダクトを運用していく上で、エラーの監視は避けては通れませんよね。 バックエンドにエラー監視ツールを導入しているプロダクトは多いと思いますが、フロントエンドのエラー監視については、ツールを導入していないことも多いのではないでしょうか。 Magic Moment では フロントエンドのエラー監視として Sentry を、バックエンドのエラー監視として Cloud Logging を採用しています。 本記事ではフロントエンドのエラー監視にフォーカスし、 Magic Moment における Sentry の活用事例を紹介します
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順についてご紹介します。 ※本記事は、gulp3をベースに進めます。（現在の最新版であるgulp4は、設定ファイルの記載が変更されているので動作しない可能性があります。） gulpのメリット gulpを使うと、ファイルを圧縮してファイルサイズを軽くしたり、サーバーにアップロードをする作業を自動化したりすることで開発を効率的に行うことができます。 gulp似ているツールは他にもありますが、gulpは処理速度が早く、併用して使えるNode.jsのパッケージが豊富なことから、多くの人に使われています。 ※
Sentryでソースマップを活用してHerokuから配信するSPAのエラー調査を楽にする - Pepabo Tech Portal
カラーミーショップ DXチームのkymmtです。この記事では、webpackなどでビルドしてHerokuから配信するシングルページアプリケーション(SPA)でエラーが起きたとき、Sentryにエラーを送信しつつ、ソースマップを活用して元のソースコードのどこでエラーが起きたのかを特定する方法について説明します。 ソースマップ利用前 ソースマップ利用後 想定するアプリケーション この記事では、実際の社内での作業に基づいて、次のようなアプリケーションを想定します。 シングルページアプリケーション(SPA)である SPAはVue.js製であり、複数のファイルからなる SPAはHeroku上で動くExpressから配信する HerokuでNode.js Buildpackを使っている Herokuへのデプロイ時にwebpackでSPAをビルドするように設定している 一方で、上記の想定に当てはまらなく
ユーティリティファーストCSSは実質的にインラインスタイルであり、本来はインラインスタイル的な記述ができる方がより望ましいように思えるが、おもに次のような制約によりユーティリティファーストとして体を成している： インラインスタイルでは、疑似クラス・疑似要素・子孫セレクタ・@mediaをはじめとする@-規則などが利用できない インラインスタイルは多くのエディタでうまく補完されない デザイントークンを参照できない（あるいはしづらい） 一方でいくつかのCSS in JSライブラリは別のアプローチを選択することでこれらの制約を回避しており、また比較的新しいCSSネイティブの機能の利用によっても解決できるようになってきた。ユーティリティファーストを完全に置き換えられるわけではないにしても、それらの代替案を検討できる場面もあるだろう。 CSS in JSのアプローチ たとえばEmotionでは、通常の
はじめに esbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。 ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。 私自身が webpack を普段使っていて、ビルドに時間がかかりすぎているのが気になり、esbuild について調べてみようと思いました。 esbuild の特徴としては、 キャッシュなしでの高速なビルド ES6 と CommonJS をサポート ES6 の Tree shaking 対応（利用されていないコードの除去） JavaScript と Go による API TypeScript と JSX をサポート ソースマップの生成 ソースコードの最小化 プラグイン（現在、experimental で v1.0.0 より前に対応予定
この記事はミツエーリンクスアドベントカレンダー2019の5日目の記事です。 Webサイト構築プロジェクトを進めていく中で、HTML/CSS設計やJavaScript開発を複数人で行うケースは多くあります。 そうした場合に、1つのファイルに複数の機能が集中しているとコードの可読性が悪くなり、開発作業の分担も難しくなってしまいます。 この問題の解決策として有効なのが、webpackなどのツールを使用することです。機能ごとにファイルを分割（モジュール化）して開発を進めることができれば、可読性も向上し開発作業の分担もしやすくなります。 webpackとは webpackとはCSSやJavaScript、画像などWebサイトを構成するあらゆるファイルを1つにまとめるモジュールバンドラーのことです。 webpackを利用して複数ファイルをバンドルすることは以下のような利点があります。 依存関係の解決
こちらの記事は、Mahesh Haldar 氏により2019年 01月に公開された『 Why and How to use TypeScript in your React App? 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 かなり前にTypescriptについて知ったとき、私はあまり諸手を挙げてそれを歓迎はしませんでした。私はJavaScriptの世界でまた一つ新たなレイヤーを探求したくはありませんでした。もしあなたもTypeScriptに対してそのような印象を持っていたとしても、私は驚きません。 TypeScriptはJavascriptに欠けているピースだ。 私はもう1年以上TypeScriptを書くのを楽しんできましたが、今となってはそれなしでは苦労しそうだと感じています。 長期にわたってメンテナンスしたいプロジェクトで作業するのなら、TypeScri
クライアントからWEBサイト制作の依頼を受ける立場。 自社内にデザイナーがいるためデザインは出来るが、コーディング出来る人がいないため、外注に依頼したい。 もしくは、デザイン・コーディング両方を内政化しているが、リソースが足りないためさばき切れない案件を外注に依頼したい。 以上のように、クライアント直請けではなく制作会社を挟んだ二次受けになる事が多いです。 デザインスキルもあり、WEBサイト制作を一気通貫で行える人であれば、クライアントさんから直請けしやすいでしょうし、仕事の幅も一気に増えると思います。 自分の場合は、凝ったデザインで無かったり既存サイトの改修であれば、クライアントさんから直請けする事もありますが、デザインセンスが壊滅的にないので、基本デザインは行っていません。。 STEP0：制作環境について 制作フローの話の前に、マークアップエンジニアとして案件をこなすために準備しておき
CLIツール・ウェブサーバー作成のための環境設定 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 Node.jsの環境構築 作業フォルダを作る ビルド設定 CLIツールのソースコード Node.jsのまとめ Deno CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（
先日、実験的にFlutter Webを使い数ヶ月かけて開発を進め、最終的に、結局パフォーマンスの問題からReactにすべて書き換えたことがあった。 同じ失敗をする人ができるだけ少ないように、現状のFlutter Webの課題点について、主に以下のIssueから引用して共有しておこうと思う。 前提として、Flutterはとても積極的に更新が行われているので、上記Issueで挙げられている問題点は徐々に解決すると思う。現状ではまだ関連IssueはOpenのままで、少なくともここ数ヶ月は変わりなく、執筆時点で最新版のFlutter 2.5.3ではまだ未解決な問題点を挙げていく。 初期読み込みが非常に重い 実際に flutter build web --releaseをしてアプリをデプロイしてみると分かるけれど、どんなに小さいアプリを作っても、main.dart.jsのサイズがめちゃくちゃ大きい。
自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel) - Qiita
自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel)TypeScriptbabelpostcssrollup.jsrollup やりたいこと Rollupで下記を達成したいと思います。 自作TypeScriptプロジェクトのビルド ES6 Modules (import ...) での出力 Webpackで参照するにはこちらの形式が有利です（TreeShaking） CommonJS (require(...)) での出力 NodeJSで参照するにはこちらの形式が必要です 型宣言(*.d.ts)の出力 ソースマップ(*.js.map)の出力 ビルドしたJavaScriptをBabelでトランスパイルする ソース中で参照しているCSSはPostCSSで処理しながら、一つのファイルとして出力 外部ライブラリ(node
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた
最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
DevTools の新機能 (Chrome 96) - Chrome for Developers
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
Vue.js と Nuxt の 2023年まとめ
Cloudflare Developer Week 2024 まとめ！ - ゆーすけべー日記
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
Rust + Webpack = Rspack の紹介
【Next.js】みんな next.confing.js にどんなプラグイン入れてる？
rollup.js × TypeScriptのライブラリをnpm公開する環境の構築（2020年12月版）
【たった５分で完了】「gulp」の導入方法と使用例を紹介します。
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
Node.jsのパッケージgulp（ガルプ）で開発を効率化 | パソコン工房 NEXMAG
次世代インラインスタイル - yuhei blog
Node.js のビルドツール「esbuild」について！
webpackを利用してみる（入門編） | フロントエンドBlog | ミツエーリンクス
なぜReactアプリにTypeScriptを使うべきなのか - Qiita
駆け出しマークアップエンジニアのためのWebサイト制作フロー - Qiita
Flutter Webの現状と課題 (2021年11月時点) - Qiita