Vueコミュニティで推奨されているフレームワークを中心に紹介していきます。 Vue Community Guide VueのUIフレームワークは、Vueを拡張したフレームワークとCSSフレームワークに分けることができます。また、マテリアルデザインとそうでないものとに分けることができます。 ＊この記事ではVueを拡張したフレームワークをVueフレームワークと呼びます。 UIフレームワーク比較表 [2021年5月11日時点] Vueフレームワーク GitHubスター LTS 日本語 マテリアル モバイルアプリ Nuxt Ionic 44.1K ○ ○ ○ ○ × Vuetify 30.8K ○ ○ ○ × ○ Quasar 18.4K ○ × ○ ○ × Element+ 9.8K × ○ × × ○ Buefy 8.6K × × × × ○ BootstrapVue 1.7K × × × × × CSSフレームワーク Bootstrap 150K ○ ○ × × ○ Bulma 43.4K × × × × × Tailwind 41.4K × × × × ○ ＊LTS（long-term-support）は長期サポートのことです。 ＊Nuxtはcreate-nuxt-appコマンドでインストールできるかを示しています。 ＊IonicやBootstrapなどVueに限らないフレームワークはスター数が多くなっています。 Vue3への対応状況 Vueフレームワーク Vue3 正式リリース Ionic ○ － Vuetify alpha 2021年Q3 Quasar beta 2021年Q2 Element+ ○ － Buefy × 未定 BootstrapVue × 未定 ＊CSSフレームワークはVueのバージョンに関係なく使用できます。 条件別のおすすめは以下の通りです。 ウェブアプリ（マテリアルデザイン） Vuetify ウェブアプリ（フラットデザイン） Buefy BootstrapVue モバイルアプリが必要 Ionic Quasar CSSのみ必要 Bulma Tailwind ＊Vueコミュニティのユーザーチョイス Vuetify Quasar Vueフレームワーク（マテリアルデザイン） Vueを拡張して作成されているフレームワークには、テンプレート構文、JavaScript、CSSすべてが含まれているため、素早く簡単にUIを構築することができます。ただし、フレームワークに対する依存度が高く、アップグレード時には変更されたすべてのディレクティブを修正する必要があります。 Ionic メリット：クロスプラットフォーム マテリアルデザイン 長期サポート デメリット：ウェブアプリのデザインがしずらい Ionicは元々Angular用のUIフレームワークとして作成され、現在ではVueやReaactにも対応しています。最大の特徴はWebの技術を使ってモバイルアプリを開発できるという点です。1つのコードベースでウェブアプリ、モバイルアプリとクロスプラットフォームに展開できます。 バージョン3では3年程度のサポートを行っており、比較的長いサポートが期待できます。また、現時点でVue3に対応しており、最新バージョンへの対応が速いです。 デメリットとしては、公式ドキュメントがモバイルアプリを想定して作られているため、ウェブアプリのデザインがしずらいという点があります。また、モバイルアプリを開発する場合はCapacitor（またはCordova）という技術について学習が必要です。 Ionic Vue Ionic Support Policy Vuetify メリット：マテリアルデザイン 長期サポート 日本語の情報が豊富 デメリット：特になし Vueコミュニティの中で最も人気があるフレームワークです。Googleのマテリアルデザインに則った豊富なUIコンポーネントが用意されています。日本語のドキュメントがあり、ウェブ上での日本語記事も多く、日本で最も採用されていると思われます。 メジャーリリース後、直前のバージョンがLTSとなり12ヶ月サポートが続きます。メジャーバージョンリリース直後に採用すると3年程度のサポートが期待できます。 モバイルアプリを開発することはできませんが、レスポンシブに対応していますし、VueCLIのプラグインを使ってPWA（Progressive Web Apps）を作成することもできます。 Vuetify3ではVue3のComposition APIを使用してフレームワークの再構築が行われています。 Vuetify 2 Vuetify 3 Vuetify LTSサポート Quasar メリット：クロスプラットフォーム マテリアルデザイン デメリット：学習コストがやや高い 日本語の情報が少ない QuasarもIonicと同様、ウェブアプリ、モバイルアプリとクロスプラットフォーム開発ができます。Ionicと違ってウェブアプリのデザインをする場合にも、ドキュメントは見やすくなっています。何でもできる万能フレームワークで、SSR、PWA、デスクトップアプリ等にも対応しています。 サポートは2年程度と比較的長く設定されています。 デメリットとしては、日本語のドキュメントがないことと、習熟するまでの学習コストがやや高いという点が挙げられます。 Quasar Quasar Framework Roadmap Vueフレームワーク 続いて、マテリアルデザインではないVueフレームワークを紹介していきます。 Element+ メリット：デスクトップ用ウェブアプリが作りやすい デメリット：レスポンシブ対応ではない コードの記述がわかりやすく、デスクトップ用のウェブアプリの開発に適した中国産のフレームワークです。ただし、レスポンシブに対応していないため、モバイル対応したアプリを開発するには不向きです。 中国ではウェブアプリとモバイルアプリを分けて開発するようで、Element+はデスクトップ向けのウェブアプリに最適化されているようです。 Element+ Buefy メリット：BulmaをVueに対応させることができる デメリット：新バージョンへの対応が遅い 長期サポートがない 人気のCSSフレームワークであるBulmaをVueに対応させたものです。Bulmaのデザインを簡単にVueに組み込むことができます。 デメリットとしては、BulmaとVueの両方に対応させるため、新バージョンへの対応が遅いという点があります。また、長期サポートやリリースに関する記述がなく、バージョンアップのタイミングが読みずらいという欠点もあります。 Buefy BootstrapVue メリット：BootstrapをVueに対応させることができる デメリット：新バージョンへの対応が遅い 長期サポートがない BootstrapをVueに対応させるフレームワークです。Bootstrapの使用経験がある場合は、開発コストを抑えることができるため良い選択肢になると思います。 ただし、こちらもBuefyと同じく、新バージョンへの対応が遅いという欠点があります。また、長期サポートもないようです。 BootstrapVue CSSフレームワーク CSSフレームワークには、Vueのテンプレート構文は含まれていないため、自らコードを書く必要がありますが、Vueと棲み分けができるというメリットがあります。 Bootstrap メリット：安定した開発が見込める 長期サポート デメリット：JavaScriptがVueと競合する可能性がある Bootstrapはスターの数が150Kもあり、最も人気のあるCSSフレームワークです。Twitterが開発しているため安定した開発が見込めますし、長期サポートもあります。使用経験があれば開発コストを抑えることができます。 Bootstrap4まではjQueryが含まれていましたが、Bootstrap5からはjQueryは使用されなくなりました。そのため、これまでよりもVueとの統合は行いやすくなっています。しかし、多くのコンポーネントはJavaScriptを使用しているため、Vueと競合してしまう可能性があります。 長期サポートは魅力ですが、VueとBootstrapを併用している情報は少なく、通常であればBootstrapVueを選択した方が無難です。 Bootstrap Bootstrap Release Bulma メリット：デザインとロジックの分離 CSSコンポーネント デメリット：日本語なし 長期サポートなし 人気のあるCSSフレームワークの一つです。JavaScriptを使用していないため、UIのデザインとロジックを分離できることが利点です。アップグレードをCSSとVueに分けて段階的に実施することもできます。 JavaScriptが得意または自分で書きたい場合に良い選択肢です。ただし、日本語と長期サポートがないのが難点です。 Bulma Tailwind メリット：デザインとロジックの分離 カスタマイズ性 デメリット：デザインスキルが必要 長期サポートなし Vueコミュニティで広く受け入れられているフレームワークです。Bulma同様CSSのみなので、デザインとロジックを分離することができます。 従来のCSSではスタイルを適用する度にCSSを記述していましたが、Tailwindにはクラスのユーティリティが用意されており、それらを直接HTMLに適用します。「ユーティリティ・ファースト」というコンセプトの元に開発され、近年人気が上昇しています。 デザインのカスタマイズ性に優れているため、デザイン要求の高いアプリケーションに適しています。コミュニティによるコンポーネントが用意されていますが、基本的には自身でデザインを作成するため、デザインスキルが必要です。 Tailwind Tailwindコンポーネント まとめ 以上、VueのUIフレームワークについて紹介してきました。 ソフトウェアの開発・保守において、コストがかかるのがフレームワークのアップグレードです。 開発するアプリケーションが1年後に終了するのか、5年、10年と継続するかは予測できません。もし、採用したフレームワークが1年でアップグレードしたとすると、10年では10回アップグレードを実施しなければなりませんが、3年の長期サポートが提供されていれば3回で済みます。 そのため、LTSを提供しているフレームワークは運用コストを最小限に抑えることができます。初期開発コストはどのフレームワークも同程度と思われますが、運用コストは大きく変わってきます。 筆者の調べた限りでは、LTSを提供していないフレームワークはリリースサイクルも示されていない場合が多いです。LTSとリリースについて明確な指針を示しているフレームワークを選定することをおすすめします。 最後にRobert Martin著の「クリーンアーキテクチャ」の言葉を紹介します。 「ソフトウェアアーキテクチャの目的は、システムを構築・保守するために必要な人材を最小限に抑えることである」 開発・運用コストを最小限に抑えるという観点からUIフレームワークを選定することも、アーキテクチャの一つと思います。
はじめに 仕事で使う事になったので1からVue.jsについて学んだ。 ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 single file component(.vueファイル)のtemplateルートは1つの要素のみにしなければならない Vue.jsのsingle file componentでは、<template></template>で定義されるtemplateルートには、1つの要素だけが存在するようにしなければならない。 以下のソースコード1のように、複数の要素があるとThe template root requires exactly one element（ テンプレートルートには、1つの要素のみが必要です）というエラーになる。 sample.vue <template> <p>いいね({{ number }})</p> <button @click="increment">+1</button> </template> <script> // 省略・・・ </script> <style></style> 正しい書き方は以下。 sample.vue <template> <div> <p>いいね({{ number }})</p> <button @click="increment">+1</button> </div> </template> <script> // 省略・・・ </script> <style></style> Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4 ソースコード全体を見たい場合はここ ↩
はじめに Vue CLIをアップデートする方法をご説明します。 Vue CLIは頻繁にアップデートされており、アップデートするたびに方法を調べているため備忘録的にコンテンツとして残します。 バージョンを確認する バージョンによってアップデートの方法が異なるため、はじめに現在導入されているVue CLIのバージョンを確認しましょう。 バージョン確認 ターミナル/コマンドプロンプトを開いて「vue --version」コマンドを実行してください $ vue --version 以下のように現在インストールされているバージョンが出力されます この場合、メジャーバージョン３・マイナーバージョン２・リビジョン２となります @vue/cli 3.2.2 メジャーバージョン２以下がインストールされている場合のアップデート方法 Vue CLIは、メジャーバージョン２までとメジャーバージョン３以降でNPMパッケージが変更されています。 そのため、メジャーバージョン２以下からメジャーバージョン３以降にバージョンアップする場合は、古いVue CLIを一度アンインストールしてから、新しいバージョンをインストールする必要があります。 古いVue CLIをアンインストールする NPMを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください $ npm uninstall -g vue-cli YARNを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください $ yarn global remove vue-cli 新しいVue CLIをインストールする NPMを使ってVue CLIをインストールする場合は、以下のコマンドを実行してください $ npm install -g @vue/cli YARNを使ってVue CLIをインストールする場合は、以下のコマンドを実行してください $ yarn global add @vue/cli メジャーバージョン３以降がインストールされている場合のアップデート方法 npmのinstallコマンドを再度実行することでVue CLIのアップデートが可能です。 Vue CLI のアップデート NPMを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください $ npm install -g @vue/cli YARNを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください $ yarn global add @vue/cli アップデート後のバージョンを確認する 再度、ターミナル/コマンドプロンプト上でコマンドを実行し、アップデート後のバージョンを確認します バージョン確認 ターミナル/コマンドプロンプトを開いて「vue --version」コマンドを実行してください $ vue --version バージョンが更新されていることを確認してください @vue/cli 4.5.13 さいごに 以上で、Vue CLIのアップデートは完了となります。 現在インストールされているバージョンによって手順が変わることを注意してください。
terminal pip install djangorestframework djangorestframework-jwt settings.py REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', ), } urls.py from django.urls import path, include from rest_framework_jwt.views import obtain_jwt_token, verify_jwt_token, refresh_jwt_token path('api/token/', obtain_jwt_token), path('api/token/verify/', verify_jwt_token), path('api/token/refresh/', refresh_jwt_token), nuxt terminal npm install '@nuxtjs/proxy' nuxt.config.js modules: [ '@nuxtjs/proxy', ], proxy: { '/api': 'http://localhost:8000' }, index.vue <template> <div> <v-btn @click="login" color="success">login</v-btn> <v-btn @click="get" color="success">get</v-btn> </div> </template> <script> import Logo from '~/components/Logo.vue' import VuetifyLogo from '~/components/VuetifyLogo.vue' export default { components: { Logo, VuetifyLogo, }, methods:{ login(){ this.$axios.$post('/api/token/',{username: 'hogehoge', password: 'hogehoge'}) .then((res)=>{console.log(res);this.$axios.setToken(`${res.token}`, 'jwt')}) }, get(){ this.$axios.$get('/api/questions/') .then((res)=>{console.log(res)}) } } } </script> こちらを参考にさせて頂きました。 https://dev-yakuza.posstree.com/django/jwt/
