CloudFront Hosting Toolkitを使って静的Webサイト環境を作ってみた | DevelopersIO
手間をかけずにCloudFrontを使った静的Webサイトを作りたい こんにちは、のんピ(@non____97)です。 皆さんは手間をかけずにCloudFrontを使った静的Webサイトを作りたいなと思ったことはありますか? 私はあります。 過去にAWS CDKを使ってこの思いを実現したことがありますが、一からAWS CDKを作り込むのはなかなか大変でした。 そんな苦労はCloudFront Hosting Toolkitを使用すると少し解消されるかもしれません。 CloudFront Hosting ToolkitはCLIまたはAWS CDKでフロントエンドのホスティングとCI/CDパイプラインを用意するツールです。 今だとAmplifyを使えば良いのではないか? という声も聞こえてきますが、細かいカスタマイズを行いたい場合にCloudFront周りを直接操作したい場合があります。そうい
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
INSTANTROOM株式会社（本社：東京都渋谷区、代表取締役：曽根弘介）が運営する、フリーランスエンジニア・ITフリーランスの案件検索サイト「フリーランスボード（https://freelance-board.com）」は2024年6月のフリーランス案件の単価における市場動向の調査結果を発表いたします。 ◆数字で見る「フリーランス市場動向」 フリーランスボードでは2024年6月6日時点の141,500件の掲載案件を対象に開発言語・フレームワーク・職種別の月額平均単価を調査いたしました。 ■フリーランス案件の月額平均単価 2024年6月のフリーランス案件の月額平均単価は71.5万円、最高単価は320万円です。 ▼掲載中のフリーランス案件はコチラから https://freelance-board.com/jobs ■開発言語別の月額平均単価 開発言語別の月額平均単価は上表の結果となりました
UIT INSIDE ep.158『プロダクトの負担を最小限に。複数サービスにまたがるUIコンポーネントのVue 3移行戦略』
@potato4d が @ytamemot に、PayPayカードと保険サービスにまたがるUIコンポーネントのVue 3マイグレーション戦略について話を聞きました。 About ゲスト紹介 tamemoto さん（デザインエンジニア） 2022年にヤフー株式会社に新卒入社、現在はPayPayカード株式会社に出向 マイグレーションの背景 Vue 2のEOLとセキュリティの観点からの移行必要性 PayPayカードのWeb版とミニアプリ版の両方でVueを使用 共通UIコンポーネントのnpmパッケージ化とそのマイグレーション マイグレーションの概要 約1か月半の期間で実施 機能開発と並行して行う 課題と解決策 カード側のVue 2からNuxt 3への移行 保険側のVue 2からVue 3への移行 ViteとWebpackの両対応の必要性 プロトタイプ機能を使った共通インターフェースの実装 特に苦労
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
firebase-vue3-startup-kit
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
Webエンジニアのhikaeです。 皆さんは「SOLID原則」についてどの程度知っているでしょうか？ ソフトウェア開発においてメンテナンスしやすいコードを書くことは、とても重要な要素です。 今回はD（Dependency inversion principle）「依存性逆転の原則」にあたる内容で、 対象のパスで対象のファイルをインポートするのを禁止する仕組みを整えてみました。 日本語の記事が見当たらなかったので、始めてみたい人はこの記事を参考にプロジェクトに導入してみてはいかかでしょうか？ 今回の実装PRは以下に含まれています。 インストール 依存性逆転の原則に関しては以下の記事を参考にしてください。ここではルールの設定方法について説明します。 使用するライブラリはeslint-plugin-importです。メンテナの方、ありがとうございます。 npm install --save-de
【個人開発】色彩検定1級合格のデザイナーが本気で「色彩検定の色名アプリ」を作った話 - Qiita
作ったもの 色彩検定の学習アプリ iOSアプリ Androidアプリ 使用したもの ◾️言語 vue.js sass ◾️ツール figma phothosop Git Xcode Transporter ◾️プラットフォーム firebase monaca ◾️その他 Apple Developper Apple Store Connect Google Play Console 費用 ◾️総額 ¥59,082（自費） ◾️内訳 Appleへの申請代：¥15,535 Googleへの申請代：¥4,017 Android クローズドテスト外注代：¥12,500 Figma有料プラグイン代：¥860 monaca Proプラン代：¥12,000（契約継続中） Php Stormエディタ有料プラン代：¥12,870（契約継続中） その他雑費：¥1,300 ちなみに広告を貼っていないため、売上は
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はMisskeyで使用可能なサードパーティのエラートラッキングサービス、Sentryとその活用について紹介します。 エラートラッキングとは Misskey 2024.5.0から、外部のエラートラッキングサービスとしてSentryをサポートするようになりました。 エラートラッキングサービスは、ソフトウェア内で発生したエラーを一元化して収集・管理できるサービスです。Misskey Projectでは開発用のステージング環境を用意しており、そのサーバー内で発生したエラーを捕捉し、開発チーム内で共有する必要があったため導入しました。 エラートラッキングサービスはいくつか存在しますが、SentryはWebブラウザ・Node.jsのほか、様々なプラットフォームで動作します
What happens on June 30th, 2024?After this date, Nuxt 2 will continue to be available on the NPM package manager, but will no longer receive updates, such as security and browser compatibility fixes. In other words, your applications will continue to work, but you may get deprecation warnings from your package manager reminding you that Nuxt 2 is no longer a supported version. What’s Next?Nuxt 3 h
Server Islands | Astro
This is Part 3 of our series on “The Future of Astro” covering the three major features we have planned for Astro in 2024. This post introduces Server Islands: a new island architecture primitive that lets you deliver static, CDN-cached HTML page shells with injected dynamic content. In 2021, Astro pioneered a new frontend architecture called Islands. Islands are unique because they allow Astro to
これなに？ モチベーション 使った技術 工夫ポイント 配布形式をどうするか GoでGoogleライクな検索クエリで文字列マッチするような関数を作った 取得したフィードを一瞬だけキャッシュする バイナリにviewを同梱する 最近のエコシステムに乗っかる 2024/06/14 13:28 追記：ブコメレス これなに？ RSSフィードを任意のキーワードで絞り込んだ結果をさらに別のフィードとして返すためのproxy的なウェブアプリです。 github.com モチベーション 僕はSlackで色々なRSSフィードを購読しています。 YouTubeのチャンネルにもRSSフィードが存在しているのでSlackで購読しています。 例えば 東映アニメーション公式YouTubeチャンネル - YouTube にはプリキュアをはじめとして様々な動画が公開されています。その中でプリキュアに関係する動画だけをSlac
はじめに 現在 https://snkrdunk.com/ では、多くのWebアプリケーションにおいて、webpackを利用してマルチページアプリケーション（MPA）の構成でFrontendの実装をしています。 エントリーポイントは100を超え、その大半がVue.jsとJavaScript、TypeScriptを組み合わせて実装されています。 今回は、そんな環境の依存関係を紐解くべく調査のためのscriptを作成したお話になります。 エントリーポイントごとの依存関係をJSON形式で生成 [ { "entryPointPath": "src/entryPointA.js", "dependencies": [ "vue", "vue-router", "src/moduleA.js", "src/moduleB.js" ] }, { "entryPointPath": "src/entryP
Microsoft Build 2024 で .NET Aspire のバージョン 1.0 がリリースされました。 ここでは、その .NET Aspire の説明をしたいと思います。 公式ドキュメントは以下になります。 ここでは公式ドキュメントとはちょっと違った切り口で解説していこうと思います。 .NET Aspire とは .NET Aspire は、複数のサービスで構成されるアプリケーション開発やデプロイを支援するツールやライブラリの集合体です。 ここでいうサービスは自分たちで開発するマイクロサービスのこともあれば、既存のサービスやミドルウェアを指すこともあります。つまり単一の Web アプリが Redis や SQL Server に依存するといったケースでも .NET Aspire の恩恵を受けることが出来ます。 また .NET Aspire はアプリケーション開発フレームワークで
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
技術的負債には「格付け」をしよう
技術的負債とは 現代のソフトウェア開発において、「技術的負債」という概念は避けて通れない重要なテーマとなっています。技術的負債とは、短期的な利益や迅速なリリースを優先するために採用される一時的な解決策や、劣悪なコード品質、ドキュメント不足などが原因で将来的にシステムの保守性や拡張性に悪影響を及ぼすことを指します。 技術的負債の種類 技術的負債を以下の2軸で分けてみます。 意図的 vs. 非意図的負債 意図的負債: 開発チームが意図的に決断した結果生じる負債。例えば、リリーススケジュールを守るために後で修正することを前提に一時的な解決策を採用する場合。 非意図的負債: 不注意や知識不足、経験不足などが原因で発生する負債。例えば、新しい技術の導入失敗や設計ミスなど。 短期的 vs. 長期的負債 短期的負債: 短期間で解消可能な負債。例えば、簡単なコードリファクタリングやドキュメントの整備。 長
今年のBuild 2024に対する感想は「面白くもあり、詰まらなくもあり」。あくまでも感情的な感想だから、筆者自身が「枯れた」のだろう。それでも関心を持ったセッションは「Windows Subsystem for Linux, Your enterprise ready multitool」である。ちなみに本セッションはYouTubeでも視聴可能だ。 現在のWSL（Windows Subsystem for Linux）2は消費したメモリーを対象にしたAutoMemoryReclaimや、ストレージリソースの自動回収を行うSparseVhdをサポート。 従来はWindowsネットワークに依存して、難しかった外部アクセスもDnsTunneling（本来はサイバー攻撃で用いられる名称だが、Microsoftの呼称をそのまま使用する）やNAT、WindowsとLinuxディストリビューション側に
Berryを支えるアーキテクチャを紹介します
こんにちは、株式会社Berryの浅沼です！ 今回は、開発しているサービスの中からヘルメット治療管理システムのアーキテクチャについて紹介します。医療機関と３Dデータのやり取りをしながらヘルメット治療に関する管理を実現しているWebシステム、そのアーキテクチャの特徴、今後の展望について触れたいと思います。 システム概要 ヘルメット治療管理システムは、主に以下の3つの機能を持っています。日々、医療機関の方の使いやすさ、見やすさを考えながら開発しています。特に、3Dヘルメットデータを確認するUIなどは、別途、機会があれば技術面を紹介してみたい内容です。 3D頭部データの受信 3Dヘルメットデータの確認 ヘルメットの発注 アーキテクチャの詳細 システム全体のアーキテクチャは以下の図のようになっています。 フロントエンド フロントエンドは、VueとTypeScriptを使用して構築されています。アプリ
はじめに フロントエンドエンジニアのhiroです。 エンジニアになって半年が過ぎました。 表題にあるとおり、この記事では vuejs/core のソースコードを探検してみたいと思います。 ソースコードの探検が目的のため、実装の詳しい解説自体は行いません。あらかじめご了承ください。 目的 本記事はubugeeeiさんの素晴らしい本であるchibivueに出会い、ubugeeeiさんご本人にVueについて直接教えて頂き、Vueのソースコードに興味を持ったことがきっかけで執筆しています。chibivueはVueの基本的な機能を自分で実装することで、Vueについての理解を深め、vuejs/coreのソースコードが読めるようになることを目的とされている本です。 エンジニア経験の浅い私にとってVueのソースコードを理解することは難しいですが、全部が理解できなくてもなんとなく 「こういう実装になっている
こんにちは。Vue.js 日本ユーザーグループの jay-es です。 2024 年 5 月 28 日（火）に Vue.js v-tokyo Meetup #20 を開催しました。 今回は「Developer Experience 開発者体験特集!」というテーマで、Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなりました。 当日参加いただいた皆様、誠にありがとうございました。 また、会場スポンサーをしていただいた株式会社プレイド様、ツールスポンサーの esa 様にも心よりお礼申し上げます。 会場の様子GINZA SIX の株式会社プレイドの社内にある広々とした人工芝のスペースが今回の会場です。 後方には大きな冷蔵庫があり、好きなドリンクをいただくことができました。太っ腹！ オープニングまずは Vue.js 日本ユーザーグループ代表の kazupon 氏による
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
はじめに 自己紹介 こんにちは、株式会社ソーシャルPLUSのフロントエンドエンジニア @zomysan です。 ソフトウェアエンジニアとしての経験は10年と少しで、趣味は個人開発と食べることです。直近では Discord の読み上げ Bot「shovel」のWebインターフェイス（マイページ）機能・有償プランなどを作りました。 この記事について 個人開発でタイピングゲームを作ったので、それについて前半・後半に分けて話します。 前半では作ったタイピングゲームの技術選定の理由や 何を大事にして作ったのか？ ということを紹介します。 後半は今回の開発を実例として、私が開発をするときの進め方について紹介します。誰にでも合うものではないかもしれませんが、少しでも参考になれば嬉しいです。 ゲームの紹介 tstt で遊びながら学ぼう！ TypeScript Touch Typing 略して tstt と
なぜ分割代入をすると Vue は reactive ではなくなるのか - Stockmark Tech Blog
こんにちは。 Anews の開発に携わっている Engineer の 羽柴 と申します。 Anews はフロントエンドを Vue で開発しています。 自分自身の背景として、Stockmarkに入社するまでは React を使って開発していたので Vue の経験は殆どない状態でした。 そこで理解を深めるために chibivue を使った勉強会を社内で進めています。 その時に気づいたことを share したいなと思い、この記事を書きました。 ja.vuejs.org chibivueとは Vue を書き始めた感想 chibivue の勉強会を進めて Proxyについて でもなんで まとめ 余談 最後に chibivueとは ubugeeei.github.io Vue を最少単位で作ってみようという project です。 浅い理解でよければ公式 docs をさらっと読んで実装するのが早いので
Vue.js最新動向 by @kazupon — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 ではVue.jsの最新動向ということで、話していきたいと思います。早口の紹介になりますが、スライドは後日じっくり読んでいただければと思います。 まず自己紹介なんですけども、@kazuponと言います。PLAID株式会社というところで働いています。 Vue.jsのコアチームメンバーで、Nuxtのコミュニティチームに参加していたり、Vue.js日本ユーザーグループのオーガナイザーもしています。
2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。 v-tokyo は Vue.js 日本ユーザーグループが不定期（3 ヶ月に 1 回？）に開催している Vue の Meetup イベントだ。 頭がフレッシュなうちに参加レポートを残す。 headless な UI ライブラリを選択するアンカーリンク会場スポンサーの PLAID さんのセッション。 Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。 PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。 Sour のことは検索してもあまりアウトプットさ
はじめに こんにちにんにん、 art です。 僕が所属するレバテック開発部では、最近デザインシステム『VoLT』が誕生しました。 レバテックでは複数のプロジェクトが運用されており、フロントエンドの技術スタックは Vue.js × Nuxt React x Next.js の２つが採用されています。 ですので、両方の技術スタックに対応したデザインシステムを作る必要があるわけですね。 あら大変。_(:3 」∠ )_ というわけでこの記事では、『VoLT』のUIコンポーネントライブラリを制作するにあたり、肝となったデザインシステムのマルチフレームワーク対応についてお話しします。 🔗そもそも『VoLT』とはなんぞや？構築の背景は？と気になった方は、こちらをご覧ください！ 想定読者 デザインシステムに興味のある方 これからデザインシステム関連の業務に携わる方 すでにデザインシステム関連の業務に携わ
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう 2024.05.26 SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。 SvelteKit は、Svelte と Vite で構築されたフレームワークです。SvelteKit と Svelte の関係は、Next.js と React、Nuxt.js と Vue.js の関係に似ています。SvelteKit は Web アプリケーションを開発するために必要な以下の機能を提供します。 ル
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
Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成
タイトルの構成を Flat Config で実現しようと思ったら、若干ハマったので雑に書きました。 TL; DR 別途必要なライブラリはインストールしてください。 import globals from "globals"; import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import vueParser from "vue-eslint-parser"; import eslintConfigPrettier from "eslint-config-prettier"; export default [ { languageOptions: { globals: globals.browser }
JavaScriptのProxy(Reflect) JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 2024.05.24 JavaScript祭り hiroko_ino ※掲載させていただいているOSSのコードは 発表現在のものです 自己紹介 猪野 浩子 / hiroko_ino 所属：RUN．EDGE株式会社 Web Front-end Engineer, Designe Vue.jsやFlutterでの開発や、UIデザインを時にはやっ たりしま 神奈川在 趣味はゲームのRTA
モダンフロントエンドの境界線(2024年春)
あなたのモダンフロントエンドはどこから？ モダンフロントエンドとは、最新の技術とトレンドを取り入れた開発手法を指します。しかし、「モダン」とは一体どこから始まるのでしょう？Reactを使っていたら？クラウド上にHostingしていたら？最新のNextJSじゃないとダメ？人によって意見が分かれると思います。この記事では、2024年春時点で、どういう点を満たしていれば「モダン」なフロントエンドと言えるのか、自分なりにまとめています。 AltJS：TypeScriptによる静的型付け JavaScriptの柔軟性は開発者に多くの自由を与えますが、その自由が時にバグや予期しない動作を引き起こすこともあります。これに対して、TypeScript（TS）は静的型付けを導入することで、コードの信頼性とメンテナンス性を大幅に向上させる言語として、AltJSの地位を確立しています。 10年前、2014年頃の
May 19, 2024 - Póvoa de Varzim, Portugal 🇵🇹 A virtual DOM in 200 lines of JavaScript In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools li
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Vite ってよく聞くけど何なんですか？ あれは
【2024年6月】フリーランス案件の単価における市場動向【フリーランスボード】
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
「このパスでこのファイルのインポートをさせたくない、、、」をESLintでルール化する
Sentryで始めるエラートラッキング | gihyo.jp
Nuxt 2 End-of-Life (EOL) · Nuxt Blog
feed_squeezerを作った - くりにっき
TypeScriptを使って、エントリーポイントに紐づくts, js, vueの依存関係を追う
マイクロサービスを作らない人による .NET Aspire の概要説明（普通に便利）
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
今後のWSL2はGUI管理が可能に - 阿久津良和のWindows Weekly Report
vuejs/core のソースコードを探検する楽しさ
Vue.js v-tokyo Meetup #20 を開催しました｜jay-es
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
Vuex から Pinia への移行を行いました - every Tech Blog
HeadlessなUIライブラリを利用する価値
Reactのコードを打ち込むタイピングゲームを作った話&個人開発の流れ
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
v-tokyo 20 に参加した | blog.kzhrk.com
デザインシステムをマルチフレームワーク(React/Vue.js)に対応させてみた
Next.jsとGoを使っていきます - トレタ開発者ブログ
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう
2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)
JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 | ドクセル
A virtual DOM in 200 lines of JavaScript