どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite
HonoXについて
2月9日、予告していた通りHono v4をリリースしました。 そのHono v4のリリースと同時に、Honoを使ったメタフレームワーク「HonoX」を公開しました。 今回はHonoXのいくつかの特徴について書いてみたいと思います。これは使い方というより作者目線の思想みたいなものです。 メタフレームワーク HonoXとは一言で言うと「HonoとViteを組み合わせたメタフレームワーク」です。HonoX自体が機能を提供しないのが肝です。 もう少しだけ具体的に言います。HonoXで扱うのは「Honoのインスタンス」そのものです。つまりあなたがHonoXでアプリを作るということは「Honoのアプリを作る」ことになります。その証拠にエントリーポイントになるapp/server.ts内で出てくるappはHonoのインスタンスなので、hono/devにあるヘルパー関数showRoutes()がそのまま使
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの Electron将棋 (electron-shogi) GitHub: sunfish-shogi/electron-shogi GitHub Pages: Electron将棋 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて使う必要があります。AI と GUI がやりとりするための USI という共通仕様があり、 USI
ある日突然、あなたに190倍（当社比）高速なdev serverができたらどうしますか...？ この投稿ではWebアプリケーションのビルドツールをCreate React AppからViteへと移行した背景・手順・結果について説明します。 Vite等のビルドツールやフロントエンドアプリケーションの開発体験に興味・関心がある方、中でもCreate React App（以下、CRA）を利用していてdev server起動やHot Module Replacementの速度に課題を抱える方の参考になれば幸いです。 前置き SmartBankが提供するB/43の開発チームはユーザーが利用するモバイルアプリだけでなく、カード発行会社としてのバックオフィス業務を支援する管理機能を内製しています。 本人確認業務に用いる画面イメージ。データはもちろんダミー B/43にちなんでA/43*1 と名付けられたこ
GitHub Appを使ってDependabotが作るpull requestを自動マージさせる - inSmartBank
こんにちは。皆さんは自身がメンテナンスするソフトウェアが依存するパッケージの更新、いわゆるdependency updateをどのような形で行っていますか？ SmartBankが提供するサービスB/43の開発では主にGitHubのDependabot version updates機能を用いて定期的なdependency updateを行っています*1。これは簡単にいえばGitHub repositoryにYAMLファイルを置いておくだけで自動的かつ定期的にversion updateのpull requestを作ってくれる便利なやつです。 便利ではあるのですが、アプリケーション規模やチーム体制によっては日々作成されるpull requestをさばくのに苦労することがあります。本記事ではそのような運用課題を解決するために導入した、GitHub Appを使った自動マージについて解説します。
About Nue 鵺（ぬえ）。 猿の顔、タヌキの体、蛇の尻尾、虎の脚を持つ妖怪です。 日本人ならNueと聞いた場合、思い浮かべるのは↑かと思うのですが、 これは先日リリースされた、フロントエンド開発ツールセットです。 ＊「Nue」はドイツ語で、「新しい」という意味だそうな *「Nue」はドイツ語の「neu」に由来しており、英語で「新しい」という意味だそうな 開発者はTero Piirainenという方で、 現在彼１人で開発しています。 ここを見ると、「Webの開発方法が変わるかも」と かなりすごいことが書いてありますが、どんなものなのか見ていきましょう。 Nueとはなんなのか？ 公式を見ると、↓のようなことを言っています。 React、Vue、Next.js、Vite、Astroの代わりになる NueはSPAMPAの両方に対するサポートを備えたWebアプリケーションビルダーである Nue
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
Honoの今の状況 - ゆーすけべー日記
この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。 Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。 当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。 それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ること
今日から始めるSvelte入門
みなさんはSvelteって知っていますか？ SvelteはReactやVue.jsなどと同じ、モダンなJSのUIフレームワーク(厳密に言うと、コンパイラベースのJSフレームワーク)です。 0からSvelteに入門し、Vite/TS/Tailwindを用いての漢字クイズアプリ開発を通して、その記述を理解しましょう。 ✅ Svelte ✅ Vite ✅ TypeScript ✅ TailwindCSS
Announcing SvelteKit 1.0
Announcing SvelteKit 1.0 Web development, streamlined The Svelte team Dec 14 2022 After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes. We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we thi
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ～技術の社会実装のための『開発』～ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn
🌶️ IMHO 🌶️ - Rich Harris on frameworks, the web, and the edge.
この記事はSvelte/Sveltekitの作者であるRich Harris氏による講演「🌶️ IMHO 🌶️」を翻訳したものです。 この記事の作成には、Whisperによる書き起こし、DeepLおよびChatGPTによる翻訳を補助的に使用しています。 また、本文中には適宜訳注を入れています。 この場を借りて、翻訳を許可していただいたRich氏、 またこの翻訳をきめ細かくレビューしていただいたtomoam氏、英文解釈の相談に乗っていただいたshamokit氏へ感謝を表明したいと思います。 So, I'm going to be giving a talk tonight called In My Humble Opinion, and it's a collection of loosely connected thoughts about recent trends in front
技術について思っている印象とかを、定期的にまとめておくとあとで見直したときに良い振り返りになるかもしれないなと思ったのでまとめておく。 上記の目的でやるので思い切り主観で書く。 Vue について思うこと composition-api がとてもいい。 composition-api で頑張るなら React 使えよみたいな意見を耳にしたことがあるが、Vue の良いところは、template と style が JS と別個で動くというところだと思っているので、composition-api の前身である Option API が改善したところで、React と比較してどうこうみたいな見解の変化はない。 Vue を使っている限りは、基本的には CSS in JS 戦争に巻き込まれないので平和。 Vue3 をまださほどキャッチアップしていないので適当な意見になるが、SFC の書き方自体が結構変
![[ポエム]VueとReactとCSSについて思うこと2021/1月版](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5b1a7d33962fdef07ef6cb7b48fb4f1fd91dbdf/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14GjOZkrZMgKwcEyykl5_iULVEVkUUJd793r9_z8DF4s%3Ds250-c)
Astro ゆく年くる年
8 月 30 日に v3.0 がリリースされ、それから約 3 ヶ月後の 12 月 5 日には v4.0 がリリースされており、メジャーアップデートのペースがやや早かったように感じますね。Astro の co-creator である Matthew Phillips によると、v4.0 における大きな変更の一つに Vite 5 へのアップデートがあり、これはもともと v3.0 に含まれる予定だったのが、Vite 5 のリリースが遅れてしまい、一方で v3.0 の目玉機能である View Transitions を早くリリースしたかったため、まず先に v3.0 をリリースし、その後に v4.0 で Vite 5 を含めるという流れとなり、結果的に v3.0 と v4.0 のリリースが短期間で連続してしまった、という事情があったようです。 GitHub スター数の推移 https://star-
フロントエンドエンジニアたちが語る、Tips【23選】 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 フロントエンドエンジニアの皆様、今のフロントエンドを楽しんでおりますでしょうか？ 変化の多いフロントエンド領域を楽しむために・・・ ラクスが開催している 「フロントエンド LT会」で発表された資料をご紹介します！ フレームワークや開発言語別にまとめておりますので、興味があるところだけを少し摘まむのも大歓迎です。 9月に開催した「フロントエンドLT会 - vol.4」は、参加者が500名越えとなるイベントなりました。 2022/1/19(水)に「フロントエンドLT会 - vol.5」を開催しますので、ご興味ある方は是非登壇/視聴申込よろしくお願いいたします！ rakus.connpass.com では、早速見ていきたいと思います！ イベント詳細はこちらからご確認ください。 ・フロントエンドLT会 vol.1 -2020夏祭り- ・フロントエンドL
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年（2023年）の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し
2022年のNext.jsのアップデートを振り返る
はじめに 2022年も残すところあと3日となりました。 皆様いかがお過ごしでしょうか？ 筆者は本日が仕事納めです。 今回は忘年記事として2022年のNext.jsのアップデートを振り返っていきたいと思います。 早速ですが以下の通り、2022年は5回も大きなアップデートがありました。 12.1(2022/02/18) 12.2(2022/06/29) 12.3(2022/09/09) 13(2022/10/26) 13.1(2022/12/23) それではそれぞれのアップデートを振り返っていきましょう。 12.1(2022/02/18) オンデマンドISR（ベータ版）：getStaticPropsによるページの即時再検証 SWCへのサポート拡充：styled-components、Relayなど next/jestプラグイン：SWCによるゼロコンフィグのJestサポート SWCによる高速な最
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームの
この記事の概要 tmuxとneovimを組み合わせている様子… こんにちは！食パン🍞と申します🏜 普段はフロントエンドを中心にパソコンをｶﾀｶﾀしている者です💻 私は普段のコーディング時のメインエディタとして、ターミナル環境下で、Neovimを用いています。 (Neo)Vimは、その独特な操作体系ゆえ慣れるまでがちょっぴり大変ですが、一度習熟すると非常に効率よくテキスト操作を行えるため、日々愛用しています。 また、開発作業の過程では、複数の画面を都度切り替えながらコーディングをしたり、複数のシェルを用いてコマンド操作を実行したくなる機会が多々あります。 例えば、 Viteでフロント開発環境を立ち上げてリアルタイムでコード変更を確認したい docker composeで複数のコンテナを立ち上げつつターミナルでログを確認したい それはそれとしてNeovimも並行して使いたい といった具合
Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク
🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README からの抜粋となりますが、次のような特徴があります。 ⚡️ Write style objects or style props, extract them at build time → Style 用のオブジェクトや Props を定義してビルドで抽出 ✨ Modern CSS output — cascade layers @layer, css variables and more → Cascade Layers
はじめにこんにちは。金融グループ所属、新人の藤戸四恩です。 本記事は夏の自由研究ブログ連載2022 5日目の記事です。 今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。 夏の自由研究ということで、以前から気になっていたviteを使って開発しました。 いままでフロントエンドの開発環境を作成する際には、create-react-app を使っていましたが、少しもっさり感を感じていました。そこで従来のビルドツールよりも高速に動作すると噂のviteを使ってみました。 また、掲示板アプリを開発する上で勉強になったパスワードをハッシュ化してDBに保存するところが勉強なったところをピックアップしました。 作ったアプリ今回の掲示板アプリでは、投稿ができて、投稿されたものが一覧で表示されます。 また、一覧表示されている投稿のうちログインしているユーザー本人が投稿したもの
Denoのフロントエンド開発の動向【2021年秋】
半年ほど前にDenoのフロントエンド開発についてまとめた以下のような記事を書きました。 ここ半年程でまた色々と変化があったため、改めてまとめてみます。 要約 DenoにNode.js互換モードが実装されました Aleph.js v0.3 betaがリリースされました Freshやpackup, Ultraなどの新しいフレームワーク/ツールが登場しました SnelによってSvelteアプリが作れるようになりました vnoがSSRやSSGなどをサポート VelociraptorがGit hooksをサポート npmパッケージとの相互運用性について Node.js互換モード Deno v1.5でNode.js互換モードが実装されました。 現時点でもexpressやkoaなどのパッケージがある程度動作するようです。 現在、このNode.js互換モードを使用して、ViteやNext.jsなどを動かす
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実現できません。 大きな課題として次の2つが挙げられます。 コンテンツの転送量が大きく、表示までに時間がかかる 物理的なクライアント/サーバー間の距離が遠く、転送に時間がかかる これらの課題を解決するため、様々な技術が発展してきました。今回はその中でもSSR（サーバーサイドレンダリング）と、CDN（コンテンツデリバリーネットワーク）に注目します。 本記事ではSSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します。フレ
2024年1月26日紙版発売 2024年1月26日電子版発売 工藤智祥 著 B5変形判／384ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13943-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア，マークアップエンジニア，そしてデザインシステムの構築に興味があるデザイナーを対象に，Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
Vitestを使った型テストの始め方
WeJS @ 42nd https://wajs.connpass.com/event/293440/
Announcing Nuxt 3.0 stableWe are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class TypeScript support and the result of more than two years of research, community feedback, innovation, and experiment to make a pleasant full-stack Developer Experience for Vue development to everyone. [Read M
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればGulpやWebpack等の選択肢もありましたが、Viteの設定が非常に簡便であるという噂を聞いたので試してみることにしました。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 各ツールの役割 MicroCMS：ヘッドレスCMS。コンテンツのデータを登録できる、APIを提供している。 11ty：ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターで、HTMLを出力することができる。複数のテンプレート形式に対応している
framekit で静的サイトを API 化する
これは monaco-editor で作られたエディタを操作してるサンプルです。 アイデア 複雑な SPA を同じページ内部で動かそうとすると、主にビルド方法や相対パス周りで問題が発生します。例えば vite と webpack で噛み合わなかったり、monaco-editor のように暗黙の loader を大量に設定する必要がある場合だったり、デプロイされた場所のどういう相対 URL でモジュールを解決するか、です。 このうち、部分的に複雑なコンポーネントを埋め込む場合(例の monaco-editor がそうです)、古の iframe widget のアプローチでこれを解決できるのでは、と考えました。また実際に手元で発生していた問題で、とある画面でコンパイラ一式を埋め込んで rollup のビルド結果をプレビューする、という機能がプロジェクト全体を重くしてしまった、というのがありまし
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
Cloudflare Pages + Functions + Workers KV + vite + preactで簡単なページを作った
今回作ったページは下記。 https://haropuro-shuffle.pages.dev/ 元ネタ リポジトリ YuheiNakasaka/haropuro-shuffle 簡単なルーレットアプリ。ルーレットで出た結果をWorkers KVに保存。保存された文字を都度更新して表示(リアルタイムではない)。結果が1000件を超えるとクリアされる。 開発の流れ Workers KVの設定 vite + preactのアプリ開発 Cloudflare Pages/Functionsにデプロイ Workers KVの設定 Workers KVとは PagesやFunctionsから呼び出せるKey-Valuesストア。ここ見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。 設定方法 まずGUIからだとWorkersのページからnamespace(database
Snowpack
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel What is Snowpack?Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Sno
Plasmoとは Plasmoはブラウザ拡張機能を作成するためのReactフレームワークです。 テストや自動デプロイするための機能なども提供しておりオールインワンなフレームワークとなっています。 公式サイトに行くと「ブラウザ拡張機能におけるNext.js」という強気なワードが確認できます。 It's like Next.js for browser extensions! Plasmoの特徴 Plasmoは以下のような特徴を持ったフレームワークです（公式より一部抜粋）。 ファーストクラスのReact＋Typescriptサポート ライブリローディング + React HMR .env* ファイルサポート BPP による自動デプロイメント Svelte と Vue をオプションでサポート またゼロコンフィグで開発を始めることができ、ブラウザ拡張機能の設定ファイルであるmanifest.jso
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ
{ "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test --update-snapshots", "serve": "ts-node -r tsconfig-paths/register server.ts", "test": "pnpm run _docker
previs: 面倒なマークアップは AI にやらせる
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応 Webアプリケーションフレームワーク「SvelteKit 1.0」が正式リリースとなりました。 SvelteKitは、Web UIフレームワークの「Svelte」と、ビルドツールの「Vite」を基盤としたWebアプリケーションフレームワークです。 It's here.https://t.co/mP8vD5zcta — Svelte (@sveltejs) December 14, 2022 Svelteは、読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。 仮想DOMを使わず、コンパイル時に状態が変化する箇所を特定し、その変更のためのJavaScriptを生成することで実行時の高速な状態変更を実現することも大きな特徴です。 J
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
ハードシングスを引き起こしたHype Driven Development(HDD) | HiCustomer Lab - HiCustomer Developer's Blog
Hype Driven Development(HDD) シード・アーリーステージのスタートアップの開発者のみなさん、こんにちは。突然ですが、ソフトウェア開発していますか？毎日設計しコードを書いていますか？私は毎日しています。毎日ビジネスドメインと向き合っております。今日はそんなみなさんに、弊社のソフトウェア開発の失敗談（ ハードシングスへの突入と脱出 の「根の深い技術的負債」を掘り下げる内容になっています）を共有します。この失敗からなにか参考になるものがあれば幸いです。 実際に起ったこと 2018年初頭にサーバレスとDDDの導入 弊社のHiCustomerサービスのアーキテクチャはサーバーレスとDDDを軸に設計されました。サーバーレス環境としては、AWS APIGateway、AWS Lambda、AWS DynamoDBを使ったAWS推奨の構成を採用しました。DDDはGolangを使用
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vite で最高の開発体験を手に入れる - pixiv inside
Vite + Tailwind CSSでペライチHTMLをマークアップする
Electronを使ったPC向け将棋アプリ開発 - Qiita
CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank
あたらしいフロントエンド開発ツール「Nue」 | DevelopersIO
[ポエム]VueとReactとCSSについて思うこと2021/1月版
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
アプリケーションコードに変更を加えないNode.js Native ESMへの移行
ターミナルから離れたくない…Tmux(＆Neovim)の設定例🖊
React + Goで簡素な掲示板アプリを作ってみた | フューチャー技術ブログ
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA
Tailwind CSS実践入門
Announcing 3.0 · Nuxt Blog
MicroCMSとViteで作るかんたん静的サイト | DevelopersIO
ブラウザ拡張機能を作るためのReactフレームワーク『Plasmo』