【Vue3】Vue.jsのデータフローおさらい！ フロントエンド Vue.js JavaScript 最近社内ではフロントエンドではVue.jsでの開発がデフォルトになってきています。 Vue.jsではコンポーネント間のデータ受け渡しで「props/emit」を使用していますが、慣れないうちはいまいちデータフローがつかめず苦戦するんですよね(※今もですが。) また、Vue3では「provide/inject」という新たな選択肢も登場し、ますます混乱を極めている方もいるかもしれません。 今回は、Vue.jsでのデータフローに焦点を絞って記事を書いていきます。 ひとつひとつの機能を把握するのはたいへんなので、まずはざっくりとした流れから見ていきましょう。 Vue.jsのデータフロー3選Vue.jsでのデータ管理は、基本的に以下の3つがベースとなります。 props / emit vuex pr

Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th

システム開発本部アプリケーションエンジニアの Edy です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 その Vue.js ですが、「Vue 3 is now in RC! (Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub)」が公開され、version 3 ( Vue 3 ) が盛り上がりを見せています。 今回は、Vue 2 から 3 へ移行する理由と、 2 から 3 へ version up するために行なっている Composition API の導入 についてお話していこうと思います。 そもそも Vue.js とは ? SFC TypeScript Vue 2 の限界 大規模なプロジェクトになるほど開発効率が落ちる ロジックの再利用にかかるコストが大きい 単

はじめに 今どきのフロントエンドのトレンドを調べていたら、この記事に出会いました。 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 その中で、コンポーネント単位での共有ツールとしてBitが「今、アツい！」と紹介されており、前々から個人的に気になっていたのと、日本語の情報が少なかったので、公式ドキュメントにあるチュートリアルをやってみました。 ということで、この記事は以下のBit公式ドキュメントの翻訳記事です。 Bit for React - Bit よしなに意訳したり、重要そうな部分を太字にしたりしていますが、基本的に内容は変えていません。 少しでも、皆さんのBitの理解の助けになれば幸いです。 Bit for React 概要 Bitを使用すると、異なるプロジェクトやアプリケーション間でコンポーネントを共有お

Vue.js アプリでユニットテストを書くには、Vue Test Utils や Jest など、知っておくべきことがそれなりにあります。 現在、Vue CLI でアプリを作っていますが、ユニットテストを書くために色々と調べないといけませんでした。 今回はその過程で理解した Vue.js でのユニットテストの基本を以下にまとめます。 Vue.js のユニットテスト まず、Vue.js では何を「ユニットテスト」として考えるのかを整理します。 ユニットテストの単位 Vue.js アプリは、複数のコンポーネントで構成され、それぞれのコンポーネントが連動しながら動きます。 そのため、ユニットテストの単位は「コンポーネント」となり、コンポーネントごとにテストを書いていきます。 何をテストすべきか？ コンポーネントごとにユニットテストを書くということですが、コンポーネントのどの部分に対してテストを書

とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ？」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ？」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか？」 ワイ「ヒグマ？」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか！」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません

ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ

4/14 追記 : この方法はフロントでメアドの判別をしているため、やろうと思えば中身を見ることが出来てしまいます。本当に見られたくないページを作成したい場合、Cloud Functionsを使うことでバックエンドでデータを取れなくなり見れなくなるという設計になります。　@potato4d さん @302u2weさん 鋭いご指摘ありがとうございます。 正しい実装は @potato4dさんのコメントにあります。よろしくお願い致します。 注意 大学がG Suiteを使っている前提です。 大学のメールアドレスでGoogleにログイン出来たらG suiteです。 この記事でやること バックエンドをFirebaseに丸投げしてGoogleアカウント認証でのログイン → ユーザ情報(ユーザのメアド)による表示の切り替え → サインアウト までの簡単なチュートリアルです。 大学の関係者の認証方法 大学の

【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。LaravelチュートリアルVue.jsVuexvue-router 2020/1/5 更新 チュートリアルを Laravel バージョン6 & PHP 7.4 に対応し、加筆修正しました。 技術ブログに 『Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう（全16回）』 を公開しました 出来るだけたくさんの方に見てほしいので宣伝エントリを書きます。 コンテンツ フロントエンドに Vue.js + Vue Router + Vuex と サーバーサイドに Laravel を使用して写真共有アプリを開発するという内容です。 こんなやつ ができます。 写真を投稿できます。 コメント投稿、いいね、ダウン

Vueの便利なテクニック７つ Youtubeで見つけたので勉強ついでにまとめてみる。 出展 Chris Fritz さん Youtube https://www.youtube.com/watch?v=7YZ5DwlLSt8 資料（Github） https://github.com/chrisvfritz/7-secret-patterns まとめ - 動画とはバージョン違い（英語） https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/ Productivity Boost - 生産性向上 1. Smarter Watcher 元のコードはこれ。生成時になにかしてアップデート時にもなにかする。よくやる。

スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs

日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい

ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=

Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き」は健康にいいよねって誰でも言うと思うけど、実際に万人がやっているかどうかは別じゃないですか。それと同じで「テストすること」も絶対いいことだと私は思っていますが、やるかどうかはチームの置かれている状況によって決まります。この記事は、その「テストを導入するかどうか」という意思決定の一助にでもなれればいいなと思います。 はじめに こんにちは。ぼくです。 今回はVue.jsでTODOアプリを作ってみよう

主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu

まえがき この記事は Webpack を使って単一ファイルコンポーネント(Single File Component)の Vue アプリケーションを作るチュートリアルです。 公式の日本語ドキュメントはかなりしっかりしています。 しかし、vue-cli を使わない通常の開発フローに沿ったチュートリアルや、単一ファイルコンポーネントの使い方等、実際に使うにあたって必要な情報がかなり少ないです。 本記事ではその部分のカバーをすることを目的とします。 対象読者は フロントエンド開発の知識がある(JS や CSS のコンパイル等) npm を用いた開発フローをある程度知っている Vue.js の名前くらいは知っている 最近の Javascript がある程度書ける くらいの人を想定しています。 つくるもの このチュートリアルでは、Vue.js を使ったカウンターアプリを作ります。 JS ファイルのビ

NuxtとTypescriptの対応について