優先度B: 強く推奨 これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。
Vue.js
優先度B: 強く推奨 これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。
Vue3の衰退を招いたのは<script setup>とCompositionAPIかもしれない という考察 - Qiita
[6/8 12時頃追記] Vueは死んでないし殺すつもりもないし私はVueが大好きだ、誤解しないでほしい Vue3でOptions APIは消えてないし今後消えていく方向のAPIでもないし挫折した人もこっちつかって再挑戦してほしい [6/8 11時頃追記] 「俺はComposition API使えてるぞ！」「便利じゃん！何をいってるんだこいつは！」 あなたはすごい、でもVueを挫折した人の話を聞くに、Composition APIが「アタリマエでしょ？」の雰囲気の前にうまく馴染めず散っていったという話で、Composition API自体は好きです Vue3の衰退を招いたのは<script setup>かもしれないCompositionAPIという考察 ほとんど肌感であり、根拠のない妄言だと思ってもらって構わないのだが、Vue3のリリース以降Vueが流行から離れつつあり、その原因は<scr
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
Vue.jsエコシステム動向2023
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin. 🔧 ControlUse any UI framework (React, Vue, Svelte, Solid, ...) and any tool you want (any frontend library, web technology, deploy environment, Vite plugin, ...). With Vike, you integrate tools manually and keep architectural control. 📦 Zero-configVike gives you control only where it matters. Everything else just works without the nee
はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く凄いとか言いたいんでしょ？」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね？」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 この記事では、Vue.jsの書き方みたいなことは扱いません。 またVueの魅力をお伝えする都合、他のフレームワー
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
HTML First
HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by... Leveraging the default capabilities of modern web browsers. Leveraging the extreme simplicity of HTML's attribute syntax. Leveraging the web's ViewSource affordance. Goals The main goal of HTML First is to substantially widen the pool of people who can work on web s
タイトル通り、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 正式リリース直後ということもあって、かなり詳細な背
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。
chibivue
chibivueStep by Step, from just one line of "Hello, World". powered by VitePress
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
仕事でVueというかNuxtを選んで使っているんですけど、なんでだっけという部分を思い出してみる Reactも使っているので評価してどちらかを選定する話ではないです まずLaravelで構成されたソースコードがあってここにどうやって機能を後付けするかという部分を考えた 要件として特定のUIを実現するJavaScript SDKがあったのでこの時点でSPA+APIにした 次にその時点でVueがLaravelでJSを書く時のデフォルト選択肢だったのでVueにした SSRは不要なことが分かっていたのでvue-cliで構築して、複数画面への遷移が必要になった段階でルーターを試しNuxtへ移行した 私の中ではReactもVueも期待する同じDXを提供する高度で自作できないもの、という位置付けなので、Laravel側の選択肢に偏りがあるのならそれに従って問題ないという認識だった 仮に別のフレームワーク
今年でVue.jsは最初の公開から10年となりました。 各機能が実装されていく様子からEvanYou氏とVueJS開発チームの 優先度の判断、考え方の変遷、利用者の声の拾い上げ方等から学びがあると思ったことから、 Vue.jsの歩みをざっくりですが振り返ってみたいと思います。
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
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
Vue3アップグレード要点解説①：移行ビルド導入前にやるべき7つの作業 - LAPRAS Tech Blog
こんにちは、LAPRASの業務委託エンジニアのしんです。 先日弊社のプロダクト（LAPRAS と LAPRAS SCOUT）のVue3アップデートがついに完了しました🎉 中〜大規模プロダクトのVue3移行を（開発を止めずに）2回行ったことで様々な学びがありましたので、連載記事の形でVue3移行について解説していきたいと思います。 移行ビルドを用いたVue3移行は大まかに、 移行ビルドの導入前の準備 移行ビルドの導入 & 削除 のフェーズに分けることができます。 第1回目の本記事ではまず「移行ビルド導入前の準備」についてまとめていきます！ 移行ビルド導入前にしたほうがいいこと 一度移行ビルドを入れてしまうと、完全に動く状態になるまでmain ブランチへマージできません。 移行ビルド導入のPRは非常に巨大になり工数もかかるため、導入前にできる作業は全て先にやっておくのが吉です（参考までに、3
Vue & Vite Rustify
プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production
駅メモ！開発チームにおける Vue.js のマイグレーションプロセス - Mobile Factory Tech Blog
こんにちは、駅メモ！でフロントエンドを良い感じにしたかったチームの id:yunagi_n です。 今回は、駅メモ！にて使用している Vue.js を 2 系から 3 系へあげて行くに当たって、採用した手法とマイグレーションプロセスについて紹介します。 今回、マイグレーションするに当たって、以下の要件がありました： 機能開発を止めてはいけない 駅メモ！では 6 月と 10 月に周年リリースがあり、それの開発を止めるわけにはいきませんでした もちろん、その間にあったイベントなどについても、開発は継続し続けています 多くのメンバーは割けない 基本はわたしが中心に、追加で 1 人〜2 人に手伝ってもらうことはありました また、参考のため、駅メモ！のフロントエンドの規模感を紹介しておくと： Vue コンポーネント数は 1500 コンポーネント fd --type file --extension
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
🏆 結論 「とりあえず ref を使えばいい！」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ
Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？ コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散
<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ・ ・ ・ ・ ・ ・ ・ なんで defineProps は import しなくても使えるの？？？？？ そんなことを思った方はいませんか？今日はその疑問を解決して差し上げます。 🚩 初めに 前回は Vu
走りながらエンジンを交換する ~ 大規模プロダクトを成長させつつVue3にするには / 20231028
Vue Fes Japan 2023のスポンサーセッションにて、クラウドサイン エンジニアの篠田が登壇した際の資料です。 イベントURL：https://vuefes.jp/2023/sponsor-sessions/cloudsign ■ セッション内で紹介されていた資料のご紹介 ・プラットフォームチームの設立について 『組織・プロセス・技術 - フロントエンドの生産性向上への複眼的アプローチ』 https://speakerdeck.com/bengo4com/20230921 ・バージョンアップの対応を小さく始めた取り組み 『CloudSign の社内用管理画面を Vue2.7 に移行した話』 https://creators.bengo4.com/entry/2023/03/27/083000 ■ クラウドサインプロダクト組織について https://www.cloudsign.j
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
使用技術 Vue3 + Nuxt3 Composition API TypeScript ワイ、お問い合わせフォームを作りたい ワイ「Vue の Composition API を使って、お問い合わせフォームを作るで！」 ワイ「フォームのデザインはこんな感じや！」 ワイ「いや〜、我ながらイケてるデザインやな！」 ワイ「ほな、Composition APIを使ってフォームの状態を管理していくで〜」 フォームの状態を管理するには？ ref()またはreactive() ワイ「Composition APIの場合、状態を管理するには」 ワイ「ref()またはreactive()を使うんやったな」 ワイ「この2つは何が違うんやろ？」 ワイ「確か───」 ref() 文字列・数値・真偽値などの、プリミティブな値を保持できる reactive() オブジェクト・配列・Map・Setなどの状態を保持でき
Vue 3 Vapor Mode News
What is Vapor Mode? 🧐 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js. It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output. When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size. ✅ Benefits More performant Uses less memory Requires less runtime support code. Solid
Storybook 7.1
Storybook is the industry standard workshop for UI component development, documentation, and testing. It’s used by teams at Twitter, GitHub, the BBC, and the New York Times. After launching Storybook 7.0 back in April, we plan to ship future releases that are both more frequent and smaller in size. That will help Storybook keep in sync with changes across the frontend ecosystem while smoothing the
🚩 初めに こんにちは。Vue Beginners です！ 😄 これまでに、Vue の勉強を始める方法や、環境構築の方法などを紹介してきました。 今回はもう少し範囲を絞って、具体的な疑問について解説していきます！！！！！ Vue.js について学んでいると、コンパイラ という言葉を見かけることがあると思います。 皆さんは「Vue.js のコンパイラとは何ですか？」と聞かれたら、どのように答えますか？ 🤔 意外と戸惑う方も多いのではないでしょうか。 今回はコンパイラとは何なのか、何のためにあるのか、Vue.js のコンパイラとはどういうものなのかについて説明してみます。 それではスタート！！！！！！！！！！！ 🤔 コンパイラとは これからの説明は、Vue.js に限った話ではありません。 プログラミング全般で使われる コンパイラ という意味について説明していきます。 コンパイラ (C
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しい UI テストの手法を提供するテストライブラリ SafeTest
Vike
Vue3をアゲアゲ↑↑する記事 - Qiita
Vue.js と Nuxt の 2023年まとめ
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
Vue Language Server から生まれた Volar.js と、それが秘める可能性
2023年版！エンジニア必見のチートシート集 - Qiita
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
なんでVueを使っているか｜laiso
Vue.jsの今までをざっくり
Vue / Vite 関連ライブラリー名の読み方 2024
【徹底比較】Vue.js と React でレンダリングされる値、されない値
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)
VueUseで極めるVue.jsとComposition API - ICS MEDIA
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！
【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】
VueFes Japan 2023イベントレポート | gihyo.jp
【Vue】reactive()って要らなくね？ref()だけでよくね？ - Qiita
【Vue.js】コンパイラってよく聞くけど一体全体なんなんだ！？！？！？
GitHub - nuejs/nue: The Content First Web Framework