新しいプロジェクトに参加してローカル環境を作り始めると、何かとエラーに遭遇します。 また、設計や実装について開発者に相談したり、コードレビューを依頼することもありますね。 開発者が近くにいれば、（それなりに、程よいタイミングを見計らって）話しかけて、エラーの原因を調べてもらったり、設計方法をホワイトボードにスケッチしながら相談できますが、リモート開発ではそうはいきません。 リモート開発で成果を上げるためには、このブログのように何の装飾もインタラクティブ性もない文章で、自分の状況や相談したい事柄を正確に伝える必要があります。 とはいえ私は昔、「文章がわかりにくい」と毎日、毎日上司にフィードバックをもらうくらいには文章を書くのが下手くそでした。今もわかりやすい文章が書けている自信はありません。 それでも、これまでに何度か、議論が好転したり、プロジェクトが前に進むきっかけとなる文章を書けたことが
皆さんnpmパッケージのバージョンを上げるときにハマって依存地獄から抜けられなかったことはありませんか？ 私はあります。 複雑怪奇な依存関係を調べてみようとnode_modulesを覗いてみて、そのカオスっぷりに臭いものに蓋をしたことはありませんか？ 私はあります。 そこでnode_modules以下について調べてみたのですが、node_modulesにどんな問題点があって、npmやyarn, pnpmは何を目指していたのか時系列順に紐解いた方がわかりやすいことに気づきました。 ここでは初期のnpmが抱えていた問題から今に至るまでを順を追って説明します。 するとnode_modulesの仕組みの他に、各パッケージマネージャの方針の違いが見えてくるはずです。 初期の頃のnpm (~2015年以前) この頃はシンプルで、依存関係はそのままnode_modulesのディレクトリ構造に反映されてい
React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro. React Flow Pro Getting Started with React Flow Make sure you’ve installed npm, pnpm or yarn. Then you can install React Flow via:
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Docker のキャッシュを全力で使いこなそう
tl;dr 依存パッケージのダウンロードは最初に実行しよう マルチステージビルドは必須と覚えておこう RUN --mount=type=cache を使おう（でも BuildKit を使えるかは確認して！） pnpm fetch も期待大 はじめに みなさん，Docker を使って開発するときに依存パッケージのダウンロードをずっと待ち続けた経験はありませんか？「依存パッケージの追加なんて頻繁に発生しないし，我慢しよう…」と妥協している方も多いでしょう． 頻繁に発生しない？本当にそうですか？ 追加ではなくても依存パッケージの更新なんてよく発生するし，ベースイメージを更新することもあります．その度に全部ダウンロードし直しなんて堪ったもんじゃありません．モバイル回線だったら一瞬でギガがなくなっちゃいますよ！ ということで，この記事ではキャッシュを活用して依存パッケージのダウンロードが何度も発生し
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
こんにちは！ブロックチェーンチームでエンジニアをしている id:dorapon2000 です。最近買ってよかったものは「潮の華 あおさといわしふりかけ」です。 今回は Git の Squash マージについての知見を共有したいと思います。端的に言うと、 チーム開発で Non Fast-Forward マージをやめて Squash マージを採用し、再び Non Fast-Forward マージに戻した経緯の説明です。Squash マージを運用に導入するか考えたことがある方の参考になればと思います。 Squash マージとは マージには 3 種類ありますね。みなさんはトピックブランチを main へマージする際にどのマージ方法を利用していますか？ Fast-Forward マージ git merge --ff-only Non Fast-Forward マージ git merge --no-f
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
皆さんはGitHub Copilotを使っていますか？VSCodeやIDEに拡張を入れると、生成AIとペアプロのようなことができるという、アレです。 最近はこれがないと仕事ができない。なかった時代を思い出せないという人が増えています。プログラミングの生産性に明確に差が生まれます。僕もその口です。 ただ、GitHub Copilotを使いこなせていないという話も度々聞きます。Copilotが提案してくれるコードが微妙で役に立たないというような感じです。 その差はどこにあるのか？を知りたくて6/24に試しにCopilotを使った動画を撮ってみました。実践的なCopilot実演動画というのはすごく珍しいらしく、GitHub dockyardというコミュニティの竣工イベントに登壇してみないか？というお声がけをいただいたので、8/5にGitHub Copilotを使いこなせるとどうなるのかというライ
yarn と npm の栄枯盛衰
yarn と npm の栄枯盛衰2021 年 8 月に yarn の v3 がリリースされました。2020 年の同月あたりに yarn v2 がリリースされたので、約 1 年ぶりのメジャーバージョンアップになります。 v1 → v2 のパラダイムシフトは強烈でしたが、 v2 → v3 は berry というパッケージ名は相変わらずで、 v2 の正統なバージョンアップでありちょっとだけ物足りなさを感じてます。 Get Started なにはともあれ、とりあえずは触ってみましょうか。 Node.js ≥ 16.10 であれば、 Corepack を使って以下のコマンドで yarn v3 をインストールできます。 $ corepack enable $ corepack prepare yarn@3.0.0 --activate # yarn.lock や README.md が生成される $
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
TypeScriptのモノレポ構成を考える
はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
Biome はじめました。
モチベーション そもそも TypeScript や JSX に詳しくないのでどう書くのがいいのか悩みたくない ESLint や Prettier の設定を なんとなく 設定して使ってしまっている Formatter / Linter 関連のライブラリの内容を理解せずにアップデートしてしまっている 依存関係は減らしていきたい Rust で書かれた言語向けの高速なツールが好き Rye とか Ruff とか efmt とか Biome Biome は Rust で書かれた Formatter / Linter を含むツール。本当におかしいくらい早い。 全然大きくないが、以下のソースコードに適用したときの速度。 $ pnpm run fmt > biome format --write ./src Formatted 114 file(s) in 11ms $ pnpm run lint > bi
npm install と npm ci って結局どう使うの？2023年版 - Mitsuyuki.Shiiba
うりうりさんの↓のコメントを見て、そういえばnpm ciって見たことあるけどチェックしてないなぁ。というかnpm installも雰囲気で使ってるなぁ。と思ったので、うりうりさんに教えてもらったことを手がかりに、npm installとnpm ciについて調べた。 これ、node_modulesキャッシュしてたり npm install使ってるけど npmのグローバルキャッシュ(~/.npm)をキャッシュした上で npm ciで早くなったりしないんだろうか GitHub Actions上でテストを約3倍早くした話https://t.co/MpmFktGBxU— wreulicke (@wreulicke) March 14, 2023 ちょこっと検索して見てみたところ、新旧情報があって自分が混乱したのと、公式ドキュメントには概要は書かれているものの詳しい内容は書かれていないので（僕が見つけ
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
Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。 Node.js 14は4月末でEOLで、Node.js 18までアップデートする必要があるけど、npmの変更が混ざって大変です。 Corepackを使うことで、Node.jsとnpmのアップデートを同時にやらなくても良くなり、問題を分割して対応できます！ Corepackを使ってNode.jsをアップデートする ⬆️⬆️https://t.co/mRHsBcYbpn pic.twitter.com/HiiCe7c5YE — azu (@azu_re) April 28, 2023 スライド: Corepackを使ってNode.jsをアップデートする ⬆️⬆️ Note: Node.js 14は2023-04-30でEOLで
2024年 React 環境構築 with Vite
はじめに 書いていて気づいたのですが、この記事に特に目新しいものはありません。コピペで最速環境構築をしたい方向けです。それぞれのツールについて細かい解説はしていないため、詳細は公式ドキュメントをご参照ください。 リポジトリはこちら。 Node.js この記事では Node.js のバージョン管理に volta を使用しますが、nvm や nodebrew などでも問題ありません。パッケージマネージャーには pnpm を使用したいところですが、2024 年 1 月現在、volta の pnpm サポートは実験段階のため、今回は npm を使用します。(そこまでして volta を使用したい理由はないのですが...) curl https://get.volta.sh | bash source ~/.zshrc # or ~/.bashrc volta install node # LTS版
タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！ という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背
開発者のためのReactJSロードマップ
ThemeSelection 高品質でモダンなBootstrap HTMLテーマや管理者向けテンプレートを提供するUIキットベンダ この記事は、著者の許可を得て配信しています。 https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824 ReactJSまたはReactは、ユーザーインターフェイスやUIコンポーネントを構築するためのオープンソースのフロントエンドのJavaScriptライブラリです。Facebookや個人の開発者や企業のコミュニティがメンテナンスをしています。近年、コンポーネントベースのGUI開発に最適なライブラリの一つとして成長しています。 AngularやVue.jsのようなフロントエンドフレームワークは他にもありますが、Reactが他と違うのは、コンポーネントベースのGUI開発だけに焦点を当ててお
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
このエントリーは pyspa Advent Calendar 2019 の 11 日目の記事です。昨日は @chezou の「Vein の iOS ショートカット複数 URL 対応しました」でした。 はじめに#TypeScript は大変に素晴らしい言語で、僕の手によくなじむ。そのせいか最近はめっきり TypeScript ばかり書いている。 今回のエントリでは、僕がこの一年くらいの間に磨いた TypeScript のテンプレートプロジェクトについて説明する。かなり何度も使って必要十分なものだけを含めるようにしている。 しかし、僕の知識の偏りがそのままになっているので、万人に合うというわけではないだろう。 とはいえ、開発環境の初期構築はかなり面倒な作業なので参考にして貰えれば嬉しい。 細かい説明なんかよりもコードを見た方が早いってハードコアな方は、こちらへどうぞ。 taichi/ts-te
現在WantedlyではNode.jsのパッケージ管理にyarn v1を使っています。現在私は開発者体験の改善を目指してyarn v2への移行を検討しているのですが、その過程でyarn v2が誤解されがちだと感じるようになりました。そこで社内への情報提供も兼ねて、いくつか誤解されがちだと思われる点を紹介したいと思います。 (わかりやすさのためにyarn v2と呼んでいますが、 yarn v3以降も含みます。これらはメジャーバージョンアップではあるもののyarn v1→v2のようにアーキテクチャが刷新されるわけではないからです) ポイント1: yarnをv2にするのにPnPは必須ではないyarn PnPはyarn v2の目玉機能で、パッケージをnode_modules以下に展開せずに仮想化してロードできるようにするというものです。node_modulesの展開作業が不要になるほか、依存関係の
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
Bun is an all-in-one toolkitWe love JavaScript. It's mature, it moves fast, and its developer community is vibrant and passionate. It's awesome. However, since Node.js debuted 14 years ago, layers and layers of tooling have accumulated on top of each other. And like any system that grows and evolves without centralized planning, JavaScript tooling has become slow and complex. Why Bun existsBun's g
yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。
Next.js Commerce – Vercel
Next.js CommerceA Next.js 14 and App Router-ready ecommerce template featuring: Next.js App RouterOptimized for SEO using Next.js's MetadataReact Server Components (RSCs) and SuspenseServer Actions for mutationsEdge RuntimeNew fetching and caching paradigmsDynamic OG imagesStyling with Tailwind CSSCheckout and payments with ShopifyAutomatic light/dark mode based on system settingsNote: Looking for
こんにちは。SALESCORE株式会社CTOの成澤です。 祝・Publication機能のオープンβリリース🎉🎉 ということで、SALESCOREのテックブログを発信し始めます！ テックブログの一発目ということで、2022年で一番開発体験が変わったTurborepoによるモノレポ・モジュラーモノリスによる開発について紹介します。 今後もTypeScriptでのWebサービス開発について記事を出していく予定なので、気になる話題などあればコメントいただけるととても嬉しいです🙋♀️ モジュラーモノリスという選択肢 ソフトウェア開発における重要な要素の1つは抽象化です。 抽象化をあえて噛み砕いて、平坦な言葉で言うならば 「適切なグルーピング」 と呼んでも良いでしょう。抽象化とは、ものごとをグルーピングして、適切な名前を与えることです。 100行の処理の羅列は分かりづらいが、10行ずつグルー
2024年こそ corepack を使おう
普段の開発では nodenv を使って各プロジェクトのバージョンに合わせた Node.js をインストールしています。その後、各プロジェクトの README や package.json を頼りに npm install -g yarn や npm install -g pnpm することが多いです。 先日、同僚から「最近は corepack 使ってますよ」と教えてもらったので、「おーもう実務で使えるのかー」と一気にモチベーションが上がったので corepack 使っていきたいと思います。 まずはこちらの鉄板記事でおさらい。 corepack を使っていくということは yarn や pnpm の管理を corepack に任せるということなので、まずは global install しているそれらを削除して実験してみます。 yarn を使っているプロジェクトで検証 とある yarn を使っ
日本時間の2024/04/05にCloudflareからRPCを使用したCloudflare Workers間の通信が発表されました。 これによりいくつかの課題が解決されると同時にCloudflare上にアプリケーションを構築する利便性が1段階どころか2段階以上上がったといっても過言ではないと思っています。 このRPCの対応によりService Bindingsが更に使い勝手がよくなったのでそれの紹介です。 出来上がりのコードはここにありますので、時間の無い方はこちらを参照ください。 前提条件 以前RemixとPrismaでD1に接続する記事を書きました。 その中で容量制限の問題があると書きましたが、それを解消する話をベースに今回のRPC対応の内容を書きます。ですので記事を読んでない方はCloudflare Workersの無料版はビルドファイルが1MBまでの制限があるということを念頭にお
GitHub - google/wireit: Wireit upgrades your npm/pnpm/yarn scripts to make them smarter and more efficient.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
As your web app matures, it becomes challenging to ensure your GUI doesn’t break with any given update. There are a lot of browsers and devices, and countless states for every one of your components. Unit tests ensure your code remains consistent, and E2E tests will ensure your system remains consistent, but neither will catch visual anomalies, layout issues, or platform compatibility issues. Ente
npmとyarnとpnpmの違い2021
(Last Update: 2022/02/03) npm と yarn(v1) と pnpm （とyarn v2）の違いについて記述します。 Versions npm Yarn pnpm 各パッケージの特徴 npm npmはnpm社が提供する、JavaScriptパッケージマネージャーです。 npmというコマンドラインで動作するプログラムでパッケージを管理できます。いわばnpm公式のパッケージマネージャーとなります。 Windows等でインストールするとNode.jsに同梱されています。 Yarn Yarnはnpmより後発のJavaScriptパッケージマネージャーです。 元々、npmにはインストール時のパッケージバージョンの非再現性やパフォーマンス上の問題、セキュリティの問題が山積しており、それを解決するために開発がスタートしました。 いわば、サードパーティのnpmということになります
yarnからpnpmに移行した時の話
yarnはおわるのか 今までさんざんお世話になったyarnさんですが、だんだんおいていかれているらしい？ので、今自分が設計してて制作中のサービスを「pnpm」におきかえる実験をしました。 こうしたことはだいたい一筋縄でいかないことが多く、朝からいろいろ調査をしてなんとか立ち上げにこぎつけた感があるので、備忘録兼報告書として書き記しておきます。 yarnにするか、npmにするか、pnpmにするか？ 気持ち的にはビアンカにするかフローラにするか論争に、デボラが加わってメッチャ強い感じ…ｗ （最初見た時、ampmの仲間かなんかかと思ったけど、performant npmっていうやつなんだって。なんだ、結果npmか…） 環境 Mac M1 Venture13.1 react 18.2.0 next 13.0.7 node v16.19.0 Homebrew 3.6.18 yarn 1.22.19
【SvelteKit入門】SvelteKit + Prismaによる掲示板アプリ作成 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス１年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新規登録画面 ログイン画面 スレッド投稿画面 スレッド一覧画面 スレッド詳細画面 ログアウト機能 エラー画面 終わりに はじめに Svelteとは WebアプリケーションやUIを構築するためのJavaScriptフレームワークです。有名なものでは「React」や「Vue」が挙げられます。 Svelteにはこれらのフレームワークと比べて下記のような特徴があります。 仮想DOMを用いない こちらが最も大きな特徴となります。 まず、仮想DOM
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。 あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ？（2022年版） 国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。 5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。 3年前の2019年にアンケートをしたとき（参照記事）は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。
Vite is a next-gen build tool that has taken the web development world by storm. It gives you fast startup, instant reloads, widespread compatibility, and easy configuration. With nearly GitHub 50k stars, almost 2 million weekly npm downloads, and 650+ contributors, Vite is clearly a “big deal.” Storybook first supported Vite in April 2021 (two months after Vite 2.0 was released) with help from co
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リモート開発を助ける「思いやりのある文章」の書き方 - ROUTE06 Tech Blog
node_modulesの問題点とその歴史 npm, yarnとpnpm
Node-Based UIs in React – React Flow
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
Git の Squash マージをやめた話 - Mobile Factory Tech Blog
Node.jsを過去の物にする最速の肉まん - Qiita
GitHub Copilotを使いこなしてプログラミングの生産性を上げる大切なコツ｜erukiti
Vite ってよく聞くけど何なんですか？ あれは
Rust Is The Future of JavaScript Infrastructure
Node.js 14から18へアップデートする方法について
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
TypeScriptによるアプリケーションの開発環境 | さにあらず
yarn v2にまつわる誤解 | Wantedly Engineer Blog
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
Bun 1.0 | Bun Blog
yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする
TypeScript・モジュラーモノリスによる型安全なWebサービス開発
RPC対応によりCloudflare Workers間の連携がすごいことになった
Ultimate Guide to Visual Testing with Playwright
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
フロントエンドのトレンドは変化したか？ アンケート結果から分析する2022年のウェブ制作 - ICS MEDIA
First-class Vite support in Storybook