Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
はじめてのSvelte - 基礎から応用まで
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
フロントエンドのデザインパターン
本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
昨今のフロントエンドの技術の進歩スピードは目覚ましいですよね。 特に3大JavaScriptフレームワークと称される「React.js」「Vue.js」「Angular.js」は今やフロントエンドエンジニアであれば最低1つは扱えて当然の必須スキルと認識されてしまっていてキャッチアップが大変です。 (厳密に言うとReactはフレームワークではなくライブラリという扱いですが。。) エンジニア界隈でもこの3大フレームワークの中でどれが一番好みか論争は絶えないですが僕個人は今回紹介するVue.jsが好きでよく使っています。 Vueはエンジニアになって割と最初の方に業務で扱う機会があってそれ以来も別の業務で扱う機会が多く何か運命的なものを感じている今日この頃です。 そんな中つい最近ですが2020年9月にVueがメジャーアップデートされてバージョン3（Vue3）がリリースされました！ それに伴ってVu
fuwamaki運営の情報サイト
fuwamaki運営の情報サイト。注目のアプリ・サービスの紹介や、技術記事、おすすめのマンガ・アニメなど、記事の種類は様々。
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から8年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2021年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : スクロール演出の作り方 トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 20,800 PV ウェブサイトを魅力的にするスクロール演出。スクロール演出を3種類にわけ、それぞれの実装方法を解説しています。ウェブサイトを「より良く魅せたい」というニーズが大きいのか、この記事が202
2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。 後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。 ここ何年かのVueを使った個人開発をおさらい まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。 なんか思ったほど作ってないけどそれは仕方ない。 2019.2 初代メザシアタック（ゲーム） リポジトリ： https://github.com/yuneco/mezashi 解説： VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 開発環境: Vue CLI 言語: JS Vueのバージョン vue: 2.5.22
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
頑張らない Vue3 開発環境構築
今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。 データソースはlarsbijl/trending_archiveを使用 去年はxiaobaiha/github-trending-historyを利用したが今年のデータは無かったので変更 日ごとにまとめた markdown になっており、remark で AST→ データ化しました 集計期間は 2021/01/01 から 2021/12/15 まで 対象言語はJavaScriptとTypeScriptのみ 集計後のデータはこちらのスプレッドシー
Vue3のCompositionAPIがOptionsAPIよりも優れている理由をVue3エンジニアが解説！ | Ragate ブログ
import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { // data const name = ref('John'); // methods const doIt = () => console.log(`Hello ${name.value}`); // mounted onMounted(() => { doIt(); }); return { name }; } }); 実装上での大きな変更点はこちらでも挙げられている通り、以下になります。 data, computed, method 等の Vue 機能は全て setup 関数に定義ライフサイクルのフックは setup 関数に定義リアクティブ(変更検知)したい値は全て ref で指定必須暗黙的に動作していた部分を全
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Form
この記事は「NEXTSCAPE Advent Calendar 2021」の12日目の記事です。 かつてVueに詳しかった人に対して、知識のアップデートをサポートします。 🐣CLI Vueのプロジェクトを新規作成する際、いちいちnpm initしたりgit initしたりnpm install vueしたりラジバンダリする輩はこの世に存在しません。 なんにせよコマンドをペチっと叩いて空のプロジェクトを作成することと思います。 テンプレート、スキャフォルディング、ボイラープレートとか呼ばれてるなにかをコマンドで生成しているはずです。 空のプロジェクト作成にはCLI（コマンドラインインターフェース）が必要であり、CLIの選択肢としてVue CLI、あるいはNuxt.jsが君臨していたことでしょう。 Vite いまは、そこんところのサポートをViteが担当してくれます。 読み方は「ヴィート」。
urlに存在しないページへのpathをリクエストした場合の404ページの表示方法 環境 @vue/cli 4.5.12 手順 ルーテイングを管理するrouter/index.jsで以下のように設定。 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' //NotFoundコンポーネントをimport import NotFound from '@/someDir/NotFound.vue' Vue.use(VueRouter) const routes = [ { path: '*', //設定したurlにいずれもマッチしない場合 // redirect: '/', ※redirectオプションは任意で設定 component: NotFound //No
Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に
この記事はVueアドベントカレンダー2021の7日目の記事です。 SPAでボタンのコンポーネントをリンクとして扱いたいときに気をつけたいことを書きます。 Vueに限った話ではないのですが、僕がVueで開発をする機会が多いのでサンプルコードではVueを使用しています。 他のフレームワークを使っている方は、適宜置き換えて考えていただければ幸いです。 ボタンのコンポーネントでリンクさせたい時ありますよね？ Vue Routerを使用していれば router.push('/foo') のように関数を実行して遷移させることができるので、コンポーネントの内部が aタグ でも buttonタグ でもリンクとして動作させることが可能です。 どちらでもできるけど aタグ を使おうぜというのが本記事の言いたいことです！ サンプル 早速ですが、サンプルを使って紹介していきます。 見た目の同じボタンが2つ並んでい
GitHub - aws-amplify/amplify-ui: Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
What are the major benefits of the new version of Amplify UI? Better developer experience Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application. Endlessly customizable Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with the
バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Worker) MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 cf. MSW で加速するフロントエンド開発 プロダクションのコードのまま API への通信だけを Service Worker がインターセプトしてモックのレスポンスを返すことができるので、バックエンドと切り離してフロントだけを開発することができます！すごい〜 MSW の導入 $ npm i -D msw 開発時だけ使うの
フロント開発を炎上させてしまった話
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
ushironoko.me
ushironokoのブログです。技術・ゲーム・趣味・仕事など。
サマリ Vue.jsで孫 から 親のコンポーネントへ値を渡す際、$emitを使いますが、中間のコンポーネントが増えてくるとその分emitを記述しないといけません。 この中間のコンポーネントでのemitの記述を減らすのに$listenersが使えますので、その紹介をします。 $emitと$listenersの比較 $emitを使った場合 // Parent.vue <template> <Child @click="onClick" /> </template> <script> export default { components: { Child, }, methods: { onClick(value) { alert(value); }, }, } <script> // Child.vue <template> <GrandChild @click="onClick" /> </
こんにちはKARTE Blocksチームです。 日々プロダクトを開発していると新しい機能が増えます。 一方で古くなる機能も増えるため、負債となった部分がボトルネックとなり、新規開発へも影響してきます。 そのため、古くなった部分を解消しながら、新しい技術をインクリメンタルに取り込んでいく必要があります。 この記事は「KARTE Blocksリリースの裏側」という連載の2日目の記事です。全10回
アコーディオンは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なアコーディオンのコンポーネントをVue.jsで実装する方法を紹介します。 How to Build an Accordion Component in Vue.js by by Luca Spezzano はじめに アコーディオンの実装 アコーディオンのコンポーネントの使用方法 終わりに はじめに Vue.jsのコンポーネントに関するHow to記事は今回で4回目となりますが、最もよく読まれているのはチュートリアル記事で、具体的に使用できるものをすぐに実装することができるだと思います。 Vue.jsで再利用可能なタブのUIコンポーネントを実
Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。 今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。 選定結果から言うと、モノタロウ独自の７つの選定基準をもとに、Reactを選ぶことになりました。 背景 新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた 俯瞰して改めて選定基準を考えた 一般的な視点 モノタロウの社内事情 ７つの選定基準 選定結果 技術選定を通して得た３つの学び 背景 まず、モノタロウの現フロントエンドについてざっくり説明します。 モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。 基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
GitHub - Polight/lego: 🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
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
入力フォームを作成した場合には必ずバリデーション処理を実装する必要があります。バリデーションはユーザが入力フォームから入力した値が要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力時にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはなりますが初めて利用する場合は利用方法が難しいと感じるかもしれません
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 ユーザー待望の Nuxt 3 が公開されました。 （Vue 2 対応だった Nuxt 2 の Vue.js 3 対応版です） Nuxt 3 は、TypeScript のネイティブサポートをはじめとした開発体験の向上など、多数の改善がなされています。 もっとも注目したいのは Nitro によるデータ取得やレンダリング周りの機能向上があります。 Nitro により、いわゆる ISG （Incremental Static Generation インクリメンタル静的ページ生成）も可能です。Nuxt 3 は、とてもシンプルに（意識することなく）活用する
スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀 | Ragate ブログ
スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀 こんにちは！ わたしたちは数多くのプロジェクトに Vue3 を導入してきましたが、保守性・パフォーマンスともに本当に魅力的なフレームワークだなといつも感じています。特にNuxt3が登場してから、ますます幅広い利用が可能なフレームワークとなりました。 本記事では、今流行りの Vue3 の注目機能＆ Vue2.x との違いについて、実際の経験談を交え詳しく解説いたします。導入を悩んでいる方は、ぜひ本記事を参考にしてください。 想定する読者 Vue3 の導入を検討しているプロジェクトマネージャーVue3 の導入を検討しているテックリードエンジニアVue3 の新規プロジェクトに参画予定のエンジニア はじめに NuxtJS の Vue3 対応について Nuxt3にて
The Intuitive Vue Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク
We are excited to open source Nuxt 3 after more than a year of intense development. The repository is available on GitHub on nuxt/nuxt under the MIT license. A new foundationOn top of supporting Vue 3 or Vite, Nuxt 3 contains a new server engine, unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern
<script setup> useSeoMeta({ title: 'Meet Nuxt', description: 'The Intuitive Vue Framework.' }) </script> <template> <div id="app"> <AppHeader /> <NuxtPage /> <AppFooter /> </div> </template> <style> #app { background-color: #020420; color: #00DC82; } </style> Static or Dynamic, the choice is yoursDecide what rendering strategy you need at the route level. By leveraging the hybrid rendering, you ca
Vue.jsのコンポーネント名のすすめ
Vue.jsのコンポーネントの命名の際に、個人的に必ず意識していることをいくつかまとめました。 コンポーネント名を検討する際に参考にしていただけると幸いです。 単一ファイルコンポーネント名はパスカルケース（ケバブケース）に 自分はパスカルケースを好んで使用しています。が、大文字と小文字を区別しないファイルシステム上で問題を起こす可能性を考慮してケバブケースも許容されています。
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
Next.jsで勤怠管理システムを作ってみた
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】ref と reactive どっちを使う？
【Vue.js】VueCLIで新しくなったVue3のプロジェクトを作成するまでの手順を徹底解説！
これがフロントエンドで話題になった記事！ ICS MEDIAの2021年 - ICS MEDIA
ここ3年くらいの個人制作を振り返って2022年のVueを考える（超私見）
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
GitHubのトレンドで振り返る2021年のJavaScript/TypeScript
Vue.js2で作ったサイトがIE11で表示されなくなった調査の軌跡 - Qiita
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
Nuxt 3 を今すぐオススメしたい 15 のポイント
ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス - BASEプロダクトチームブログ
かつてVueに詳しかったひとに捧げる2021年末のVue - Qiita
【Vue.Router】404ページへの遷移 - Qiita
Vue router を使った時の GitHub Pages での 404 対策 - Qiita
メルペイフロントエンドのテスト自動化方針 | メルカリエンジニアリング
SPAでボタンコンポーネントをリンクにする時に気をつけること
Next で MSW (Mock Service Worker) を使うのメモ - かもメモ
Vue.jsで孫 → 親コンポーネントへの値の受け渡しを楽に行う方法 - Qiita
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説
Vue3でフォームバリデーションのVee-Validate4の基礎を理解 | アールエフェクト
SPA Componentの推しディレクトリ構成について語る
Nuxt 3 の useFetch() と useAsyncData() の使い方
Nuxt 2 - The Intuitive Vue Framework
Introducing Nuxt 3 Beta · Nuxt Blog
Nuxt: The Intuitive Vue Framework
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説