Vue.js

こんにちは。GMOメイクショップの黒木です。 弊社の makeshop というサービスでは、2024年12月11日（水）に新管理画面の注文詳細のリニューアルを行いました。 www.magazine.makeshop.jp 新注文詳細は、アーキテクチャから見直して、将来的なデザイン変更にも柔軟に対応できるような設計を目指しました。この記事では、そんな新注文詳細のアーキテクチャについて、詳しくご紹介します。 旧注文画面の課題 旧注文詳細の依存関係 コンポーザブルの依存関係が強すぎた 新注文詳細のアーキテクチャ アーキテクチャを考える上で重視した点 将来的なデザイン変更にも柔軟に対応できる構成 St…

はじめに Pinia Colada とは 非同期処理の課題 1. 冗長なコード 2. 状態管理の複雑さ 3. 効率的なデータフェッチング 非同期処理における様々なアプローチ 1. Vue Promised 2. swrv 3. TanStack Query (Vue Query) Pinia Colada の優位性 Pinia Colada の基本的な使い方 セットアップ 基本的なデータ取得の例 ポイント解説 まとめ はじめに この記事は every Tech Blog Advent Calendar 2024 の2日目の記事です。 はじめまして、エブリーの羽馬（@naoki_haba）です。…

CEO室 コミュニケーションデザイナーのmacoです。 開発チームのメンバーと一緒に、Vue Fes Japan 2024 に参加しましたのでレポートします。 VueFes とは Vue Fes Japanは、JavaScriptフレームワークの代表格であるVue.jsに関する、日本最大級のカンファレンス。 Vue.js にまつわる知見をセッションから得たり、他の開発者と交流できる場となっています。 今年はスタッフ含め国内外のVue.jsユーザー700名が一堂に会しました！ ビザスクでは、プロダクトにVueやNuxtを使用しており、実際に業務で使用している開発メンバーと共に参加しました。 （私…

こんにちは、yukiminaです。普段はVue.jsを使用したWebシステムの開発を行っています。 この度、日本最大級のVue.jsカンファレンス「Vue Fes Japan 2024」にボランティアスタッフとして初参加させていただきました！ Vue Fesとは Vue Fes Japanは、日本最大級のVue.jsカンファレンスです。 2018 年に誕生したこのカンファレンスは、文字通り Fes ＝お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。 国内外の著名スピーカーによるセッションの他、LT、初心者向けハンズオン、グッズ販売などのイベ…

はじめに 今朝、ブラウザ上でアプリ開発ができる「bolt.new」という生成AIを試してみました。特に驚いたのは、日本語でチャットするだけでアプリを作成できる点です。Vue.js初心者の私でも、30分で三目並べのゲームを作成することができました。誤解を恐れずに言えば、Vue.jsを知らなくてもアプリ開発ができます。 この記事では、私が実際に三目並べアプリを作成した過程を紹介し、生成AIを活用した開発体験について書きます。さらに、プログラマが不要になるかもしれない未来についても自分なりに掘り下げています。 1. bolt.newとは？ ブラウザでアプリ開発（JavaScriptのフレームワークを…

2024年9月の１ヶ月間エキサイト株式会社が開催した「Booost!!! Excite Internship 2024」で経験したこと、感じたことをこの記事を通して紹介したいと思います。 自己紹介 私は商学部に在籍している大学3年生です。大学内の授業ではプログラミングやコンピューターサイエンスの科目がほぼ無いと言って過言ではありません。そのため、私は「Recursion」という学習サービスを利用し、ソフトウェア開発やコンピューターサイエンスを学んできました。個人での開発物として、複数のバックエンド及びフロントエンドプロジェクトがあります。扱ってきた言語、技術は習熟度の差はありますが、JavaS…

はじめに こんにちは、トモニテ開発部ソフトウェアエンジニア兼、CTO 室 Dev Enable グループの rymiyamoto です。 この度、エブリーは 2024 年 10 月 19 日(土)に開催される『Vue Fes Japan 2024』に、ゴールドスポンサーとして協賛することになりました！ vuefes.jp エブリーでは、DELISH KITCHEN を現在 Nuxt.js（Vue.js）で構築しており、2018 年から採用しています。 今回の協賛を通して、さらなる Vue.js コミュニティの発展に貢献できればと考えております。 近年は Vue.js 周辺のエコシステムでは新た…

最近、ドイツ語の Gendern についての記事をいくつか書いていた。その最中の調べもので表題のオンライン辞書を見つけたのでメモ。 genderapp.org 気になる名詞を入力すると、それに対応するジェンダー中立な単数形・複数形の例が出てくる。たとえば musiker （音楽家、ミュージシャン）で試してみるとこんな感じ。 登録ユーザーの提案した言い換え例がずらずら出てくる。 Kreativeschaffende よりも Musilkreative のほうが「音楽」に限定している感じがしていいんじゃないか、などと思ったときは、登録ユーザーなら左側の矢印で順位を上げられるようだ。 各項目の下部に…

