はじめに こんにちは、フロント歴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
Vue.jsの基本からよく見かけるUIの実装方法まで、JavaScriptが苦手な人向けに解説した入門書 -Vue.jsの教科書
Vue.jsの基本から、Webページやスマホアプリでよく見かけるUIの実装方法まで、やさしく丁寧に解説した入門書を紹介します。 HTMLとCSSはできるけどJavaScriptはいまいち、Vue.jsってよさそうだけど何から始めればよいか分からない、そんな人にぴったりの一冊です。Vue.jsの解説書にはJavaScriptの基礎知識が前提のものが多いですが、本書は異なります。 本書はある程度HTMLとCSSが使用でき、JavaScriptはちょっと苦手という人にお勧めです。特に、Vue.jsに一度挑戦してみたけど、JavaScriptがいまいちの私には無理だった、、、と挫折してしまった人に特にお勧めです。
Vue.jsの人気がすごいですね。 いくつかの企業はすでにVue.jsを使い始めており、一部はメインのプロダクトに、一部は二次的なプロジェクトに使用しています。 Vue.jsへの関心が高まる中、人気が高いフレームワーク、そしてVue.jsをすでに採用している企業サイトを紹介します。 画像: vuejs.org Google, Apple and Other Users of Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Vue.jsはGoogleも採用している 人気が高いフレームワークは？ Vue.jsを信頼している10大企業 まとめ Vue.jsはGoogleも採用している 先日、Googleの人材募集サイトにアクセスした際に私が注目したのは、Chromeの機能拡張でVue.j
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
#remote_vue で話しました。
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。 Vue.jsの概要説明とプロジェクト設定はこちら： www.katonobo.com www.katonobo.com Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsのサンプルコード コードの説明 Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。 今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。 実際の動作はこちらのサイトで確認してくださ
Laravel+PostgreSQL+Vue.jsでSPA開発【チュートリアル】 - OPTiM TECH BLOG
はじめに 皆様こんにちは。OPTiM新卒1年目エンジニアの青木です。 前回は早押しボタンなんかを作っていました。 tech-blog.optim.co.jp 今回は、PHP フレームワークの Laravel を、PostgreSQL と Vue.js と組み合わせて作成する TODO アプリを通して紹介します。 このフレームワークらはこちらの記事でも密かに利用しています。 tech-blog.optim.co.jp OPTiMではあまり利用されていませんが、一部のアプリケーションで実利用されている箇所もございます。 PHPは昔のイメージからかなり避けられていていますが...今のPHPとそのフレームワークはすごく発展していてとても使いやすいので是非使っていただきたい！という気持ちがあります。 ですが、現状はあまり利用していただけなくて個人的には悲しい気持ちでいっぱいです。 そんなPHPですが
Vue.js入門
AboutPressCopyrightContact usCreatorsAdvertiseDevelopersTermsPrivacyPolicy & SafetyHow YouTube worksTest new features© 2024 Google LLC
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】 - Qiita
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】CSSアニメーション初心者Vue.jsフロントエンド コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します ２. filterとopacityを使いこなすスライダー
Vue.js + Algoliaを使って、フロントエンド開発だけで検索機能を実現する - LiBz Tech Blog
はじめに 前回書いたvue-cli uiでVue.js開発環境を作る記事を書いたところ、同僚がそれを引き継いでvui-cli uiで立ち上げたアプリに「APIから取得したデータでユーザーの一覧を表示する」機能を追加した記事を書いてくれました。 tech.libinc.co.jp tech.libinc.co.jp 今度はそれを更に改良して、Algoliaを使ってユーザーの全文検索機能を作ってみました。 ちなみにTOP画像がゴリラなのは、少し前までAlgoliaのことをAlgorillaと勘違いしていたからです。ウホウホ Algoliaとは www.algolia.com AlgoliaはモバイルアプリやWebサービスに導入することで、全文検索エンジンが利用できるSaaSです。サービス内のコンテンツデータをAlgoliaサーバにアップロードすることで、API経由でコンテンツデータに対して全文
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
【Vue.js】【Firebase】routerを使ってログイン認証がないと見れないようにする設定方法 - かとのぼのマイコード・マイライフ
この記事は、Vue.jsとFirebaseでログイン認証を実装した際、ログインしていないと見れない画面を設定したい場合のサンプルコードと解説です。 サンプルコードは、サーバーはFirebaseで、Vue-Routerを使っている前提で説明しています。 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 2.「router.beforeEach」を設定することで画面遷移する前にログイン判定 3.実際のサンプルコード 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 ログイン判定が必要なパスだと設定するには「ルートメタフィールド（要するにmeta情報）」を利用します。 ルートメタフィールド | Vue Router 「router.js」にVue-routerのコードを記述していますが、そのroute
JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！ ※2020/01/07追記：vuex-persistedstateでローカルストレージにデータを保存 Vue.js基本 三大フレームワーク比較とHello world そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。 ※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ イベント（v-on）、分岐（v-show、v-if）、ループ（v-for） イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやっ
SPA -> GraphQL -> Serverlessバックエンド Vue.jsとAmplifyを駆使して、1からモダンなフロントエンド開発＆サーバレスバックエンド構築をしてきます。今回は、Vue.jsで作成したSPAからAppSyncへGraphQLベースのリクエストを送り、裏のDynamoDBへデータの書き込みと読み込みまでを確認します。 （完成図） バックエンドのAWSリソースは、Amplify Frameworkを使用することで、コマンドラインから作成していきます。 また、Amplify Consoleを使用することで、CI/CDパイプラインも同時に作成し、GitHub上の最新断面がHTTPSでWebアプリとして公開するまでが本記事のゴールです。 登場人物 小さなアプリから大規模まで対応できる優れたフロントエンドフレームワークで、個人的にも多用しています。本記事はVue.jsのA
2020/07/28 時点の Vue 2.x + TypeScript について言える確かなこと - potato4d
できる・できないをまとめておく。 なお、 Class Component の記法は Vue 3 の仕様から Drop されたので、そこについて言及する場合はその旨を明確にする。 this の型について 基本的に全て有効化できる。 Vue 2.5 より this の型が正しく使えるようになっている。しかし、いくつかの条件がある tsconfig.json において、 noImplicitThis が true である必要がある 既存プロジェクトからの移行でない限りは strict: true であるはずなので、問題ない 逆に、既存プロジェクトの TS 化については、 noImplicitThis を false として Vue Template 以外の純粋な JavaScript 部分から段階的に移行できる。 computed などについて、戻り値を明示的に指定する必要がある これは Vet
Vue Fes Japan 2019 サイトのソースコードを公開した - おいちゃんと呼ばれています
この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。 生成した静的ファイルを Netlify でホスティングしている。 スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。 ポイントをピックアップ Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いの
(株) ライトコード Webエンジニアの宮田です。 今回、 JavaScript のフレームワークの一つであるVue.js（ビュージェイエス） を触ることになったので、学習したことを書いていきたいと思います。 最終的には Vue.js に基づいたフレームワークの Nuxt.js（ナクストジェイエス） を利用した開発を目標とします。 まず今回は、入門第1回の定番である"Hello World" プログラムから始めていきたいと思います！
静的サイトジェネレーター「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.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴開発室ブログ
みなさん、いかがお過ごしでしょうか。今年の7月からラボのマーケチームに加わったY.I.です。 好きな作品は「ゆるキャン△」です。お盆休みには「ゆるキャン△」舞台の富士山周辺でキャンプツーリングをしてきました。 ゆるキャン△に関しては熟知している私ですが、技術的にまだまだ未熟な開発者です・・・。活躍できるよう頑張っていきますので、どうぞよろしくお願いします。 さて、今回はVue.jsのテスト、とくにVuexのテストについて書いていきたいと思います。 0. この記事を読んでわかること 本連載では「ゼロから始めるVuexのテスト入門編」と題して、これまでVuexのテストを書いたことがない方を対象に、全2回に渡ってVuexのテストの詳細を書いていきます。 今回は連載の第一回目として、下記の構成でお送りします。テストの必要性やポイント、またVuexのテストがどのようなものになるのか感じ取っていただけ
v-kansai Vue.js/Nuxt Meetup #11 (京都Devかふぇ共催)でVue.jsのパフォーマンスに関する発表を行いました。 https://vuekansai.connpass.com/event/144194/ # 参考にした記事 - 超速! Webページ速度改善ガイド(WEB+DB PRESS plus) - https://www.amazon.co.jp/dp/477419400X - Web Fundamentals | Google Developers - https://developers.google.com/web/fundamentals - Vue.js App Performance Optimization – A Tutorial Series - https://madewithvuejs.com/blog/vue-js-app-pe
Vue.js アプリでユニットテストを書くには、Vue Test Utils や Jest など、知っておくべきことがそれなりにあります。 現在、Vue CLI でアプリを作っていますが、ユニットテストを書くために色々と調べないといけませんでした。 今回はその過程で理解した Vue.js でのユニットテストの基本を以下にまとめます。 Vue.js のユニットテスト まず、Vue.js では何を「ユニットテスト」として考えるのかを整理します。 ユニットテストの単位 Vue.js アプリは、複数のコンポーネントで構成され、それぞれのコンポーネントが連動しながら動きます。 そのため、ユニットテストの単位は「コンポーネント」となり、コンポーネントごとにテストを書いていきます。 何をテストすべきか？ コンポーネントごとにユニットテストを書くということですが、コンポーネントのどの部分に対してテストを書
【ブクマ推奨】React、VueからWebAssemblyまで！LT動画12本公開🎉 — TechFeed Conference「後夜祭」(2)
「TechFeed Conference 2022後夜祭」第二弾！今回はReact、Vue、Angular、Web3D、WebAssembly、フロントエンド設計に関するLT動画を12本公開です！ こんにちは、TechFeed CEOの白石です。 2022年5月14日に開催された「エンジニアの祭典」TechFeed Conference 2022は、「日本を代表するテックエキスパート50名による大LT大会」という前代未聞の取り組みとして、大盛況のうちに幕を閉じました。 ですが、TechFeed Conferenceはまだまだ終わりません！ 本イベントは、エキスパートの貴重な知見を一人でも多くの方々に届けるべく、企画当初から 「全セッション、永久保存版」 を掲げて、アーカイブ化にも全力を尽くすと誓っておりました。 本日より6/10までの間、「TechFeed Conference 2022後
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
iCARE Dev Meetup #19 2021/03/17
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
まちにまった Vue.js 3
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【2. Introduction】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回はIntroduction編です。 Vue.js とは？ Vue.jsは、ユーザーインターフェース（UI）を構築するためのプログレッシブ・フレームワークです。 Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. このモノシリックなフレームワークが何を指しているかといえば、例えばAngular.jsです。モノシリ
Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog
スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で
<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始 花谷拓磨氏（以下、花谷）：「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行
【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
こんにちは。AWS事業本部のKyoです。 簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の１つに上がってきます。 Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ？」そんなイメージをお持ちの方も多いのではないでしょうか。 今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。 また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。 具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。 Amplify is 何？ まず、言葉を整理しましょう。
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
「Vue 3」は、JavaScriptフレームワークVue.jsの次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。Vue 3で導入される新機能のうち、前回は新しいコンポーネント記述形式「Composition API」を紹介しました。今回は、それ以外の主な新機能を説明していきます。 はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
【React/Vue.js】UIコンポーネントのProps設計と具体的な作り方 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、UI コンポーネントの Props 設計について紹介します。 コンポーネントを初めて作る方や作り慣れていない方は、どのような Props 設計にすれば、汎用的にできるのか、どこまで Props に持たせるべきか悩んだことがあるのではないでしょうか。本記事では、具体的な実装例を元に解説していきますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、UI コンポーネントの Props 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue3をアゲアゲ↑↑する記事 - Qiita
Vue.js と Nuxt の 2023年まとめ
GoogleやAppleも！すでにVue.jsを採用している企業サイト・プロジェクトのまとめ
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
Vue.jsで基本的なチャットアプリ機能を実装するためのサンプルコード - かとのぼのマイコード・マイライフ
「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
Vue.jsを習得するためにやった事 まとめ（随時更新） - Qiita
Vue.js＋Amplifyを駆使すればモダンなWebアプリを20分で公開できる - Qiita
【第1回】Vue.js 入門 〜Hello World編〜 – 株式会社ライトコード
Vue.js Performance Tips / #v_kansai 11
Vue.js ユニットテストの基本まとめ - Qiita
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
【Vue3に備える】実務で使うComposition APIについて考える
【Vue.js 3.2】`<script setup>` 構文がすごくすごい
新しいパッケージの開発はVue 3で作ろう Vue.jsのエコシステムを構築するには
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介