アコーディオンは、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コンポーネントを実
ブラウザ上でカレンダーを使ってスケジュールを管理したい場合、ネット上に公開されているカレンダーライブラリを利用するかGoogle Calendarを利用するしか選択肢がないって決め付けていませんか？ 自作のカレンダー作成はJavaScriptの入門者の人にとってハードルが高いように思うかもしれませんが作り方のベースさえ理解することができれば実はそれほど難しいものではありません。本文書ではJavaScript+Vue.jsを利用してスクラッチから自作カレンダーを作成していきます。 自作のカレンダーの作成方法を理解することができればGoogleカレンダーやライブラリにはない自分だけのオリジナルの機能をもったカレンダーアプリケーションを作成することができます。 本文書ではカレンダーを作成する際にvue.jsを利用していますが、vue.jsは必須ではありません。本文書でカレンダー作成の基本がわかれ
(株) ライトコード Webエンジニアの宮田です。 前回までで、Vue.jsの主要なディレクティブが扱えるようになりました！ 今回はもう一つ、基本的な要素である 「オプション」 についてみていきたいと思います。 これまでも Vueインスタンス内に「el」や「data」「methods」 といったプロパティが出てきたと思います。 これこそが、Vue.js におけるオプションと呼ばれるものなんです！ オプションとはVueインスタンス内で使用する、オブジェクトで定義されたデータやメソッドのことを指します。 コンポーネントオプションとも呼ばれます。 準備いつものように、「プロジェクトファイル」と「index.html ファイル」を用意します。
HOME制作Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Webサイトを制作するときに、そのサイトの規模が大きくなればなるほど、効率的にコードを書き、それを運用できる方がいいですよね？ そんなときにおすすめなのが、Nuxt.js（ナクストジェイエス）です。 Nuxt.jsによって、学習が比較的簡単で、SPAやPWAなど最新のWebサイトがすぐに設計できます。 この記事では、Nuxt.jsとはなにか、Nuxt.jsを使うメリット、Nuxt.jsに向いているサイトについて解説していきます。 Nuxt.jsってなに？ Nuxt.jsは、2017年以降急速に普及しているVue.js（ビュージェイエス）のフレームワークです。 フレームワークとは、コードが使いやすく「型」になったもののことです。
Vue.jsを１年半ぐらい使ってきて、それなりに知見が溜まってきたので、それらを俺的ベストプラクティスとして吐き出してみようと思う。巷にあふれるVueのベストプラクティスってv-forに:key付けようとか、お作法的な話ばかりで、あまり実践的な内容は見かけないのが記事を描き初めたきっかけ。というわけで内容的にはややマニアックで、Vue初心者にはちょっと難しいかもしれないのでそこはあしからず。なお対象はVue 2で、Composition APIは使ってないのであしからず。あとTypescriptでも使ってない。 📌 スタイルガイドに従う のっけからお作法的なことなんだけど、でもこれはやはり事なこと。とにかくVue公式のスタイルガイドをよく読んでそれに従おう。基本的な内容がほとんどだが、よくまとまっていて、従わない理由が特に見つからない。 🔗 スタイルガイド – Vue.js いくつか特
![[Vue.js] 俺的ベストプラクティス＋バッドプラクティス | Oh My Enter!](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd3f14a219bff78aff174002abae93707cf55efb/height=288;version=1;width=512/https%3A%2F%2Fwww.ohmyenter.com%2Fwp-content%2Fuploads%2F2021%2F04%2F512px-Vue.js_Logo_2.svg_.png){kind=logo}
塵も積もれば山となる、Vue.js製スプレッドシートのパフォーマンス改善記 - ANDPAD Tech Blog
はじめに はじめまして、オクトのフロントエンドエンジニアの小泉です。約1年前に入社し、Vue.js（Nuxt.js）でプロダクトのWebフロント開発に携わっています。 初めて会社のブログに寄稿するにあたって、自分がオクトでどんなことをしているかを書こうと思ったのですが、私が担当しているプロダクトは現時点で正式リリース前のため、今回はその中に組み込まれている簡易スプレッドシート機能について、また特にそのパフォーマンスを改善するために行ったことについて書いていきます。 といっても、スプレッドシート的なものを自前で実装しようという人はなかなかいないと思いますので、データ量の多いリアクティブなサービスをVue（Nuxt）で開発する際のハマりポイントとして参考程度に流し読みして頂ければ幸いです。 スプレッドシート機能とは 現在、オクトで自分が開発に携わっているプロダクトには、商品情報を入力していって
TL;DR inject/provideとslotでcontextを作れる pc/spで同じロジック&違うテンプレートを扱う時に状態を共有したい時とか有用 先日Vue 3.x系のRCが外れ正式にリリースされたということで、みなさんゴリゴリcomposition apiを書いていることかと思います。 ここでは、3系になりより扱いやすく強力なAPIとなったprovide/injectを用いて、コンポーネント間の状態管理を行う方法を紹介します。概念的にはReact Contextとほぼ同じようなものなので、目新しいものではありません。また、この機能はsetupプロパティを通してのみ値の取り出しや加工ができるため、Option APIを引き続き使う場合は注意してください。 provide/injectのおさらい Vue 3になりprovideとinjectは関数として外部へ公開され、さらにリアクテ
久しぶりの投稿です。 備忘を兼ねて簡単に書きます。 deep selector？ Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。
VeeValidateとは VeeValidateは、Vue.js用のリアルタイムバリデーションコンポーネントライブラリです。 ユーザーによって入力された値が不正な場合に、リアルタイムにエラーを表示させることができます。 バリデーションパターンは全部で27種類備えています。 さらにカスタムバリデーションとして、自作のバリデーションを実装することも可能です。 Vue.js用のバリデーションライブラリでは、最大の人気があります(vuelidateが肉薄してますが。 バリデーションライブラリで悩んだら、ひとまずこのライブラリを選択しておけば問題ありません。 【動画サイズ：154KB】
滑り込みで東京オリンピックの抽選申し込みを済ませました、Webエンジニアの本間です。 どの日でもよいので抽選に当たって欲しいのですが、全部当たると困ってしまう、なかなか悩ましい気持ちになりました。 さて弊社では、現在開発中のプロジェクトのフロントエンドの実装において Vue.js を使っています。 今回、Vue.jsを使った実装をしている中で、複数ページにまたがるフォームの実装で調査した内容を紹介しようと思います。 想定する画面 今回想定するのは、「入力画面1」←→「入力画面2」←→「確認画面」→「完了画面」のような遷移でフォームをsubmitする画面一覧です。 この手の画面、サーバーサイドのみで実装しようとすると大変だったのですが、モダンフロントエンドの機能を活用することでかなり楽に実装できるようになりました。 このような画面をVue.jsで実装することを考えます。 Vuexを使う場合
遅ればせながら、新年明けましておめでとうございます。 12月、1月とお仕事でリリースしなければならないものもあり気づけば中旬に差し掛かってしまいました。 さて、前回はNuxt.jsを使用したSSRアプリケーションの概要について投稿しましたが今回はDjangoとNuxtを使用し実際にSSRアプリケーションのサンプルを作成してみます。 今回の構成はバックエンドのDjangoはDRF（Django Rest Framework）を使用しAPIを提供、フロントエンドはVueベースのフレームワークであるNuxt.jsで作成していきます。 今回作成するサンプルアプリです。 今回作成するコードはGitHubから取得できます。
お疲れ様です。 MDグループの志村（@naokiur）です。 エンジニアブログ初投稿です。よろしくお願い致します。 入社して2年、私服OKな弊社ですが、 個人的な好みで、ほとんどスーツで出社しています。 フロントエンドにVue.js、 バックエンドにDjango REST Frameworkを利用し、 業務アプリケーション開発に従事しております。 この度、 リリース後、フロントエンド側のバージョンアップがあったとき、 ユーザーにどうやってお知らせするのか？ の解決策を1つ、 構築したので、その話を記載させて頂きます。 前提 Angular, React, Vue.jsなど、様々なフレームワークを用いて作成される、 シングルページアプリケーション（SPA）。 そのSPAと、バックエンドにREST APIを用いたオーソドックスなシステムの動きとして、 以下のような流れがあると認識しております。
2020/05/04 追記 portal は teleport にリネームされたようです。 記事内容も修正しました。 -- 2020年Q1リリース予定のVue.js 3.0の新機能 Teleport を試してみたのでまとめます。 （参考） 以下でVue 3.0（vue-next）の環境構築、他の新機能についてもまとめています。 vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 Teleportとは？ 定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。 直接指定の位置に表示できるので、 Modal、Tooltipなど要素の上部レイヤーに表示したいコンテンツでもz-indexでのCSSハッ
こんにちは。JJです。 久しぶりの投稿になります。 今回はVue.jsにおけるコンポーネント間のデータのやり取りについて紹介していきます。 はじめに Vue.jsを利用したフロントエンドの開発を進めていく中で、複雑な機能であったり、反復性を有する機能の開発を行う際、1つのVueコンポーネントで実装するよりも機能の単位、粒度に応じて複数のコンポーネントに分解して実装すると思います。後者の方が、経験上、ソースコードの可読性やメンテナンス性、さらにVue.jsの特徴の一つであるコンポーネントの再利用性も生かすことができるので、大変便利です。 しかしながらこの場合、複数のコンポーネント間でのデータのやり取りというものが必要不可欠になります。開発経験の浅い方の場合、その扱いに最初は悩むことでしょう。 そこで今回は簡単な実装例も交えつつ、Vue.jsの重要な機能の1つである「props」と「emit」
Vue.jsのSSRではcreatedが2回実行される!?
Nuxt.jsなどのフレームワークを使えば、Vue.jsを用いたSSR（サーバーサイドレンダリング）のアプリケーションを簡単に作成することができます。ただし、どこまでがサーバーで実行され、どこからクライアントで実行されるのかを正しく理解しておかないと、期待通りのSSRにはなりません。タイトルでネタバレしていますが、今回はここを少しだけ掘り下げてみたいと思います。 Vue.jsのcreated、mounted、dataNuxt.jsの話の前に、そもそもVue.jsのライフサイクルフックとして用意されている created と mounted 、およびデータをリアクティブにする dataプロパティについて簡単に触れます。 created は、Vueインスタンスが作成された直後に呼ばれる関数で、Vueインスタンスの各種プロパティ、メソッドは利用できますが、レンダリングが完了していないため、エレメ
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようにJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsとTypeScriptの概要を紹介しました。今回はVue.jsのプロジェクト作成やビルドなどができるツール「Vue CLI」の利用法を説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。前回記事では導入として、Vue.jsとTypeScriptそれぞれを単独で利用するサンプルを説明しました。 前回のVue.jsを利用したサンプルでは、Vue.js
Vue 3 解体新書：Vue.js解剖学会
Vue 3のソースコードに興味を持った有志が集い、ソースコードリーディングに取り組みました！ 本誌はその有志が寄稿形式でVue 3のソースコードについて解説したものです。 - Vue 2 と Vue 3の違い - Vue 3 の使い方を解説 - Composition APIについて - Vue 3の内部実装のソースコードの解説 第 1 章 ソースコードリーディング入門以前 第 2 章 リアクティブの書き方の違い 第 3 章 入力バインディング 第 4 章 Template Compiler 第 5 章 computed と Composition API - 追記 - 2020.03.22 第１章と第４章の表記とデザイン崩れの変更を行いました。 また、サポートページの案内を追加しました。
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Vue.js と デザインパターンを活用したコンポーネント開発について サンプルアプリは↓ https://github.com/tooppoo/sample-for-vue-with-design-patterns
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
Vue.js 3.x用に追加されたルールセット （上でも書きましたが）Vue.js 3.x用に下記のルールセットが利用できるようになりました。 plugin:vue/vue3-essential plugin:vue/vue3-strongly-recommended plugin:vue/vue3-recommended 下のルールセットの方が有効になるルールが多いです。 Vue.js 3.x用に追加された検証ルール 詳細はリリースノートを参照してください。 vuejs/eslint-plugin-vue - Release v7.0.0 vue/no-deprecated-filter このルールはフィルターの使用を禁止します。 Vue.js 2.xまで使用できたフィルターですが、Vue.js 3.xでは廃止されます。（詳細はRFC0015を参照してください。） このルールでVue.j
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「TABETEのフロントエンドをNuxt.jsでリプレイスする話」に登壇したのは、株式会社コークッキングの榊原徹哉氏。 フロントエンドをVue.jsでリプレイスする 榊原徹哉氏（以下、榊原）：最初に自己紹介になりますが。私は榊原徹哉といいます。好きな言語やフレームワークはVue.jsとか、Rubyが好きです。好きなものはガジェットです。例えば、indiegogoでおもしろいガジェットを漁ったりとか、家をスマートハウス化したりしています。最近の趣味はInstagramで、会社のInstagra
VueCLIでのSPAではなくRails内でVueを一部だけ利用するという方法をご紹介します。 VueJSのGetStartedが終了していてRailsのチュートリアルも終了している人が対象です。 概要説明 通常のSPAとどう違うのかという所だけ簡単に触れておきます。 一般的なSPAはgulpやgruntを使ってHTMLを生成してAJAXでサーバーサイドアプリケーションに連携するのが普通です。 デメリットとして下記のようなものがあげられます。 ✗ OAuth認証の場合には処理が複雑 ✗ サーバーサイドレンダリングで利用している共通のデザインなどの使い回しが面倒 ✗ 画像やその他リソースのキャッシュ対策が面倒 Railsの一部としてSPAを組み込む場合には上記のデメリットが解消する事とよりセキュアなアプリ開発が実現できます。 ○ OAuthなどの認証機能はRailsのものを流用できる ○ e
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス | 404 motivation not found
目次 概要uiコンポーネントテーマ系ライブラリサイトサービスツールcmsゲーム概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Cha
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、CDNを使ってVue.jsでシンプルなモーダルを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import VModal from 'vue-js-modal' UMDで実装する場合 const VModal = window["vue-js-modal"].default step
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの坂口達彦氏がVue.js＋Bootstrap環境向けピボットテーブルコンポーネントの開発秘話を紹介しました。 Vue.js向けvue-pivot-table-plus 坂口達彦氏（以下、坂口）：ではこれから「Vue.js向けvue-pivot-table-plus」と題して、LINE株式会社の坂口が発表いたします。他のみなさんのセッションがフレームワークまわりの、ためになる話の中で、突然ピボットテーブルが出てきて「なんだそりゃ？」みたいな感じだと思います。ただ、少しマイナーな領域ではあるんですが、せっかくこのような機会をいただいたので、こんなものも作っているよという紹介のつもりでお話できればと思います。よろしくお願いしま
自己紹介 プログラマーのAkasaと申します。 夢を実現するために頑張ってる人を応援するサービスを模索しています！ 今回、Vue.js, Firebase (Hosting, Functions, Storage)でOGP画像生成形サービスを爆速で作りました！ （サービスは現在停止しています） 作ったサービス Wishlist Share Amazonのほしい物リストを画像付きでツイートできるサービス。 開発環境 firebase : ^7.6.0 vue": ^2.6.6 参考にした記事 Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう Nuxt.js + FirebaseでOGPの仕組みを完全に理解した 〜俳句をSVGで描画するサービスをリリースした話〜 SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみた
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component
-for-vuejs-and-typescrpit
https://fukuokats.connpass.com/event/131632/
Vue.js * How to make front-end / vuejs how to make front-end
src: https://github.com/nrslib/vue-sample-assortment # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
はじめに フロントエンド開発、最近はやはりJSで書くのが基本だとは思うけどReactやAngularは少し敷居が高いのでVue.jsに手を出してみました。 とりあえず、自分へのメモの意味合でVue JSのCRUDアプリケーションのチュートリアルを書いてみます。CRUDが書ければあとは必要に応じて普通に拡張できるでしょうし。たぶん。 今回はAPIサイドをJavaのQuarkusで、フロントエンドをVue.jsで書いています。 サーバサイドをQuarkusで作成 プロジェクト作成 まずサーバサイドを作成します。Mavenでまずは以下のようにQuarkusプロジェクトを生成します。なお、mavenのバージョンが3.6.2より低い場合は事前に上げておくこと。 $ mvn io.quarkus:quarkus-maven-plugin:2.12.2.Final:create \ -DprojectG
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
システム開発 2019/09/20 【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！ Nuxt.jsとは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。2017年以降、爆発的に普及しています。今回は、Nuxt.jsのメリットや利用シーンについてお伝えします。 Nuxt.jsとは？ Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークで、「ナクスト」と読みます。React.jsベースのサーバーサイドレンダリング(以下SSR)用フレームワークであるNext.jsに触発されて作られました。 UIなどフロントエンド向けのフレームワークであるVue.jsに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。 Nuxt.jsは、ホテル
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
vue.jsで手っ取り早くアプリを作りたいけど、フロントにそんな時間をかけないでそれなりのデザインを作りたい。 何かvue.jsで新しいアプリを作ったりするときは、バックエンド側に集中したりしたいので、このような悩みが出てきますよね。 もし今、UIフレームワークを使ってvue.jsのアプリを作るなら。。。 私はTailwindCSSかVuetifyを選びます 理由としては、以下のような理由で選択しています。 コミュニティがある程度の規模があり、継続して管理される可能性がある レスポンシブ対応している 軽い Nuxtのcreate-nuxt-appでUI Frameworkとして採用されている 私が作成するアプリは、大体Vuetifyを使用して作っていますが、自分で書くcssはどれも200行以内に収まっているので、その分バックエンド側に集中することができます。 さらに、デザインを学んでいない
Vue.jsフレームワーク”Nuxt”を用いたリアルタイムチャット開発！チャット機能を通してリアルタイムなデータのやり取りや、Vuexでのチャットデータの管理について学ぶ。さらに、Firebaseを使ったデプロイなどサーバーレスアプリケーション開発に必要なスキルも学ぶ。
Laravel + Vue.jsでいいね機能・フォロー機能などを作るチュートリアルを公開しました - やんばるテック
はじめに LaravelとVue.jsで、いいね機能やフォロー機能を持つSNS風のWebサービスを作るチュートリアルをTechpitで公開しました。 目次 はじめに 目次 執筆の経緯 執筆にあたって心掛けたこと 1. Webアプリの完成そのものを目的とせず様々な知識を学べるようにする 2. プログラミング初心者が知りたそうなWebアプリの「よくある機能」の作り方を盛り込む 3. 基本的な機能から応用的な機能まで段階を踏んで学ぶ構成にする チュートリアルの章立て 4. 認証機能を敢えてコマンド一発で作らない 5. メール送信に関しては商用のWebサービスでも利用されるメールサービスを使う 6. Laravelを使っていると普段目にしないSQLを確認・改善するプロセスを盛り込む 終わりに 執筆の経緯 Techpitでは2019年9月にLaravel x LINE Botのチュートリアルを公開し
Vue.js最新動向
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
Vue.jsを活用して開発リードタイムが1/3になった話/vuefes2023-link-and-motivation
【Vue Fes Japan 2023】 リンクアンドモチベーション登壇資料（2023/10/28） 『Vue.jsを活用して開発リードタイムが1/3になった話』 ↓ 『価値を生む技術提案～フロントコードのリライト事例から学んだ提案の重要性～』 #vuefes #vuejs #リンクアンドモチベーション #リンモチ ============================================= 【イベント情報】 ■イベントページ https://vuefes.jp/2023/ 【株式会社リンクアンドモチベーション】 ■お問い合わせ engineer_pr@lmi.ne.jp ■Entrancebook https://note.com/lmi/n/n179505e048f4 ■テックブログ https://link-and-motivation.hatenablog.com/
[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのか - Qiita
[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのかJavaScriptVue.js
![[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのか - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/95d76f8d2a63d3d8204c00265df8aa192b8e7dd2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJTVEJTIwJUUzJTgxJUFBJUUzJTgxJTlDcHJvcHMlRTMlODElQUVkZWZhdWx0JUU1JTgwJUE0JUUzJTgxJUFCT2JqZWN0JUUzJTgyJTg0QXJyYXklRTMlODIlOTIlRTYlOEMlODclRTUlQUUlOUElRTMlODElOTklRTMlODIlOEIlRTklOUElOUIlRTMlODElQUJmYWN0b3J5JUU5JTk2JUEyJUU2JTk1JUIwJUUzJTgxJUFCJUUzJTgxJTk5JUUzJTgyJThCJUU1JUJGJTg1JUU4JUE2JTgxJUUzJTgxJThDJUUzJTgxJTgyJUUzJTgyJThCJUUzJTgxJUFFJUUzJTgxJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iMTEwNDliZjQ1YjJmNjI2YTg5YzRmZGRjNmE2NjM0Zg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob2dlc3VrZV8xJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01Nzc5NzkxZDllZjc4ZGRkMTFiYjlhMzY4OWVlNTZmOQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D318e652d9e689a7c3eb3f174dd4892d3)
JavaScriptのオブジェクトと関数の短縮 vue.jsだけではなくフロントエンドに利用されるReactやSvelteなどを理解するためにはJavaScriptのオブジェクトと関数の短縮記述を知っておく必要があります。JavaScriptのオブジェクトはVueを扱う上で必須な知識です。短縮記述はウェブ上で公開されているVueに関する文書で頻繁に使われる記述なのでこちらもしっかりと理解しておいてください。 これらの知識がしっかりと備わっている人は”JavaSrciptのオブジェクト”の章スキップして次の初めてのVueに進んでください。 JavasScriptのオブジェクト JavaScriptでは、通常の変数は下記のように1つの値を持つことができます。 const person = 'John Smith'; 通常の変数とは異なりオブジェクトを利用して複数の値を持つことができる変数で{}
JavaScriptは、ウェブ制作に欠かせないプログラミング言語です。簡単な演出から、近年ではSPA（Single Page Application）の開発などに幅広く活用されています。 JavaScriptの進化は非常に早く、新しい言語仕様やライブラリー・フレームワークが次々に登場していて体系的な学習が難しくなってきています。 この講座では、そんな JavaScriptの新しい仕様（ES6以降）の知識と、近年非常に人気のある「TypeScript」、そして「Vue.js」を一気に学ぶことができるフロントエンド技術の入門講座となっています。 最初は、JavaScriptのキホンのキホンからスタートして、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発まで体験していきます。是非ゆっくりと自分のペースで学んでいって頂ければ幸いです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説
本当にこれだけ？JavaScript+vue.jsでカレンダー作成 | アールエフェクト
【第3回】Vue.js 入門 〜オプション編〜 – 株式会社ライトコード
Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは
[Vue.js] 俺的ベストプラクティス＋バッドプラクティス | Oh My Enter!
Vue.js 3でコンテクストを用いて状態管理する
Vue.jsでのdeep selectorの書き方 - Qiita
Vue.js用のバリデーションで人気の「VeeValidate」の使い方 | カバの樹
Vue.jsで複数ページにまたがるフォームをVuexを使わずに実装してみる - ユニファ開発者ブログ
Django + Vue.js + Nuxt.js でSSRアプリを作る | nMoMo's
Vue.jsで作ったSPAだけどアプリケーションの更新をお知らせしたい！｜ハンズラボ株式会社
Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 - Qiita
【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り | orizuru
コマンドラインツール「Vue CLI」で本格的なVue.jsプロジェクトを作成しよう
TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法一覧
Vue.js + デザインパターンによるコンポーネント実装
【eslint-plugin-vue】Vue.js 3.xサポートを始めました - Qiita
Ruby製サービスのフロントエンドをVue.jsでリプレイスした理由
Rails 5.2で Webpacker + Vue.jsを使ってSPAを実現 - Qiita
Vue.jsで簡単にモーダルが実装できる「vue-js-modal」 | カバの樹
Vue.js＋Bootstrap環境でExcelのようなピボットテーブルを OSSコンポーネント「vue-pivot-table-plus」開発秘話
Vue.js + Firebase + OGP画像生成 本当に爆速で作れた！ - Qiita
入門: Vue.jsでCRUDアプリケーションを作る - Qiita
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
最速でvue.jsアプリを作る！様々なUIフレームワークと比較して紹介！ - inokawablog
Nuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！ | Techpit
フロントエンドエンジニア必読vue.jsの基礎 | アールエフェクト
ざっくり学ぶ、モダンフロントエンド（ES6, TypeScript, Vue.js）