フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
良いReactを書くことは凡事徹底だと考えている話 - カミナシ エンジニアブログ
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab
はじめまして、川口（@kazu_pon）です。私はソフトウェアエンジニアとして現在株式会社プレイドで働いています。OSS活動としては、Vue.jsコアチームメンバー、Nuxtエコシステムメンバーであり、Vue.js 日本ユーザグループ、そしてVue Fes Japanというカンファレンスのオーガナイザーをしています。 この記事では、日々の仕事をこなしつつOSSとどう出会い、どのようなOSS活動をしているか、これらの両立をどうやって築いていったのかなど、私のこれまでのソフトウェアエンジニアとしてのキャリアを振り返りつつ紹介します。 プロのソフトウェアエンジニアとして働くということ 始まりはゲームを作ってみたいという想いから 私がソフトウェアやIT業界に興味を持ったのは、幼少期に遊んでいたテレビゲームがきっかけでした。小学校の頃はファミリーコンピュータが全盛期で、ゲームがどうやって作られている
Vue.js v-tokyo Meetup #21 のLT資料です。 https://vuejs-meetup.connpass.com/event/321431/
こんにちは！株式会社ｉｉｍｏｎでフロントエンジニアをしている「ひが」です！ 本記事はアドベントカレンダー19日目の記事になります！ 先日夢で「メリークロージャマス！！！」と叫んでスベる夢を見ました。 冬だからか、みなさん冷たかったです（現実では暖かいです） そのようなこともあり、思い切って記事にしてみようと思いました！ どうか、暖かい目で見守っていただけると嬉しく思います！！ 本題 本題ですが、みなさんはクロージャをご存知でしょうか。 MDNよりお言葉を借りると クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせ です！ 初見だと何言ってるかよくわからないですよね。 本記事でざっくり掘っていきますので、是非一緒に見ていただければ幸いです！ ※ 本記事は基本的にMDNの内容に沿う形で進めつつ、たまに脱線したり小ネタを挟んだりします ※ コード
4年運用した Vue2 を幾度の挫折を乗り越えて Vue3 にアップグレードした(vite に移行した)話 #GameWith #TechWith - GameWith Developer Blog
はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js の修正 tsconfig.json の修正 index.html の修正 App.vue の修正 vue.config.js の削除、vite.config.ts の追加 補足など Vue 2.7.
近年のWebフロントエンド開発において「リアクティビティ」という概念が非常に重要になっています。今回は、このリアクティビティにまつわる歴史を辿りつつ、2025年の1月にv1.0となったリアクティビティライブラリである「alien-signals」についてを解説していきます。 リアクティビティとは何を実現するものか そもそも「リアクティビティ」とは何かについてを説明します。 リアクティビティを日本語にすると「反応性」と訳されることがあります。この「反応性」とは、ある状態の変化に対してシステムが適切な対応をすることを指します。 Webフロントエンドにおける「反応性」は、アプリケーションの状態（データ）が変化した際に、その変化を検知し、関連するUIや他の状態を自動的に更新する仕組みのことです。 分かりやすい例としてあげられるのがスプレッドシートのようなUIです。あるセルの値が変更されると、そのセ
みなさんこんにちは, ubugeeei です． 最近技術発信が全くできていないな〜お前それでも Vue Team Member かよ，と思いつつ，せっかく Vue 3.5 がリリースされたのでそれに関連した機能の記事でも書こうかと思います. Vue 3.5.0 がリリースされました 先日，Vue 3.5.0 (Tengen Toppa Gurren Lagann) がリリースされました. このリリースでは，Reactivity System の最適化や，新しいコンポーザブルである useTemplateRef，useId，Custom Elements の改善など様々な変更が入りました． 詳しくは上記の公式ブログや，同 publication のまとめ記事 などを参照してください． 今回のトピック Vue 3.5 で Reactive Props Destructure という機能が安定版
Vue.jsにおけるcomposablesを切り出す個人的な考えをまとめてみた - VISASQ Dev Blog
こんにちは、クライアント開発チームの田中智之です！ さて、ビザスクではVue.jsを利用してフロントエンドを実装していますがcomposabelsの使い方、難しくないでしょうか？ 自分自身の解像度を高めるためにも、今回はVue.jsの中でもcomposabelsに焦点を当てた記事を書いてみることにしました！ SFC(Single File Component)について composabelsの話に入る前に、SFCについて触れさせてください。 SFCとは単一ファイルコンポーネントの章にあるように、単一ファイルでコンポーネントの振る舞いを実現するvueの記法になります。 現代の UI 開発では、コードベースを互いに織り交ぜる 3 つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることが分かっています。コンポーネント内では、そのテ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 11月23日に開催されたMTDDC Meetup Tokyo 2024で、「Webサイトのアクセシビリティにどう向き合う？」というタイトルで登壇しました。参加者の皆様からの投票で、この日の3人のベストスピーカーのうちの1人にも選んでいただきました。 これは、その発表内容を記事にするものです。時間や構成の都合により発表に含めなかった情報や、あとで追記したくなったことを書き足したりもしています。Movable Typeのイベントでの登壇だったため、CMSで構築したWebサイトを運用・管理・制作している人を前提とした内容になっています（少なく
はじめに こんにちは、からころです。 今回は、Vue.js でよく利用される v-model の記事について保守性などの観点から書いていこうと思います。想定している読者としては、Vue.js を触ったこと、見たことがある方全般です。v-model は利用方法を誤ると痛手を負いがちですが、非常に強力な味方だよということをお伝えできればと思います。また、Vue.js のバージョンは、記事執筆時点で最新の 3.5.8 を想定しています。 v-model とは さて、v-model とはなんでしょうか？公式ドキュメントには、 コンポーネント上で v-model を使用すると双方向バインディングを実装できます。 https://ja.vuejs.org/guide/components/v-model と記載されています。もう少し詳しく書くと、props/emit のショートハンド構文です。 例えば
はじめに おはようございますhiroです。 Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️ タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考になれば幸いです！ 対象読者 本記事はVueをこれから学習しようとしている初学者の方を対象としています。具体的に以下のような悩みを持った方を想定しています。 JavaScriptをざっと学びこれからVueをどのように学習しようか悩んでいる方 どのような教材を使用すれば良いか悩んでいる方 公式ドキュメントを読めと言われて「読めれば苦労しないよ！」と悶々としている方 本記事では、教材の紹介からその教材をどう使用していくかなどを具体的に記載しております。 ゴール 本記事のゴールとして、Vu
Reading vuejs/core-vapor
はじめに この本を手に取っていただき，ありがとうございます！ この本は，Vue.js の次世代実装である Vapor Mode の実装を読み進める本です． 少々上級者向けではありますが，部分的にでも参考になる点があれば嬉しいです！ この本の目的 Vue.js の次世代実装である Vapor Mode について深い理解を得るVapor Mode とは何かについて理解を深めるどのように実装されているのかソースコードを読み進めながら理解を深めるこの本の目的ではないこと Vue.js の使い方を学ぶ他のフレームワークと比較し，評価する想定読者 vuejs/core や vuejs/core-vapor にコントリビュートしてみたい方Vue.js の理解をより深めたい方著者について ubugeeei (うぶげ) Vue.js メンバー, Vue.js Japan User Group コア
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
Vue Advent Calendar 2024の9日目の記事です。 この記事では2024年のVue.js、そしてそれらにまつわる周辺エコシステムについてを振り返っていきます。関連する大きな出来事や変更があったものについてを中心にまとめています（この内容も取り上げてほしい！というものがあった際は、GitHubから編集提案をください）。 Vue.js 公開10周年 2024年はVue.jsがHacker Newsで公開されてから10周年目を迎える年でした。Vue.jsの進化の歴史については以下の通りになります。 2015年10月: Vue 1リリース 2016年10月: Vue 2リリース 2018年9月: Vue 3の開発が開始 2020年9月: Vue 3リリース 2022年1月: Vue 3がデフォルトになる、ドキュメントもVue 3がメインに 2023年12月: Vue 2がEoLを
Theme 第 167 回のテーマは 2024 年の Yearly Ecosystem です。 Show Note 2024 年のチェックポイント Vite の覇権を Turbopack, RSPack が奪えるか? Storybook は覇権をとって、Chromatic もすごくなりそう Next App Router が本当に広がるか RSC 対応の Bundler が増えて Next 以外の解が見れそう アプリケーションの Rust 化くるか? React Forget Figma Config 2024 の Adobe の影響 State Management どうなってく? (Context, Jotai, SWR, Signal) ESLint to flat config or Biome AI driven FE Development CSS の新しい方法論 今年のキーワ
Today we are excited to announce the release of Vue 3.5 "Tengen Toppa Gurren Lagann"! This minor release contains no breaking changes and includes both internal improvements and useful new features. We will cover some highlights in this blog post - for a full list of changes and new features, please consult the full changelog on GitHub. Reactivity System Optimizations In 3.5, Vue's reactivity sys
クラウドサインのフロントエンドエンジニアの辻@t0daaayです。 2024 年 9 月 1 日に Vue 3.5 のリリースが発表されました。 https://blog.vuejs.org/posts/vue-3-5 このブログでは、このリリースノートを読みリリースされた内容を実際に動かしてみたり、さらに調査した内容についてまとめました。 Reactive Props Destructure の安定化 https://vuejs.org/guide/extras/reactivity-transform.html#reactive-props-destructure props が分割代入の形式でもリアクティブを保てるようになりました。 書き方がかなり簡潔になっています。 const { count = 0, msg = 'hello' } = defineProps<{ count?:
Vue.jsのデバッグをちょっとスマートにする Chrome DevTools Custom formatters機能の紹介 - Stockmark Tech Blog
ストックマーク株式会社でエンジニアをしている安藤です。 本記事は以前に開催していた社内勉強会にて使用していた教材 chibivue の著者であり、Vue.jsのコミッターでもある @ubugeeeiさん から教わったライブラリのデバッグをちょっとスマートに行うことができるようになるかもしれないTIPSをご紹介させていただきます。 Vue.jsのリアクティブオブジェクトをコンソールデバッグしてみる 解説のためにVue SFC Playgroundを用います。 画面を開くとVue.jsのSFCのソースコードがあります。内容は非常に簡素なリアクティブオブジェクトがひとつと、その値をv-modelとして紐づけしているinput要素があり、その実行結果が表示されています。 5行目にconsole.logを追加し、リアクティブオブジェクトを出力してみます const msg = ref('Hello
はじめに こんにちは、エキスパート/lite 開発の中原です！ ビザスクでは主に Vue.js を使用してフロントエンド開発を行っています。 みなさんは Vue.js がどのように実装されているか意識したことはありますでしょうか？ ライブラリを使う時その裏でどんな処理がされているのか正しく理解していないと、意図した挙動をしてくれなかったり、思わぬところでバグが発生することがあります。 今回は Vue.js のリアクティブ機能を実現する ref() と reactive() に焦点を当て、実際のソースコードを読みながら内部動作を理解していきたいと思います。 ref() まずは ref() のコードを見てみます。 // https://github.com/vuejs/core/blob/v3.5.13/packages/reactivity/src/ref.ts#L59-L61 export
こんにちは。 メドピアの伏見 ( @fussy113 ) です。 2024年10月19日に大手町プレイス ホール＆カンファレンスで開催された Vue Fes Japan 2024 に参加してきました！ この記事では当日の様子やセッションの内容などをお届けします。 スポンサーとしての取り組み メドピアはゴールドスポンサー、セッションルームネーミングライツスポンサーとして協賛いたしました。 スポンサーブース 握力で技術的負債を粉砕しよう！ 『握力測定 in Vue Fes Japan 2024』 と題して、握力を測定していただきました。 🧐握力測定はしましたか？🧐#メドピア ブースでは握力測定を実施中✊ 今の自分の握力を知ることができる 滅多にないチャンス🤩 ぜひ挑戦しに来てください！ #vuefes #vuejs 🟢みどり🟢 pic.twitter.com/y4Zc0ccG4C—
Vue2からVue3への移行時に気をつけたい！`v-model`と`input[type="number"]`の予期せぬ型変換
Vue3では、inputがtype="number"を持つ場合はnumber修飾子が自動で適用されます ref: https://ja.vuejs.org/guide/essentials/forms.html#number 一方Vue2では、明示的に.numberを使用しない限りv-modelは文字列のまま扱われていました そのため、Vue2からVue3への移行をする際に、実装によっては意図しない挙動になってしまうかもしれません 検証環境を用意し、何が起こっているかを確認する 今回はVue2, Vue3と環境を用意し、iframeを使って1つのHTMLで確認できるよう動かしてみました どういったケースで困るか 例えば、0から始まる入力を扱うもの(電話番号など)は、丸められてしまうため、バリデーションによっては保存できないなどの不具合が発生してしまいそうですね 他にも、APIでstring
![Vue2からVue3への移行時に気をつけたい！`v-model`と`input[type="number"]`の予期せぬ型変換](https://cdn-ak-scissors.b.st-hatena.com/image/square/3f1c7e5760055cc30ef2002c920d501b8e9df6ef/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--k1Msqtc1--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue2%2525E3%252581%25258B%2525E3%252582%252589Vue3%2525E3%252581%2525B8%2525E3%252581%2525AE%2525E7%2525A7%2525BB%2525E8%2525A1%25258C%2525E6%252599%252582%2525E3%252581%2525AB%2525E6%2525B0%252597%2525E3%252582%252592%2525E3%252581%2525A4%2525E3%252581%252591%2525E3%252581%25259F%2525E3%252581%252584%2525EF%2525BC%252581%252560v-model%252560%2525E3%252581%2525A8%252560input%25255Btype%25253D%252522number%252522%25255D%252560%2525E3%252581%2525AE%2525E4%2525BA%252588...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aaokiken%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2NmYTM5ODQ3MWIuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fg_south_west%252Ch_34%252Cl_default%3Aog-publication-pro-mark-xcosax%252Cw_34%252Cx_217%252Cy_158%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASODA%252520Engineering%252520Blog%252Cx_255%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzczNmNjYmUyMGIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueUse: 5分で分かる Vue.js 開発の効率化術
歴史を感じつつ、クロージャで遊んでみた（JavaScript編） - iimon TECH BLOG
Webフロントエンドでのリアクティビティからalien-signalsを知ろう
Reactive Props Destructure を支える技術
Webサイトのアクセシビリティにどう向き合う？ - Qiita
Vue.jsの v-model 正しく活用できていますか？
経験談に基づく主観的Vue.js学習ロードマップ
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
Vue.jsと周辺エコシステムで振り返る2024年
ep167 Yearly Ecosystem 2024 | mozaic.fm
Announcing Vue 3.5 | The Vue Point
Vue 3.5 の新機能・改善点まとめ - 弁護士ドットコム株式会社 Creators’ blog
Vue.js のソースコードを読んでみよう（ref/reactive 編） - VISASQ Dev Blog
Vue Fes Japan 2024に参加しました！#vuefes - メドピア開発者ブログ