Remix入門: フロントエンドもバックエンドも爆速開発を実現する次世代Webフレームワーク
こんにちは！Acompanyのマッケイです！ この記事は Acompany5周年アドベントカレンダー 11日目 の記事です。 今回はAcompanyのプロダクト開発でも活用しているRemixを開発環境で使ってみた所感を書いていこうと思います。 Hello,Remix Remixは、Reactをベースとしたフルスタックフレームワークです。 Reactを魔改造して色々できるようにしようぜ、という昨今のモダンフレームワークに習うように、RemixもReactに厚化粧をした"React"フレームワークです。 書き心地はそのままReactですが、気づいたらサーバーサイドのコードを書いており、気づいたらデータベースをいじっているというなんとも不思議な経験ができるフレームワークです。 フルスタックフレームワークを使っているというよりは、Reactで開発しながら、サーバーサイドの処理も同時に書けるのがRe
Cloudflareに移行したら99％コスト削減できた話
どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
一休レストランで 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
フロントエンドのディレクトリ設計思想
はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development
Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development Posted by Bre Arder, UX Research Lead, Kirupa Chinnathambi, Product Lead, Ashwin Raghav Mohan Ganesh, Engineering Lead, Erin Kidwell, Director of Engineering, and Roman Nurik, Design Lead These days, getting an app from zero to production – especially one that works well across mobile, web, and desktop plat
［10-A-4］フロントエンド開発のためのセキュリティ入門
セッション概要 Webフロントエンドの技術やWebブラウザは日々進化しており、Webアプリケーションを開発するうえでフロントエンドは大きな役割を担うようになりました。 できることが増えた一方で、フロントエンドの脆弱性を狙われて攻撃されるケースも増えてきています。 このセッションでは、著書『フロントエンド開発のためのセキュリティ入門』から抜粋して、フロントエンドで対策すべき脆弱性の仕組みと対策について説明します。 Webエンジニアがセキュリティへの関心を持つきっかけになればと思います。 講演者プロフィール 平野 昌士[サイボウズ] サイボウズ株式会社 New Business Division 副部長 サイボウズ株式会社にて新規プロダクトのフロントエンドアーキテクトとして働いている。また、社内でOSSへのコントリビューションの支援やOSSへの寄付作業なども行っている。仕事以外では、JSCon
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012
フロントエンド技術負債解消WG「除雪部」を立ち上げた話 - STORES Product Blog
はじめに hey のネットショップ開設サービス「STORES」 の開発フロントエンド組織で EMをしています、 daitasu と申します。 2022年の上半期、私たちのフロントエンドチームで「除雪部」という技術負債解消ワーキンググループ(以下、WGとします)を立ち上げました。 この記事では、「除雪部」とは何なのか、なぜ設立したのか、何をしているのか、半年間の振り返りをご紹介します。 「除雪部」とは 除雪部は、フロントエンド内で、通常のプロジェクト(以下、PJTとします) と並行して、有志数名で集まり、技術負債の解消をハンドリングするWGです。 フロントエンド関連で負債に感じている課題を集約し、優先度付け、必要な各所への連携やタスクの分解をして、「負債を各メンバーが対応可能な状態まで落とし込むこと」、「負債の解消を一歩でも前に進めること」を役割として動いています。 なぜ設立したのか STO
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
Create React App(以下「CRA」という)の将来、およびReactとフレームワークの関係性についてDan氏がGitHubのIssueのコメントで語った内容の翻訳です。非常に長いコメントですが、Reactユーザーであれば一読に値する内容だと思ったので翻訳してみました。参考になれば幸いです。 原文 翻訳 みなさん、こんにちは。 CRAの現状については以前から痛いほどわかっており、それに対処するための提案に取り組んでいるところです。このプルリクエストは議論を始めることを目的にしていたので、私たちがCRAの将来について考えているいくつかの背景を説明する良い機会だと思います。私たちが考慮している理由とトレードオフについて明確にしたいので、いくつかのセクションからなる長いコメントになりそうです。もし全てを読む気になれないなら、最後のセクションまでスクロールして私たちが提案する今後の方法を
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る 複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼ばれます）は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。 そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。 参考：「State of JavaScript 2022」公開。利用
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vitest
Learn Performance | web.dev
2022年に起きたフロントエンドの変化
