VueではState Management SystemのVuexが公式のプラグインとして紹介されてきました。しかし、最新のVue3ではPiniaを使うようにとVue生みの親のEvan Youさんもお勧めしています。
では、State Management（状態管理）って何でしょうか？
State Management（状態管理）
State Managementとはいわばストレージ/ストア（倉庫）のことです。アプリケーションでストアを作っておいてそこにデータを保管できるようになります。
例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態（例：フォームが提出したとかの状態）があげられます。
PiniaのAPIの使い方
PiniaはVue2でもVue3でも使う事ができます。また、Options API（一般的に初心者向け）でもCompotion APIの書き方でもどちらでも対応しています。私の個人的な意見ではVue3でComspostion APIで書く方法が一番良いと思います。
なぜPiniaなのか
Piniaを使う事でこの状態管理システム（Store Library）を各コンポーネントやページのどこでも使う事ができます。
もちろん、同じことが export const state = reactive({}) でもできますよね。
しかし、このやり方だとセキュリティに脆弱性があり、何を管理しているのか見られてしまう可能性があります。
この他にもデベロッパー用のツールがあったり、サーバー側でもレンダーにも対応することができるなど色々メリットがあります。
Piniaをインストール
npmかyarnのコマンドでインストールしましょう。
yarn add pinia # or with npm npm install pinia
※NuxtJSの場合はこちらから
インストールが完了したらmain.jsにPiniaを追加します。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
Piniaのファイルを作成しよう
ではPiniaが追加できたらJSファイルでストアしたいデータを保管できる場所を作っていきましょう。
慣習的にsrcディレクトリの直下にstoreというフォルダを作成してそこにJavaScriptファイルで下記のコードを作るのが一般的になります。
import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'counter',
state: () => ({
counter: 0
}),
getters: {
doubleCount: (state) => state.counter * 2
},
actions: {
increment() {
this.counter++
}
}
})
stateは保管するデータの初期値をリターンするファンクションです。(dataと同じ概念）gettersはstateを使ってデータをモディファイ（変更）したいときに使うファンクションです。（copmputedと同じ概念）actionsはasyncにできるファンクションのことです。（methodと同じ概念)
<script setup>的なPiniaの使い方
他のサイトでは上記のやり方でPiniaを使っていますが、今年からVueで使えるようになった<script setup>を使ったやり方に合わせてPiniaも書きたい人は下のやり方をお勧めします。
import { defineStore } from 'pinia'
import { ref } from 'vue';
import EventService from "@/plugins/EventService";
export const useMemberStore = defineStore('member', ()=> {
const data = ref(null)
const getData = () => {
EventService.getMember()
.then((response) => {
data.value = response.data;
})
.catch((error) => {
console.log("data:" + error);
});
}
return {
data,
getData
}
})
上のコードを見ても分かるようにgetterとかactionsとかの概念はなく普通のJavaScriptのコードで<script setup>と同じようにVanilla JavaScriptに近い状態で書くこともできます。
個人的にはこちらの方が書きやすいと思ったので是非試してみてください。
ではこれをコンポーネントから読み込めるようにしましょう。
<script setup>
import { useOfficeStore } from "@/stores/members/office";
const officePinia = useOfficeStore();
const officeData = officePinia.data
</script>
このようにどのコンポーネントからでもStoreにアクセスでき、グローバルにデータを管理することで後から見やすくなりますね。
お疲れ様です。
いつもお世話になっております。
_kyouです。
あさめしさんのおかげでDRFのバックエンド完成しました。
ありがとうございます！
残りはフロントエンドをVueで作っていくだけです。
あさめしさんと同じように”Axios”と”Pinia”でAPIのデータ取得したいのですが、
Viteでプロジェクト作成する際に、JavaScriptからTypeScriptに変更する記事を多く見たことから、
TSで作ってしまっており、あさめしさんのコードのまま使うと型宣言やresponse.dataの所等でエラーが多く詰まってます。
TSの勉強をせずにTSを選択したのがが悪いのですが、JSで新たに作り直した方がよろしいでしょうか。
簡単にTS対応のものを開発出来るなら、このままいこうと考えているのですが、あさめしさんの意見をお聞かせて下さい。可能であればTS版プロジェクトの記事または動画あるとありがたいです。
やろうとしている処理は、DRFのカスタムユーザー(自作ユーザー管理モデル)をAPIで取得し、問い合わせフラグがTrueの者をフロントエンドのフッター(Information)に表示させる処理をしようと考えております。
複数いれば複数表示で簡単に問い合わせ対応者を変更させるのが目的です。
言葉だけで分かりづらくすみません。
GitHubにアップロードしたいのですが、ローカルのIPアドレス(レンタルサーバー無しなため)や個人情報等が入ってしまっており、現在はしていません。
よろしくお願いします。
_kyouさん
お疲れ様です。バックエンドの完成おめでとうございます。
素晴らしいですね！
もし個人情報を隠したまま公開したい場合は、gitでGitHubにあげる前に.gitignoreファイルというのを作成してそこにトラッキングしたくないファイルを追加するのがよい慣習だと思います。私もデータベースのパスワードとかは別ファイルに保管してインポートさせ、重要な情報はわざと公開していないようにしています。
TypeScriptについては使って損はないですが、本当に個人の好みだと思います。私はアメリカにいるので日本と状況が変わると思いますが、仕事でするなら、TSは７割のWeb開発の会社では必須になってきていると思います。Reactも８割の会社で必須ですね。実のところReactに比べてアメリカではVueはそこまで需要がないです。なので個人で楽しめるテクノロジー（スタックとかフレームワークとか言語とか）を使うのか仕事で需要があるからこれらのテクノロジーを使うのか選ぶところはかなり重要なポイントになりますよね。
アメリカなら会社やチームで使うならTSとReactは必須なのですぐにでも使いたいということです。しかし私は趣味でプログラミングをしているのでTSもReactも使う必要がないということですね。
私もJSは初めてまだ１年半くらいになりますがまだJavaScriptの特性をすべて理解したわけではないです。個人的な意見ですと、もし_kyouさんがJavaScriptの応用の部分やJSのちょっと変な部分まで理解できていなければJavaSccriptで十分だと思います。長い目で見ると、エラーに出くわしたときにTypeScriptでどうやって処理するかよりもJavaScriptで起きたエラーがどういう理由で起きたのか理解できるほうが自分のためになると思います。あとTypeScriptで書いても結局VanillaJSにコンパイルするので同じJSなっちゃいますよね。そのときに中身が理解できていないとわかったような気分になり、後から余計に苦しむことになりそうな気がします。
どんどん新しいテクノロジーやフレームワークが次々に出てきて目移りしてしまいそうですが基礎を固めることがとても重要だと思います。
記事やコンテンツを作っている側もユーザーがこのテクノロジーを使っていないとダメなような言い方をしますがそれはすべてマーケティングではないでしょうかね。はは。
最終的には、どこで線を引くか。そこまで選んだスタックや言語を自分のものにできるか、自分の時間と根性に相談してみてください。
TSは使えれば善です。
コメントありがとうございました。
お互い頑張りましょう。
ちなみに、_kyouさんがやろうとしていることはちょっと理解が難しいですが、Django側でフィルターができるのでバックエンド側で処理をしたほうがVue側からの処理に時間がかからずに済むと思います。
またアップデート待ってます。
お疲れ様です。
Gitは個人情報を隠す方法もあるのですね、勉強不足でした。
やってみます。
なるほど、詳しく教えて下さりありがとうございます。
まずはJSをマスターして、理解を深めてからTSを学んだ方が分かりやすいということですね。
最終的にはどちらも使える様にし、本プロジェクトではJSで進めていきます。
Vueのコードは殆ど今のコードをコピペするだけで済むので、フロントエンドは一から作り直してみます。
JSで上手くいく場合、TSで詰まるよりは早く完成しそうです。
あさめしさんがおっしゃっているのは、APIを先にフィルターがかかった状態で出力する認識でしょうか。
フロント側では、絞り込んだデータも欲しいですが、モデル全体のデータも扱うことがあるので、バックエンドでは全てを出力し、フロント側で絞り込むしかないと考えております。それかモデル全体とInformationのみと二つAPIを出力する方が効率がいいでしょうか。
あと、フロントサーバー負荷の面で、全てPiniaのストレージでデータ管理するか、一部をストレージ管理し大きなデータはストレージ管理しない様にするかで悩んでいます。そこまで気にしなくていいんでしょうか。
負荷がかかる様であれば細かく決定していきます。
お疲れ様です。JSで進めるという事で問題ないと思います。
その通りです。APIが先にフィルターがかかった状態でAPIに出力することも可能であるという事です。
データの量にもよりますが、最初はそこまで気にしなくて良いと思います。
もしデータが重いようならデータを一定の数ごとでクエリする方法もあります。最初に１０のデータのみをGETしておいて、ユーザーが次のデータが欲しい場合に再度、DBの１１～２０番目のデータにアクセスするような感じです。
ページ（pagination）と同じですね。
もしくは、データのタイトルだけを別にまとめた全部のデータが入ったAPIを作成して、ユーザーが必要に応じてそのタイトルのIDから関連する詳しいデータを別個に手に入れるという方法もあります。
色々なアプローチができるので面白いと思います。
ちなみに_kyouさんが取り掛かっているのは趣味的なプロジェクトですか？それとも学校か会社のプロジェクトになるのですか？ちょっと気になりました。
では、よろしくお願いします。
お疲れ様です。
API数よりもフロントエンドの取得データ数を減らすのが大事ってことでしょうか。
API数を増やすと管理が大変そうなので、フロント側で絞ってみて不具合が発生したら、問い合わせだけのモデル作成等 検討していこうと思います。
本プロジェクトは、会社の改善で使用しようと考えております。開発には、私以外にメンバーはおらず独学で進めております。
社内にプログラムが読める人も少ないため、大きな成果を出してもたぶんあまり評価はされないと思いますので、
やり遂げる責任感は持ち合わせておりますが、趣味に近い感覚でいる方が気持ち的に楽って所です。
大きな野心を持って進めていますが、この場ではデータが残るので詳細は割愛させてもらいます。（笑）
信頼を得てサーバーもしっかりとしたものを借りたいと思ってますので、プロジェクトが完成しても先は長そうです。
思っていた以上にフロント側の勉強することが多いので気合い入れて、頑張ります。
今後も参考にさせてもらいます！
よろしくお願いします。
お疲れ様です。APIのエンドポイントの数はあまり問題にならないですね。おっしゃる通りVue（クライアント側）でAPIのコールをかけたときにバックエンド側からどれくらいのデータが返ってくるかが重要になると思います。膨大な量だとブラウザで処理しきれなくなります。
そのプロジェクトは素晴らしいですね！もしアクセスするユーザーが会社のネットワーク内のみで使用するだけであるなら、Linux（Ubuntuとか）のサーバーを会社において社内のWiFi、もしくはVPNにつながったときだけデプロイされたIPアドレスにアクセスするような方法でもOKだと思います。もしお客さんとかにもアクセスさせるのであれば、レンタルサーバー（AWS）とかからデプロイさせてドメイン（〇〇.com）からアクセスさせることになると思います。
_kyouさんのプロジェクトが完成して人為的なミスを防げたり、作業効率が上がればそれは評価されるべきですし、キャリアとしても良い実績を残すことになると思います。何よりも自分の為になりますよね！
また質問などあれば是非、お気軽に聞いてくださいね。
私は残りの人生はプログラミングに賭けているので、ずっとやっていくつもりです。
お互い頑張りましょう！
よろしくお願いします。
お疲れ様です。
APIの管理方法考えてブラウザの処理を軽量に出来る様、意識してやってみます！
本プロジェクトは、社内ネットワークのみアクセス可能にします。現在、DRFとMySQLとVITEを一つのPCで稼働させているのですが、
完成していないのに既に容量やばそうです（笑） そのためMySQLは別PCで管理しようと考えています。
Linuxの知識が無いのですが、前に言われていた「Linode」で作成するものでしょうか。
データ量を抑える、または容量を増やす方法良い案あれば教えて下さい。
やっぱりクラウド管理でしょうか。
開発進めることは、勉強に膨大な時間が必要となりますが、この作業が苦でないのでどんどんスキル増やして頑張ります！
お疲れ様です。社内のネットワークのみであれば会社にサーバーを置くのが良いと思います。検証もメンテナンスもしやすいですからね。レンタルサーバーだと一般に公開されることになるので、会社のデータが脅威にさらされる可能性があります。Linodeは私が使っているレンタルサーバーのことです。有名なものではAmazonのAWSがあります。これらをVPSといいますね。Linuxは個人的にはお勧めですが、理解するのに時間がかかるのでLinuxのデスクトップから練習がてらに使ってみるのが良いと思います。DjangoやVueをデプロイするサーバーはそのデスクトップのUIがないだけと同じなので。個人的にはPOP_OSがお勧めです。Ubuntuベースで使いやすいです。
容量がヤバいってどういうことですか？はは。Djangoのアプリケーションの容量が多いという事ですか？それともデータベースのデータの容量が多いという事でしょうか？
お疲れ様です。
回答ありがとうございます。
朝飯さんのPOP_OSの記事読んで勉強してみます。
会社でSSD500GBのPCを手配してたのですが、間違ってSSD250GBが届いていて、気付かず使用しており残り120GBくらいになってしまっています。
フロントエンドとバックエンドは、大きくないので
PythonライブラリかNodeかMySQLがほとんどの容量を占めてると思います。
フロントとバックは、開発が終われば容量が増えることは無いですし、DBだけ容量に余裕があるとこに保管出来ていれば問題は解消されるかなと考えています。
同ネットワーク内で運用するケースでは、何が最適かなと悩んでおります。
DBのみ別PCで2TBくらいのSSD搭載のものを検討していますが、正しい判断なのでしょうか。
お疲れ様です。
すみません、ローカルストレージの殆どはシステム予約ストレージでした。DBによる圧迫ではありませんでしたが、今後DBの容量は大きくなることが考えられるので、別PCまたはSSDの容量増やすことを検討します。
①POP_OSの記事読ませて頂きました。
普通にwindowsOSで稼働させず、仮想環境のLinuxで稼働させるメリットが分かりませんでした。DBやサーバーの安定が増す等のメリットが無ければ、特に不要かと考えておりますが、1番のメリットは何なのでしょうか。教えて下さい。
②バックエンド完成したと思っていたのですが、Token認証の設定作れていませんでした。朝飯さんの記事通り開発進めて、api-token-authにリクエストするとToken作成されることは確認出来たのですが、httpieでUser情報取得では「Server Error (500)」と表示されて取得出来ません。
間違ったパスワードを入力してリクエストすると、「提供された認証情報でログインできません。」と表示されるため、しっかりアクセス出来ていることは確かですが、なぜ取得出来ないのでしょうか。
httpieだけで無く、フロント側(Vue)でも もちろんアクセス不可です。
普通にadminサイトアクセスし、URLをapiに変更するとしっかりjsonデータは見れますので、認証ユーザのみ取得可能にはなっているようです。
この異常を調べても殆ど出てこなかったので、何が異常原因か分かりません。
開発ばかりでGitHub出来ていなくて、すみませんが異常原因 何が考えれるか教えて頂いてもよろしいでしょうか。よろしくお願いします。
何度も連投すみません。
②は、カスタムユーザーを作成しており、field名が異なっていたことによるエラーでした。
フロントエンドのログイン機能完成しました！
お疲れ様です。順調に進んでいるようですね。良かったです。
①コードの容量について
ライブラリは重いですしバージョンが変わるときに干渉したり、メンテナンスが難しいことがあります。本当に必要な時のみに使うようにしましょう。
Vueはnpm run buildでコンパイルしたdistディレクトリが2MB を目指すようにします。Djangoだけでも一般的なアプリは1GBに満たないと思うのですがどうでしょうか？
あと、DBで使用するdumpファイルがどれだけの容量かも確認しておくと良いと思います。
REST APIだと最大で45MBまでしかデータが通信できないようのでどのようなデータを扱うのかも確認してみてください。
DB用にHDDを搭載するのは問題ないと思います。
ーーーーーーーー
①仮想マシンのVirtualBoxやVMwareは環境のバックアップや検証で使います。色々なLinuxのディストロを試すときに最適です。サーバーの中身をそのまま移動できるとか、他に起動しているサービスを干渉させないとかくらいですかね。本番環境で作業する前に、検証用として同じ環境を作っておくのはかなりのメリットがあると思います。個人的には私用のWindowsのPC上でUbuntuを起動させてそこでコードを書くときに使ってます。PCをシャットダウンしても、仮想マシンをセーブして閉じることができるので起動したときにスリープしたような状態で使い始められます。デプロイ用のサーバーではVirtualBoxは不要ですね。
②分かりました。
ではよろしくお願いします。
また何かあれば聞いてくださいね。
いつもお世話になっております。お疲れ様です。
容量の目安ありがとうございます。
APIが45MBと言うとどのくらいかピンとこないですが、全て合わせて45MBだと少なそうですね。
もしも超えた場合は、REST API以外を検討となるのですね。
VirtualBoxは、レンタルサーバーとかにデプロイする訳ではないので、今は必要なさそうですね。
また数点確認させて下さい。
1.フロントエンドでログイン時、ログインユーザーの情報をあさめしさんと同じ様にPiniaで管理しているのですが、ForeignKeyのfieldを取得対象にしたらAxios Errorでログイン不可になります。
色々調べたのですが分かりません。あさめしさんの投稿の「ネスト化されたAPI」のとこの話なのでしょうか。
最後に紹介されている「drf-writable-nested」は、あさめしさんのソースコードで使用されていなかったと思いますが、別で有効な手段があるのでしょうか。
2.APIをバックエンド側でフィルターする方法が分かりません。「django-filter」で書くのでしょうか。記事少なかったので分かりませんでした。
3.モデルを結合させてAPI出力する方法ですが、
A: id, 担当者, 所属コード
B: 所属コード, 部署名
このようなモデルを作成して、PKで紐付けしている場合、フロント側でどのようにして担当者と担当者に紐づく部署名を出力させるのか分かりません。または、こちらに関しても先にバックエンドで紐付けされたAPIの出力をするものなのでしょうか。
これら不明な点を調べるのは、DRFのドキュメントをひたすら読むしかないのでしょうか。
回答よろしくお願いします。
お疲れ様です。
①デバッグするのにもう少しエラーの内容が必要です。この画像のようにGoogleChromeの検証モードにして何がエラーになっているか教えてもらえますか？
https://asameshicode.com/wp-content/uploads/2022/12/InspectBrowser.pngもしコンソールログにエラーが出ていればそれをクリックしても同じ場所にたどり着きます。
先にバックエンドとフロントエンドのどっちに問題があるか探しましょう。
②フィルターをしたい目的によりますがdjango-filterのライブラリが使いやすいと思います。
GETリクエストを送るとのデータまるごとが返ってきますよね？もしくはIDごとで単体のデータを取得できます。
このフィルターを使う事でデータをクエリできるようになります。
参考の画像を見てください。
https://asameshicode.com/wp-content/uploads/2022/12/django-filter.gifこのロジックはこのコードを見てください。views.pyで指定したモデルフィールドをフィルターできるようになりました。
https://github.com/TraitOtaku/Django-TicketAPIwAuth/blob/main/tickets/views.pyもちろん、ライブラリのインストールと登録は必要なので、それはsettings.pyを参考にしてください。
年明けに時間があれば記事に書きますね。
③下記のURLで見れるようなネスト化されたデータをみたいという事でしょうか？
http://172.104.81.40/api/tickets/この場合、チケット→ updated_by(foreign key）→ office(foreign key)
これでチケットのテーブルを見た場合でも、ユーザーテーブルの更に下にあるオフィスのテーブルのデータまで一緒に手に入れることができます。
ネスト化されたデータをGETの時だけ表示されてUPDATEやPOSTの時はIDだけで操作するように変えないといけないです。
シリアライザーでメソッド別にデータの出力の仕方を変更します。
ReadSerializerがGETの時に返すシリアライザーです。
https://github.com/TraitOtaku/Django-TicketAPIwAuth/blob/main/tickets/serializers.py
そして、views.pyでGETの時だけそのシリアライザーを使うようにします。
https://github.com/TraitOtaku/Django-TicketAPIwAuth/blob/main/tickets/views.py
これをしないと、CRUD（データ操作）がすべてできません。
もしそこまでしないのであれば、Readの方だけ使ってみるとよいです。
ドキュメンテーションは重要です。必要な部分だけでも読んでいくべきです。あと、私なら全部英語で調べて、stack overflowに質問して教えてもらいますね。
日本でもhttps://teratail.com/という質問サイトがあるようです。
GitHubで参考になるリポを探すくらいでしょうか。
GitHubでプライベートなリポを作成して私にシェアしていただければ誰にも見られないまま、効率よくお手伝いができると思います。
私も来年の春くらいから忙しくなる予定なので時間があるうちは自身の勉強のためにも手伝うこともできますよ。
では、よろしくお願いします。
お疲れ様です。
①
POST http://***.***.***.**:****/api-token-auth/ 500 (Internal Server Error)
Autofocus processing was blocked because a document already has a focused element.
※[***.***.***.**:****]は、バックエンドサーバー
このようなエラーが出ていました。
②
履歴アプリで複数の職場が入力するので、そのモデルから職場を絞り込んでAPI出力しようと考えております。
このフィルターされたものをフロント側で取得するには、「?store_id=&is_open=true」の様に指定すれば良いということでしょか。
③
上のモデルの場合、AのモデルはBの所属コードだけでなく、それに紐づくBの部署名まで取得したいということです。
ありがとうございます。試してみます！
質問サイトがあるのは、知りませんでした。
GitHubの使用は、開発するならほぼ必須なくらいなんですね。
連休中に、GitHub上げてみます！
プライベートGitHubを載せたら、このフォームのWebsite欄に入力したら良いのでしょうか。
お疲れ様です。
①エラーが二つあるように見えますね。
500エラーは何かの理由でサーバーがコードを表現できないのでサーバーが起動できないという事です。どのコードをなくしたらエラーがなくなるか原因を探してみましょう。
もう一つのエラーでいうAutofocusはHTMLのタグ属性で、フォームとかが自動でハイライトされてクリックせずに入力される状態になっていることです。
例えば私が最近作ったこのアプリhttps://js-hiroba.com/を開くとテキストエリアがフォーカスされますね。しかし、2つ同時にオートフォーカスができないのでそれを起こしている原因を探してみてください。
特にUIのライブラリをつかうと意図せずにコンポーネントに勝手についてくるものもあるかもしれません。
この画像のように検証モードで探すこともできます。
②その通りであっています。データタイプとフィルターの仕方でクエリの仕方も変わるのでDjango REST API側のUIでURLがどのように変わるか確認するとよいです。
③了解です。
GitHubだと途中経過をセーブ（push）できますし、そのセーブしたコード（リポジトリ）をフォーク(自分用にコピー)することもできます。
GitHubでプライベートのリポジトリを作成して私のGitHubのアカウント（TraitOtaku）に招待してみてください。
やり方は公式サイトについてますね。
ではよろしくお願いします。
お疲れ様です。
すみません、以下２点の異常から試せていません。
GitHubにアップロードしようとしたのですが、errorが発生して出来ません。
1. gitをインストール
2. githubアカウント作成
3. アカウント設定
その後リモートリポジトリと接続し、[git push origin main]でアップロードしようとしたのですが、errorが複数発生しました。
1. remote: error: Trace: ****(毎回違うトークンの様なものが表示される)
2. remote: error: See heep://git.io/iEPt8g for more information.
3. remote: error: File Lib/site-packages/rest_framework/…js is 117.82 MB; this exceeds GitHub’s file size limit of 100.00MB
4. remote: error: GH001: Large files detected. You may want to try Git Large File Storage – https://git-lfs.github.com.
remote rejected
git LFSを使ったらいけるのかと思い、インストールしてみましたが無理でした。
また、連休中の為ローカルで開発しようと思い、別PCでアクセスDBをSQLiteに変更し進めたいのですが、
DATABASES = {
‘dafault’: {
‘ENGINE’ : ‘django.db.backends.sqlite3’,
‘NAME’ : BASE_DIR / ‘db.sqlite3’,
}
}
drfのSetting.pyを上記の様にし、
python manage.py makemigrationsをしたのですが、
django.core.exceptions.ImproperlyConfigured: You must define a ‘default’ database.
となってDBを一から作れません。
ご教示お願いします。
お疲れ様です。
下記に２つの方法があるので試してみてください。
①GitHubに直接ドラッグ&ドロップでアップロードする。（Gitは不要です。このやり方は効率が悪い＋GitHub本来の良さが引き出せないので最初だけ試しに使うならOKです。）
②色々確認したいです。
-セキュリティが厳しくなって、SSHキーというのを登録しないとGitでアップロードできないかもしれません。
-GitHubにアップロードする際にpip installでインストールしたライブラリは.gitignoreではじくようにします。そうでないとファイルサイズが大きくなるので。
-なので開発者がgitで他のリポをクローンした後にローカルの環境でpip install -r requirements.txtでライブラリをインストールするのが通例になります。
-Vueの場合もnpm iでライブラリをインストールできるのでリポにあげるときはnpmでインストールしたモジュールはアップロードしません。
.gitignoreファイルを作成とremote先が正しく登録されているか確認しないといけないです。
Pythonライブラリはgit add .のコマンドですでにトラッキングされてしまっていると思うので.gitフォルダを削除してやり直してみてください。
それからとSSHキーの登録が必要か判断してみます。
ーーーー
スペルをdefaultに変更してみてください。
テキストエディタはVSコードですか？
Djangoに対応したエクステンションがあると思います。それでスペルチェックとかしてくれるはずです。
分からなければ私の方で調べるので教えてくださいね。
では良いお年を！
お疲れ様です。
②の方法でアップロード出来ました。
gitignoreでライブラリとsqliteをはじくようにしてpush出来ました。
requirements.txtを作ってアップロードしたかったのですが、PC内の全てのライブラリが作成されてしまうため、
プロジェクト内のみのrequirements.txtを作成出来ませんでした。
仮想環境内でpip freeze > requirements.txtしても同じだったので、仮想環境内でのライブラリのインストールの仕方を間違っていたのかもしれません。
とりあえずbackendは出来たため、あさめしさんに招待送りました！
frontendも個人情報等は削除またはgitignoreで対応し、アップロードします。
—–
すみません、単純なスペルミスでしたね（笑）失礼いたしました。
vscodeを使用しているのですが、code spell checkerはpythonライブラリ等も波線入るため見づらいと思い何も入れてませんでした。
調べてみると単語登録出来ることをしり、現在確認して問題ないスペルは登録しまくってます。
良いお年を！
明けましておめでとうございます。
今年も沢山学ばせてもらいます、よろしくお願いします。
frontend, backendのGitHubアップロード出来ました。
frontend開発中です。
frontend仕様は、ログイン後headerの真ん中のボタンを押すと「職場,ツール選択画面」が表示され、職場とツールを選択します。
「職場,ツール選択画面」は、ボタンを押すとPrimeVueのDynamicDialogが表示され、中身はTreeSelect(Single)で作ろうと考えてます。
職場を選択すると職場に対応したツールが選択出来るようになり、ツールを選択すると履歴DataTableが表示されるイメージです。(開発中の為、選択画面は全く形になってません。)
まずは、簡単にPiniaのデータを取る練習をしようと、Footerのinfoに対象者を表示させたいのですが、上手く出力出来ません。
表示させる対象者は、userモデルのSITE_MANAGERがtrueになっている人で、info_user.jsを作成しています。
v-forで繰り返し処理で取得し、info対象者が複数いればで区切ろうと考えています。
DataTableではなく、Piniaから指定のデータを出力するにはどうすればよろしいでしょうか。
ご教示お願いします。
お疲れ様です。作業が早いですね。素晴らしいです。
GitHubのリポのシェアありがとうございます。バックエンドとフロントエンドの両方を確認してGitHubの方でコメントするようにします。
私の方で修正したコードを別のブランチ（asameshiという名前）で別のコミットでアップロードします。今後このプロジェクトに関してはGitHubの方でコミュニケーションをとっていきましょうか。
今年も頑張りましょうね。
よろしくお願いいたします。