ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
[ChatGPT API][AWSサーバーレス]ChatGPT APIであなたとの会話・文脈を覚えてくれるLINEボットを作る方法まとめ | DevelopersIO
シークレット類の取り扱い シークレットやAPIキーをソースコードにハードコードするのはあまり良くない習慣です。 [レポート][GitGuardian]ハードコードされたシークレットに対応することはなぜ急務なのか？ – CODE BLUE 2022 #codeblue_jp | DevelopersIO これらの値は環境変数経由で読み込ませるのが良いでしょう。今回はSSMパラメータストアに値を手動でセットし、それをCDKデプロイ実行時に読み取ってLambda環境変数にセットするようにします。 ちなみにパラメータストアやSecretsManagerから直接読み込む方法もあるようです。 [アップデート] Lambdaから直接Parameter Store/Secrets Managerから値を取得できるようになりました！ | DevelopersIO Lambda関数とAPIGateway Re
![[ChatGPT API][AWSサーバーレス]ChatGPT APIであなたとの会話・文脈を覚えてくれるLINEボットを作る方法まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/282fb3217ad4059f9bd0462360450c5018904535/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Fline-eyecatch.jpg)
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
Rails 7とReactによるCRUDアプリ作成チュートリアル（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Create a CRUD App with Rails and React · James Hibbard 原文公開日: 2022/04/01 原著者: James Hibbard 日本語タイトルは内容に即したものにしました。 React logo is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0. ほとんどのWebアプリケーションでは、何らかの形式でデータを永続化する必要があります。これは、サーバーサイド言語で作業する場合はシンプルにやれるのが普通です。しかし、そこにフロントエンドのJavaScriptフレームワークも加わってくると、少しややこしくなり始めます。 本チュートリアルでは、Ruby on Rai
フロントエンドエキスパートチームが選ぶ web.dev Live2020 オススメセッション - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれから」、「Google I/O セッションまとめ」などフロントエンドに関する情報を社内に共有してきました。 今回行ったのは、2020年6月30日から7月2日にかけて3日間オンラインで開催された web.dev Live2020 のセッションについての情報共有です。各セッションはYouTubeにて視聴できます。 今回は各チームメンバーが視聴したセッションの中から、それぞれ2つのセッションを選んで内容と感想を紹介します。 まだ web.dev Live2020 を見ていない方が興味を持つきっかけになれば幸いです。 BaHoのオススメ Ba
GPTでソースコードからpatchを生成し続けたらプログラミングを自動化できるのでは？？？？ - laiso
と思ってやってみたら結構実現できてウケたので解説します。 はじめに 最近のGPT(LLMs)アプリケーション開発界隈は「プロンプトの内容を試行錯誤して結果を期待する」フェーズから「LLMsの特性を生かした今までできなかった自動化を実現」という段階が訪れつつあって楽しい時期です。 LlamaIndexというOSSではDBのスキーマと自然言語からSQLを自動生成してその場で実行するというクレイジーな機能があるのですが(A Guide to LlamaIndex + Structured Dataを参照) これと同じ発想でソースコード全体からpatch(patch - Wikipedia)を生成してその場で適用するというアイデアを思いついたのでしばらく検証していました。 「コミットメッセージを先に書いてそれを満すコミットをGPTに生成してもらう」ようなイメージ。 書いたコードはpmonというコマ
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
Today we’re excited to announce the release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified con
Athena Amazon Athenaは、標準SQLを使用してAmazon S3に保存されたデータを分析することができる、強力でサーバーレス、インタラクティブなクエリサービスです。複雑なETLパイプラインやデータウェアハウスを設定して管理する必要がなく、大量のデータを処理する組織にとって魅力的なオプションです。ただし、Athenaの価格設定は、予算が厳しい場合など、すべてのユーザーに適しているわけではありません。このブログ投稿では、Athenaの代替となる、低コストで同等の機能を提供できるアルティメットを紹介します。 利点: Athenaの主な利点の1つは、Amazon S3のデータを、複雑なETLプロセスや専用のデータウェアハウスなしに、標準SQLクエリを使用して分析できることです。 Athenaはサーバーレスでもあり、データ量やクエリの複雑さに基づいて自動的にスケールされるため、事前
フロントエンドカンファレンス北海道 2024にて「ウェブエンジニアでもWasmを使いたい!」というタイトルで20分のトークを行いました． 当日のトークでは，WebAssemblyの特徴に触れつつ，特殊な用途[1]以外でWebAssemblyをどのように活用できそうか，実際にAssemblyScriptのコードを例に紹介しました． AssemblyScriptはTypeScriptをWebAssemblyにコンパイルできる言語として紹介しましたが，より正確にはTypeScriptと同じ構文を持つ言語をWebAssemblyにコンパイルする言語という方が正しいかもしれません． これはTypeScriptにはない構文などをAssemblyScriptでサポートしているという話ではなく，TypeScriptの型推論などの言語機能を活用してAssemblyScriptのコードを書くことができるように
技術部の笹田（ko1）と遠藤（mame）です。クックパッドで Ruby (MRI: Matz Ruby Implementation、いわゆる ruby コマンド) の開発をしています。お金をもらって Ruby を開発しているのでプロの Ruby コミッタです。 昨日 12/25 に、恒例のクリスマスリリースとして、Ruby 3.2.0 がリリースされました（Ruby 3.2.0 リリース）。今年も Ruby 3.2 の NEWS.md ファイルの解説をします。NEWS ファイルとは何か、は以前の記事を見てください。 プロと読み解く Ruby 2.6 NEWS ファイル - クックパッド開発者ブログ プロと読み解くRuby 2.7 NEWS - クックパッド開発者ブログ プロと読み解くRuby 3.0 NEWS - クックパッド開発者ブログ プロと読み解く Ruby 3.1 NEWS -
Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確認 $ npx tsc -v # ts初期化: tsconfig.json生成 $ npx tsc --init tsconfig.jsonの設定する。 // tsconfig.json { "compilerOptions": { "target": "ES2019", "module": "commonjs", "sourceMap": true, "outDir": "./dist", "strict": true, "esModul
最近、週末の趣味プロジェクトとして Cloudflare Workers（と Vercel Edge Functions）向けの Slack アプリ開発フレームワークを作りました。 私は普段 Slack の Developer Relations Engineer として Qiita の Slack チームの公式な記事を書いているのですが、この Cloudflare Workers 向けのものは業務で開発した公式ツールではなく、完全に個人プロジェクトなので、Qiita の Org ではなく Zenn に個人的な記事として書くことにします。 ・・・そして、書き終わってみると、随分と長い記事になってしまいました。興味のあるところだけでもぜひ読んでみてください。 この記事で説明するもの この記事では、Slack アプリ開発の基本と、以下のライブラリの使い方について解説していきます。 「Slack
リポジトリ: github.com 今回の変更では、面倒事を減らしスライド作成に集中できるようにすることを目標にしていました。 Fusumaとは？ #0CJS MDX(Markdown + JSX(optional)) を使いスライドを作れる プレゼンターモードの提供(なぜかTwitter流せたりや落書きもできる) 音声録音とスライドの操作記録を保存できる github pagesへのデプロイがメインで、pdfでも出力可能 大きな変更 og:imageを自動生成/設定するようにしました ogp用に画像を設定するのがめんどくさいという意見があり、自動的に生成するように追加しました。現在はスライドの1ページ目を画像化しています。 ユーザー側へCSS Variablesを提供しました v1では、publicで外に出さずに自由にcssを書いてもらうようにしていましたが、0から書くのはめんどくさい部
主張 現代では、 npm に publish するものを除けば TypeScript をコンパイルして配布する必要はほぼないと考えています。 TypeScript のコンパイルをしない環境、例えば deno や rome を使うと、コンパイルをするというステップが省くことで開発体験が大きく向上する、という肌感があり、ローカル環境ならこのメリットを優先するべきと考えています。 基本的に、ビルドはフロントエンド/サーバーともに配布前の最後の一回だけでいいはず、というのが自分の主張です。 Rome Toolchain Deno - A secure runtime for JavaScript and TypeScript 理由 現代の npm のお作法に従うと TypeScript に依存したものを npm の registry に置くことは、あまりよくないこととされていますが、モノレポ内や特
npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作りました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な技術スタック npm TypeScript Node.js Native ESM Prettier ESLint Vitest Renovate GitHub Actions vscode 向けの各種設定ファイル (extensions.json, launch.json, settings.json) GitHub の「テンプレートリポジトリ」機能を使う GitHub にそれっぽい機能があったので使ってみました。 docs.github.com 「Use this template」というボタンが出て便利です。 「Use t
GitHub Actions の JavaScript Action を TypeScript で書いた - はやくプログラムになりたい
GitHub Action を TypeScript で作成したので，覚え書きがてらどうやって作ったかについて書きます． github-action-benchmark という Action をつくりました． 紹介記事：継続的にベンチマークを取るための GitHub Action をつくった Action とは 今年9月に GitHub Action v2 がリリースされました．GitHub Action は GitHub が提供する CI/CD サービスです． 既存のサービスと大きく違う点は，処理を汎用的に Action として切り出して再利用できることです． 例えば，GitHub からのリポジトリのクローン actions/fetch や Node.js のセットアップ actions/setup-node などの基本的な実行ステップも Action として実装されています． Acti
webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog
個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます📝 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにした デフォルトでinstallされなくなったNode.js系のpolyfilをinstallした [hash]ではなく[contenthash]を利用するようにした その他の対応事項 webpack-assets-manifestのデフォルトのファイルパスが変わる おわりに 利用していたwebpackのビルド構成 基本的には以下のようなライブラリを利用したBabel + TypeScript + Vueで、 mini-css-extract-pluginでcssを別ファイルで生成するようにして、we
概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j
初めに 昨日のアップデートでAWS Lambdaは実行結果の返却値を一括の応答ではなくストリーミングな徐々に応答するようなことが可能となりました。 いざ日本語に直そうとすると微妙に難しいタイトルで実際の公式の翻訳がどうなるか次第では少しタイトルを調整するかもしれません。 これまでの方式ではLambdaの機能としては処理完了まで返却値を返すことができず、そういった機能が必要な場合はWebSocket等別の手段をユーザ側で実装する必要がありました。 今回のアップデートではTransfer-Encoding: chunked形式による返却に対応しHTTP/1.1の仕様の範囲内で徐々に値を返却できるようになりました。 またこの方式は応答サイズの上限が従来の6MBではなく20MBまでの対応となるためより大きなレスポンスを返すことができるようです。 Configuring a Lambda funct
![[アップデート]AWS Lambdaでストリーミングな応答が可能になりました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ea229c5864909168e5ad0a78416f2ea552c21f1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F08%2Faws-lambda.png)
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
既存の LLM コード生成の問題 LLM は行カウントやワードカウントが苦手。 例えば自分は SourceMap を扱うコードのテストを書かせようとしたが、モックデータの line:column がガバガバな位置を指してまともにテストにならない。行カウント/ワードカウントができないのはつまり diff がうまく生成できない。 これらの問題があって、コードを生成するパイプラインを組む場合、 全文出力が主流になっている。 ここで何が問題になるかというと、コードが膨らんで来た時に、(書き変える対象が一部だとしても)生成が顕著に遅くなる。うまく生成できなかった時にリトライを繰り返すと、問題がさらに悪化する。 改善手法の提案: 明示的な Line Number の付与 最近の LLM は入力ウィンドウがある程度大きくても、そこそこの速度で応答する。(お金はかかるが...) 問題は生成速度にある。特に
Webpack 4 was released in February 2018. Since then we shipped a lot of features without breaking changes. We know that people dislike major changes with breaking changes. Especially with webpack, which people usually only touch twice a year, and the remaining time it "just works". But shipping features without breaking changes also has a cost: We can't do major API or architectural improvements.
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": (_
23 Feb JavaScript performance beyond bundle size Posted February 23, 2021 by Nolan Lawson in performance, Web. 8 Comments There’s an old story about a drunk trying to find his keys in the streetlight. Why? Well, because that’s where it’s the brightest. It’s a funny story, but also relatable, because as humans we all tend to take the path of least resistance. I think we have the same problem in the
In this blog post, I’ll explain everything you need to know in order to use and produce native ECMAScript modules on Node.js. The GitHub repository iterable is an example of a TypeScript ESM package that works on Node.js. It still uses the "typesVersions" workaround (which isn’t needed in TypeScript 4.7 and later). (Thanks to Guy Beford and Oleg Drapeza for their feedback on this post.) TypeScript
BabelプラグインをRust (SWC) に移植して、JavaScriptのコンパイルを爆速にする 〜プラグイン作成編〜 | Wantedly Engineer Blog
BabelプラグインをRust (SWC) に移植して、JavaScriptのコンパイルを爆速にする 〜プラグイン作成編〜 はじめにこんにちは、WantedlyのDX (Developer Experience) チームでインターンをしていた田村です。今回のインターンではWantedlyのフロントエンドのトランスパイラをBabelからSWCに移行することを目標に調査を行いました。BabelからSWCの移行方法については前の記事(基本編)をご覧ください。本記事では簡単なSWCカスタムプラグインを作成することを通して、プラグインの書き方、使い方、テストを紹介します。本記事は、BabelプラグインをSWCに移植する際に必要な知識は一通り網羅しています。 環境cargo 1.59.0 (49d8809dc 2022-02-10)npm 8.1.2また、この後インストールするツールのバージョンは以下
[Slack][AWSサーバレス]Slackワークスペースへの読み取り権限がほぼゼロのChatGPTボットを作る | DevelopersIO
ちなみにこういうMarkdownテーブルの作成もSlackボットにお願いできます。便利。 Slack App設定 https://api.slack.com/apps/newより Create new app を押下し新規アプリを作成します。 左メニューから各項目を選択しつつ以下のような設定をします。 Basic Information Add features and functionality で以下を選択します。 Bots Event Subscriptions Permissions OAuth & Permissions Scopes に以下を加えます。 app_mention:read chat:write Event Subscriptions Subscribe to bot events に以下を加えます。 app_mention シークレットを控える Basic Inf
![[Slack][AWSサーバレス]Slackワークスペースへの読み取り権限がほぼゼロのChatGPTボットを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b0bf98c901ba636cbebacc15d02492fc4c92abd/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F03%2Fchatgpt.png)
ts-blank-space
What is ts-blank-space? ts-blank-space is a fast type-stripping compiler that converts TypeScript to JavaScript. It supports a modern subset of TypeScript by erasing the types and replacing them with whitespace. That's it. It is not a type checker and does not perform any other code transformations. The underlying technique can improve build performance and simplify development. The implementation
Today we’re excited to announce our beta release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript, smaller, simpler, and faster. We’ve implemented the new decorators standard, functionality to better support ESM projects in Node and bundlers, new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuratio
この記事は新歓ブログリレー2023 37日目(4/14)の記事です。 こんにちは、19B/22Mの翠(sappi_red)です。SysAd班で活動していました。Viteのチームメンバーだったりもします。 この記事ではViteでの開発中のSSR対応の仕組みがどう実装されているか、どうしてそうなっているかについて紹介します。 前提知識 特筆すべき点のみを取り上げたざっくりとした説明です。 Webフロントエンド Web上のサービス・アプリケーションのユーザー側に近い開発領域のことを指します。「ボタンを押したときにどうなるか」や「ページ内のどこに何が表示されるか」をプログラムするなど、主にユーザーの端末上で動作するプログラムの部分を指します。 Vite Webフロントエンド開発において使われているツールの一つです。フロントエンドのプログラムを構成するファイルを各実行環境(ブラウザ、Node.jsな
Tauri Mobile - Develop mobile apps with JavaScript and Rust
2/28/2023Tauri Mobile - Develop mobile apps with JavaScript and Rust#code#vue#rust Studio Terabyte is a full stack web development studio who finds and builds solutions that fit your project What is TauriTauri describes itself as a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS
Version 1.92 is now available! Read about the new features and fixes from July. June 2022 (version 1.69) Update 1.69.1: The update addresses these issues. Update 1.69.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the June 2022 release of Visual Studio Code. There are many updates in this version that
All JavaScript and TypeScript Features of the last 3 years
TypeScript as envisioned by Stable DiffusionThis article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / ECMAScript and TypeScript . Not all of the following features will be relevant to you or even practical, but they should instead serve to show what’s possible and to deepen your understanding of these languages. There are a lot of TypeScript fe
Dockerfile に入門して Node.js アプリを作ってみる - 30歳からのプログラミング
Docker への入門の一環として、自分で Dockerfile を作成し、それを使って Node.js アプリを Docker Container で動かしてみる。 Hello World Dockerfile を使うことで、既存の Docker Image を編集して新しい Docker Image を作ることができる。 具体的には、Dockerfileという名前のファイルにコマンドを記述していくことで、その内容に基づいた Docker Image を作成できるようになる。 例えば以下の Dockerfile では、FROMとCMDというコマンドを使っている。これらのコマンドの意味は後述する。 FROM node:16 CMD [ "echo", "Hello World" ] カレントディレクトリに上記のDockerfileがある状態で% docker build -t sample
バグバウンティにおける 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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
Announcing TypeScript 5.0 - TypeScript
AWS Athenaの安価な代替手段：Lambda x DuckDB - Qiita
ウェブエンジニアでもWasmを使いたい! アフタートーク
プロと読み解く Ruby 3.2 NEWS - クックパッド開発者ブログ
Express+TypeScriptをはじめるときにやったこと - くらげになりたい。
Cloudflare Workers で Slack アプリを動かす方法
Markdownでスライドを作るツールのFusumaのv2をリリースをしました - 技術探し
内部モジュールでは TypeScript をコンパイルせずに配る
npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog
tsconfig.jsonの主要オプションを理解する - Qiita
[アップデート]AWS Lambdaでストリーミングな応答が可能になりました | DevelopersIO
LLM にコードを「差分」で書き換えさせるためのアイデア
Webpack 5 release (2020-10-10) | webpack
JavaScript performance beyond bundle size
TypeScript and native ESM on Node.js
Announcing TypeScript 5.0 Beta - TypeScript
Viteでの開発中のSSR対応の仕組み
Visual Studio Code June 2022