並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 2196件

新着順 人気順

Web開発の検索結果1 - 40 件 / 2196件

  • Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える

    はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に

      Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
    • Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers

      はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具

        Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers
      • 2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)

        JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor

          2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)
        • CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon

          HTMLのチェックボックス(<input type="checkbox">)やラジオボタン(<input type="radio">)をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や

          • 小さなデプロイで大きな成果! Next.jsで実現するマイクロフロントエンド

            はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利

              小さなデプロイで大きな成果! Next.jsで実現するマイクロフロントエンド
            • 生成AI時代のフロントエンド開発術

              2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに

                生成AI時代のフロントエンド開発術
              • Magic UI

                UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.

                  Magic UI
                • 2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023

                  JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React

                    2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
                  • 週刊Railsウォッチ: Ruby/Railsのアップグレード情報をscrapboxに集約ほか(20240514後編)|TechRacho by BPS株式会社

                    こんにちは、hachi8833です。今夜沖縄に到着します。 RubyKaigi 2024で話題になりそうな技術的トピックの予習メモをまとめた https://t.co/IjadL2Y7XE — osyoyu (@osyoyu) May 11, 2024 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また

                      週刊Railsウォッチ: Ruby/Railsのアップグレード情報をscrapboxに集約ほか(20240514後編)|TechRacho by BPS株式会社
                    • 週刊Railsウォッチ: Railsコンソールが最新のIRB APIに移行、assertionless_tests_behaviorほか(20240513前編)|TechRacho by BPS株式会社

                      こんにちは、hachi8833です。以下のお知らせに先ほど気づきました🎉。 💎Kaigi on Rails 2024 公式サイト オープン!💎 オンラインとオフラインのハイブリット開催です! 日程:2024.10.25 (Fri.) - 26 (Sat.) 有明セントラルタワーホールhttps://t.co/Jwk5Zro27S#kaigionrails — Kaigi on Rails (@kaigionrails) May 7, 2024 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 Te

                        週刊Railsウォッチ: Railsコンソールが最新のIRB APIに移行、assertionless_tests_behaviorほか(20240513前編)|TechRacho by BPS株式会社
                      • 2024-05-12のJS: Headless UI v2.0 for React、Astro v4.8、外部パッケージに依存せずにNode.jsで使えるようになった機能

                        JSer.info #692 - Headless UI v2.0 for Reactがリリースされました。 Headless UI v2.0 for React - Tailwind CSS Floating UIのanchor指定をサポート、Checkboxコンポーネント、Fieldsetコンポーネント、Comboboxがvirtual propsをサポートなどの変更が含まれています。 Astro 4.8がリリースされました。 Astro 4.8 | Astro 実験的な機能としてAstro Actions、Request Rewritingの追加が行われています。 また、パフォーマンスの改善やinjectRouteのバグ修正などの変更が含まれています。 Node.js の進化に伴い不要となったかもしれないパッケージたちという記事では、外部パッケージで提供されていた機能の一部がNode

                          2024-05-12のJS: Headless UI v2.0 for React、Astro v4.8、外部パッケージに依存せずにNode.jsで使えるようになった機能
                        • Reverse HTTP Transport が描く新しい Web サービスデプロイ構成 | blog.jxck.io

                          Intro IETF の httpbis で、 Reverse HTTP Transport という仕様が提案されている。 Reverse HTTP Transport https://www.ietf.org/archive/id/draft-bt-httpbis-reverse-http-01.html この仕様は、 Origin サーバの前に何かしら Intermediaries (Loadbalancer, Reverse Proxy, CDN etc)があるのが一般的な現代の Web サービス構成において、非常に革新的なアイデアを取り入れたプロトコルと言える。 まだ v01 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。 登場人物 ベースとして HTTP の話にはなるが、登場人物が多いため Client/Server という「相対的な役割」で話をすると、紛

                            Reverse HTTP Transport が描く新しい Web サービスデプロイ構成 | blog.jxck.io
                          • Referrer-Policy の制限を強めると安全になるという誤解 | blog.jxck.io

                            Intro Referrer-Policy は、送信される Referer の値を制御することが可能だ。 このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。 では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか? 前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io https://blog.jxck.io/entries/2024-04-26/csrf.html Referer とアナリティクス Referer は、リクエストに対してその前のページの URL を送るところから始まった。 GET / H

                              Referrer-Policy の制限を強めると安全になるという誤解 | blog.jxck.io
                            • PythonだけでWebアプリが作れるライブラリが増えている(2024.05) - Qiita

                              ※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 1.PythonだけでWebアプリをつくるライブラリが増えている 最近(2024.05)、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 2.ライブラリの分類 こうしたライブラリも大きくわけて2つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま

                                PythonだけでWebアプリが作れるライブラリが増えている(2024.05) - Qiita
                              • 2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC

                                JSer.info #691 - Bun v1.1.5がリリースされました。 Bun v1.1.5 | Bun Blog bun build --compileがクロスコンパイルに対応し、Windows/Linux/macOSに対応したSingle Executable Binaryを出力できるようになっています。 また、package.jsonの末尾カンマを許可するようになる変更やbun.reportが追加されています。 その他には、Import Attributesで任意ファイルをtext/json/toml/fileとしてインポートできるようになるといった変更があります。 React v18.3.0がリリースされました。 Release 18.3.0 (April 25, 2024) · facebook/react React 19 Betaもリリースされていますが、React 1

                                  2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC
                                • ブラウザキャッシュの仕組みについてまとめた

                                  Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

                                    ブラウザキャッシュの仕組みについてまとめた
                                  • VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita

                                    VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 (簡単7steps) (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)

                                      VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
                                    • 週刊Railsウォッチ: Prismの歴史と現況を振り返る、Steepの"narrowing"実装の内部ドキュメントほか(20240426後編)|TechRacho by BPS株式会社

                                      週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます(例:週刊Railsウォッチタグ) お知らせ: 来週および再来週の週刊Railsウォッチはお休みをいただき、通常記事を公開します。 🔗Ruby 🔗 Steepの"narrowing"実装の内

                                        週刊Railsウォッチ: Prismの歴史と現況を振り返る、Steepの"narrowing"実装の内部ドキュメントほか(20240426後編)|TechRacho by BPS株式会社
                                      • 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io

                                        Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp

                                          令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
                                        • 2024-04-26のJS: Electron 30、Firefox 125、Node.js 22、React 19 Beta、TypeScript 5.5 Beta

                                          JSer.info #690 - Electron 30.0.0がリリースされました。 Electron 30.0.0 | Electron V8 12.4、Chromium 124、Node.js 20.11.1へアップデート。 File System APIをサポート、Cross Origin iframeにPermission Policyを使うように変更、WebContentsView/BaseWindowの廃止などの変更が含まれています。 Firefox 125がリリースされました。 Firefox 125.0.1, See All New Features, Updates and Fixes Firefox 125 for developers - Mozilla | MDN Intl.Segmenterのサポート、Popover APIのサポート、AV1コーデックのサポート

                                            2024-04-26のJS: Electron 30、Firefox 125、Node.js 22、React 19 Beta、TypeScript 5.5 Beta
                                          • Node.js 22がリリース | gihyo.jp

                                            OpenJS Foundationは2024年4月25日、Node.jsの新バージョン「Node.js 22」をリリースした。 Node.js 22 is now available! -Node.js Node.js 22 Available Now | OpenJS Foundation Node.js 22 is here 😎 Featuring: require()ing ESM graphs, WebSocket client, updates of the V8 JavaScript engine, and more. Big thank you to @_rafaelgss and @satanacchio for their work on this 🎉 pic.twitter.com/yXgR8fsMqt — Node.js (@nodejs) April 24, 2

                                              Node.js 22がリリース | gihyo.jp
                                            • 「Google Chrome」のサードパーティCookie廃止は延期 ~2024年内の非推奨化を断念/来年へ持ち越しへ

                                                「Google Chrome」のサードパーティCookie廃止は延期 ~2024年内の非推奨化を断念/来年へ持ち越しへ
                                              • Webフォームのスパム対策: ユーザーに優しく、ボットに厳しく、reCAPTCHAを使わない方法

                                                最近、このブログのお問い合わせフォームや、Webスクール体験レッスン、メルマガ登録などのフォームにスパムボット(広告・宣伝などを自動で送信するプログラム)と思われる送信があまりにも多いため、対策をしています。 メールフォームのスパムポット対策と言えばGoogleの「reCAPTCHA」が有名ですが、 そういったものは使用せず、HTMLとサーバー側のPHPを工夫することで対策をしました。 reCAPTCHAを使わない理由 スパムボットを防ぐ有名な方法にGoogleのreCAPTCHAがありますが、以下の理由から私はできれば使用したくありません。 理由1: ユーザーに負担をかける reCAPTCHAでは、ボットかどうか疑わしい場合、人間であることを確認するためのパズルが表示されます。 しかし、例えばメールマガジン登録フォームにメールアドレスを入力して送信しようとした際に、そのようなパズルが現れ

                                                  Webフォームのスパム対策: ユーザーに優しく、ボットに厳しく、reCAPTCHAを使わない方法
                                                • 週刊Railsウォッチ: Kamalはゲームチェンジャーになるか、Solid Queueで使われているfugitほか(20240423後編)|TechRacho by BPS株式会社

                                                  こんにちは、hachi8833です。後編が遅れてしまい申し訳ありません🙇 RubyKaigi 2024の公式パーティをはじめとするイベント募集が始まりました。 We just revealed details of the official party for RubyKaigi 2024 and its registration is now open: https://t.co/MUTBTeaFCi And more social events will follow during this week!#rubykaigi — RubyKaigi (@rubykaigi) April 16, 2024 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋

                                                    週刊Railsウォッチ: Kamalはゲームチェンジャーになるか、Solid Queueで使われているfugitほか(20240423後編)|TechRacho by BPS株式会社
                                                  • 本当のAWS基礎 昭和~平成~令和の時代の変遷システムの変化と今昔物語 - Qiita

                                                    内容 社内でAWS知らない人でもこれだけは覚えていてほしいという動画を作成して欲しいとリクエストあり。その内容を資料化したものです。小学生の子供に説明してみましたがになんとなくAWSが分かったと言っていたので今回は結構分かりやすくまとめられたと思います。 システムを構築する時 システムを構築する際、サーバやネットワークなどのインフラが必要になります。昭和の時代は物理サーバを買ってきてラックマウントしてネットワークに接続してと物理的な作業が多く発生していました。 その後、物理サーバの上に仮想的なサーバを作成できる仮想化技術の発展により、仮想サーバが主流となりました。最初に物理サーバを用意して、仮想化基盤を構築する必要があります。仮想化基盤構築後は、新しいシステムを作りたい場合はすぐに仮想サーバの準備を行うことができ、物理環境の時と比較すると大きな進展がありました。 仮想化基盤を自社で構築する

                                                      本当のAWS基礎 昭和~平成~令和の時代の変遷システムの変化と今昔物語 - Qiita
                                                    • サーバーレスの次はなんなんだ

                                                      はじめに この記事は、同人誌サークル「めもおきば」から不定期刊行している技術解説本「めもおきばTecReport」に書いたものを公開用に再編集したものです。 ⇒ めもおきばTecReport 2023.12 この記事のほかにも「私もSecHack365に参加したい!」や、「2023年振り返りと2024年技術予想」としてこんなキーワードを取り上げているので、気になったらぽちっとしてください! メガクラウドと特化型クラウド/ハイパーバイザーのSoC化/ライセンスとクラウドベンダー/イベント駆動型API/LLM時代のAIペアプロ力/生活必需品としてのGPU・NPU/Passkey/ウェブアクセシビリティ/リアルイベントの再開 サーバーレスの次はなんなんだ サーバーレスと呼ばれる技術ムーブメントが盛り上がり始めて8年近くが経ちました。各クラウドベンダーのFaaS(Function-as-a-Ser

                                                        サーバーレスの次はなんなんだ
                                                      • Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita

                                                        普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは?」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選! 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec

                                                          Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
                                                        • Deno first でやっていく

                                                          去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS

                                                            Deno first でやっていく
                                                          • 2024-04-18のJS: Next.js v14.2、Farm v1.0、Biome v1.7、pnpm v9

                                                            JSer.info #689 - Next.js 14.2がリリースされました。 Next.js 14.2 | Next.js Turbopack RCをリリース、Server/Client Components間のTree Shakingの対応、CSSの読み込み順の問題の修正などが行われています。 Client側のRouter Cacheの期間を設定するstaleTimesオプションの追加なども行われています。 Vite/Rollup互換のプラグインを扱えるビルドツールであるFarm 1.0がリリースされました。 Release 🚀 Farm v1.0 is released! · farm-fe/farm Rustで書かれていて、キャッシュを使ったIncremental Build、Lazy Compilation、モジュールをグループ化してbundleできるなどの特徴を持っています

                                                              2024-04-18のJS: Next.js v14.2、Farm v1.0、Biome v1.7、pnpm v9
                                                            • 2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文

                                                              JSer.info #688 - zx 8.0.0がリリースされました。 Release 8.0.0 · google/zx パッケージサイズの削減、$.syncの追加、inputオプションの追加、AbortControllerのサポート、killメソッドの追加などが行われています。 そのほかには、$.verboseのデフォルト値をfalseに変更、ssh APIの削除などの変更も含まれています ESLint 9.0.0がリリースされました。 ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter Node.js 18.18未満のサポート終了、Flat Configをデフォルト化、ビルトインのformatterの一部をパッケージに移動、JSDocのルールを削除、eslint:recommendeddの更新などの変更が行われ

                                                                2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文
                                                              • 週刊Railsウォッチ: SeleniumでRubyの全クラスとモジュールにRBSが追加ほか(20240410後編)|TechRacho by BPS株式会社

                                                                週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます(例:週刊Railsウォッチタグ) 🔗Ruby 🔗 2要素認証のブルートフォーステストをRubyで書く(Ruby Weeklyより) 元記事: Brute-forcing 2FA with

                                                                  週刊Railsウォッチ: SeleniumでRubyの全クラスとモジュールにRBSが追加ほか(20240410後編)|TechRacho by BPS株式会社
                                                                • 週刊Railsウォッチ: Rails公式の"rails-new"ツールでRailsプロジェクトをセットアップほか(20240409前編)|TechRacho by BPS株式会社

                                                                  週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます(例:週刊Railsウォッチタグ) 🔗Rails: 先週の改修(Rails公式ニュースより) 公式更新情報: Ruby on Rails — Retry known idempotent SE

                                                                    週刊Railsウォッチ: Rails公式の"rails-new"ツールでRailsプロジェクトをセットアップほか(20240409前編)|TechRacho by BPS株式会社
                                                                  • Vue / Vite 関連ライブラリー名の読み方 2024

                                                                    Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む(口語だと「ビュー」と発音することが多い)。 Vue(発音は /vjuː/、view と同様) https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt

                                                                      Vue / Vite 関連ライブラリー名の読み方 2024
                                                                    • You don't need Node.js

                                                                      Node.jsはいらない場合がある、むしろいらない場合の方が多いかもしれない、 そしてDenoとBunを使い分けて代替する方法を説明するという記事です。 Post Node.js ランタイムの登場 Node.js のあとにできたランタイムがいくつも登場しています。 Deno Bun WinterJS LLRT この中でも、人気であるDenoとBunを中心に考えていきます。 DenoやBunに変えるメリット これがなければNode.jsから変える必要はないと思います。 私は、以下の3つが、2ランタイムに共通して言える大きなメリットだと思います: ネイティブTypeScriptサポート 高速 Web標準 ネイティブTypeScriptサポート 現在、JavaScriptを記述するときは、TypeScriptを利用することが多いと思います。 Node.jsでTypeScriptを使うとき。tsc

                                                                        You don't need Node.js
                                                                      • 週刊Railsウォッチ: solid_queueとmission_control-jobsが正式にRailsのgemに、Rubyの"チルド"文字列ほか(20240402)|TechRacho by BPS株式会社

                                                                        こんにちは、hachi8833です。xzの脆弱性対策をお忘れなく。 “XZ Utilsの脆弱性 CVE-2024-3094 についてまとめてみた - piyolog” https://t.co/QYpX58DweW — 徳丸 浩 (@ockeghem) April 1, 2024 sshの0.5秒の遅延からxzのバックドアを発見し大惨事を未然に防いだAndres Freundの功績を讃えるMicrosoft CEO https://t.co/FwVEVIZg6p — Haruhiko Okumura (@h_okumura) April 1, 2024 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄

                                                                          週刊Railsウォッチ: solid_queueとmission_control-jobsが正式にRailsのgemに、Rubyの"チルド"文字列ほか(20240402)|TechRacho by BPS株式会社
                                                                        • 2024-04-02のJS: gulp 5.0.0、Deno 1.42、Bun 1.1(Windows)

                                                                          JSer.info #687 - gulp 5.0.0がリリースされました。 Release gulp v5.0.0 · gulpjs/gulp gulpが久々にアップデートされています。 Node.js 10.13未満のサポート終了、ストリームエンコードをUTF-8に変更、非推奨のローダーの削除が行われています。 また、gulpfile.cjsとgulpfile.mjsをサポート、swc/esbuild/sucrase/mdxローダーの追加、extends構文のサポートなども追加されています。 Deno 1.42がリリースされました。 Deno 1.42: Better dependency management with JSR JSRをサポートするdeno publishとdeno addコマンドが追加されています。 deno taskで実行するスクリプトをクロスプラットフォームで実

                                                                            2024-04-02のJS: gulp 5.0.0、Deno 1.42、Bun 1.1(Windows)
                                                                          • 2024-03-27のJS: Firefox 124、Chrome 123、Node.jsドキュメンタリー

                                                                            JSer.info #686 - Firefox 124がリリースされました。 Firefox 124.0, See All New Features, Updates and Fixes Firefox 124 for developers - Mozilla | MDN AbortSignal.any()のサポート、WebDriver BiDiの対応改善が含まれています。 また、フラグ付きでSharedArrayBuffer.prototype.grow()とArrayBuffer.prototype.resize()のサポートなども行われています。 Chrome 123がリリースされました。 New in Chrome 123  |  Blog  |  Chrome for Developers CSSのlight-dark()のサポート、Service worker Static

                                                                              2024-03-27のJS: Firefox 124、Chrome 123、Node.jsドキュメンタリー
                                                                            • それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由

                                                                              inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから! 詳しくは以降で説明します。 (前提)そもそも改行調整ってなんの話? このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で

                                                                                それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
                                                                              • Blue/Green デプロイを使用した、RDS MySQL/PostgreSQLのアップグレード

                                                                                TL;DR RDS の メジャーバージョンアップグレード を行なった PostgreSQL 11.6 -> 15.5 MySQL 5.7.44 -> 8.0.36 PostgreSQL は AWS CDK を利用した、自前での手動切り替えをベースにした Blue/Green デプロイによるアップグレードを行なった MySQL は AWS コンソールから AWSが提供している機能である RDS Blue/Green Deployments による MySQL のアップグレードを行なった nginx の ngx_http_proxy_module を活用してサービスのダウンタイムを防止した はじめに 初めまして。株式会社ジーニーの GENIEE CHAT開発チームのマネージャーを担当しています。 今回は、データベースのメジャーアップグレードを行った際の手順やポイントなどを書いていこうと思います

                                                                                  Blue/Green デプロイを使用した、RDS MySQL/PostgreSQLのアップグレード
                                                                                • テンショク・ジャーニー —航海士だった僕が、SaaS企業でエンジニアとして働き始めるまで—

                                                                                  はじめに 自己紹介 2020年10月よりWeb系受託開発企業でWebエンジニアとしてのキャリアをスタートさせ、現在はとあるSaaS企業でバックエンドエンジニアとして働くシンオクと申します。以前は航海士として国際貨物船での操縦や航海計画立案・貨物管理をしながら、インド洋・アラビア湾・シンガポール海峡・パナマ運河・カリブ海などの文字通りの大海原を航海しておりました。 なぜこの記事を書いたのか 紆余曲折を経て航海士という珍しい経験がありながら現在はフルリモートで働くWebエンジニアとして自宅からネットの海にどっぷり浸かっているのですが、時たま参加する技術イベントで初対面の方から「え?何?航海士からエンジニアってどういうこと?」と強い興味(困惑??)を持ってもらえることが多く、「文字に起こしてみたら面白いんじゃないか?」という思い付きでこの記事を書き始めました。 どんな人に読んで欲しいのか 内容の

                                                                                    テンショク・ジャーニー —航海士だった僕が、SaaS企業でエンジニアとして働き始めるまで—