jQueryとは？ jQueryのメリット 簡単に使える 豊富なプラグイン 既存プロジェクトでの利用 jQueryのデメリット パフォーマンスの低下 モダンな技術の台頭 時代遅れと言われることも どんな人が学ぶべき？ 学ぶべき人 業務で既存プロジェクトに関わる予定がある人 DOM操作に慣れていない人 学ばなくてもよい人 新しい技術を習得したい人 ゼロから新しいWebサイトを作りたい人 私の結論 まとめ jQueryは学ぶべき？ 私自身、学習を進める中で疑問に思いました。インターネットで調べてみると、jQueryは便利で簡単と言われる一方で、「時代遅れ」といった意見も見かけます。今回は私が調べた…

この記事は クラウドワークス グループ Advent Calendar 2024 シリーズ3の13日目の記事です。 こんにちは。株式会社クラウドワークスで「クラウドワークス」の開発を担当しているエンジニアの keigo0331 です。 最近はデータサイエンスに興味を持ち始め、趣味で数学や統計学を勉強しているのですが、難易度の高さに悪戦苦闘しています。一応大学では数学を専攻していましたが、約10年のブランクがあるとほとんど忘れてしまうものですね。 さて、今回の記事では、私が所属しているプロダクト開発チーム「デリバードチーム」についての内容です。 私は入社以来このチームで活動しており、気づけば3年…

※この記事は、2024 Speee Advent Calendar12日目の記事です。 昨日の記事はこちら tech.speee.jp こんにちは、DX事業部のエンジニアの中嶋です。 プロダクト開発ではユーザーの課題を解決するため、要件、設計、アーキテクチャといった多くの「手段」を日々検討しています。 手段を検討するなかで意識的か否かに関わらず行われているのが「意思決定」です。感覚的な意思決定をしてあとで後悔をしたり、意思決定に時間をかけすぎることはしばしばあります。こうした問題は、意思決定プロセスの質を高めることで改善できます。よい意思決定プロセスは、より筋のいい手段を導きます。 本記事では…

こんにちは、ぽんです いつも訪問ありがとうございます（ブックマーク・スターもありがとうございます） ブログ更新の励みになっています (adsbygoogle = window.adsbygoogle || []).push({}); まさかのまさかなのですが、願ったり叶ったりなのか、会社のホームページに携わる機会を今得ようとしています チームで動いていくのですが、趣味であるホームページ作成がまさか仕事になるなんて最高です そこでホームページ作成に必要なものや手順、スキルはなどをまとめて会社の資料に落とし込むための要素をここにまとめたいと思います 同じようにホームページ作成に携わる方の参考になれ…

ソフト化・アプリ化・Webアプリ化の違いと実践方法 はじめに アプリやソフトを作りたいと思ったとき、どのように作るべきか悩むことがあります。「ソフト化」「アプリ化」「Webアプリ化」の違いを理解し、自分に合った方法を選ぶことが重要です。ここでは、それぞれの方法の特徴と実践例を解説します。 1. 用語の基本理解 ソフト化とは • 定義: デスクトップPCで動作するインストール型のアプリを作成すること。 • 例: ExcelやVisual Studio Codeのように、PCにインストールして使うソフト。 • 技術例: • Electron: JavaScriptを使ってデスクトップアプリを作るフ…

この記事は、 KENTEM TechBlog アドベントカレンダー2024 9日目、12月9日の記事です。 みなさんこんにちは！ KENTEM第二開発部でフロントエンドを担当しているO・Aと申します😺 この記事では、一般家庭の要らなくなったPCを活用して、自宅で分散型SNS（Misskey）サーバーを構築する方法を、12/9～12/13の5日間に分けて、毎日丁寧に解説していきます。 シリーズ目次 第1回：分散型SNSとは何か？ ←本記事 tech.kentem.jp 第2回：Ubuntuの環境構築手順 tech.kentem.jp 第3回：ドメイン取得とCloudflare Tunnelの設定…

Vue.js v3.5からReactive Props Destructureという便利機能が追加されました🎉 blog.vuejs.org 個人のサービスをこれを使うようにリファクタリングしていたのですが、タイトルの通りReactive Props Destructureを使いつつWithDefaultsでデフォルト設定するとpropsのリアクティビティ性が失われるっぽい挙動がありハマったのでメモ📝 結論 「解決策としてはWithDefaultsを使わずにconst {msg = "default"} = defineProps({})みたいな形で書き直してあげるとリアクティビティ性が維持さ…

この記事は音MAD Advent Calendar 2024に参加しています！ adventar.org Wordleとは 様々なWordle派生 音MAD作者版Wordle 制作記 音MAD作者版Wordle『Otomadle』 ルール説明 実際に遊んでみよう 改善点、今後追加したい機能など 最後に Wordleとは 皆さん、Wordleというゲームはご存じでしょうか？ www.nytimes.com 6回の回答の間に、正解の英単語を当てるクイズゲームです。 文章での説明だとよくわからないと思うので、どんなものか知らない方はぜひやってみてください！ 様々なWordle派生 Wordleのシス…