you cannot alter to or from M2M fields, or add or remove through= on M2M fields

で、

のエラーで苦しめられたので備忘録。 "Django migration error :you cannot alter to or from M2M fields, or add or remove through= on M2M fields"(stack overflow) 要は、DBを作る時に、古いテーブルが邪魔をしてmigrationできないよ! と言うことらしい。 上記リンクに飛ぶと、initial.pyでFieldを消す処理を加えると言う対応を紹介していたが、 面倒だったので、テーブルをいったん消去して、もう一度migrationをかけて解決した。

Djangoで新規にモデルを作成したのにmigration時に「No changes detected」となった時の対処法

Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。 モデルを変えたのになぜ???と思ってググルと

とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実

‘npm run serve’ができない〜nodeのバージョン管理〜

普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録 ちゃんとバージョン管理ソフトは使いましょう。。。 今回ハマったエラーはこちら

vue create → npm run serveなので特にエラーを起こすような操作はしていません。 「babel」, 「webpack」と言った文字列が見えたのでおそらくnodeのバージョンの問題だろうと思って確認してみると、

いや、もうほんとLTSとかちゃんと見とかないとダメですね 笑 何も考えずにパッケージのアップデートをしたのは誰なんでしょうか 笑 nパッケージを導入 これまで素のnodeを使っていたため、パッケージ管理ソフトを入れることにしました。 nodeのバージョン管理にはnパッケージと言うものがあるらしいのでこれをインストール

n現在の安定版を確認してみると、v12だったため

として、nodeを安定版に変更すると、無事にnpm run serveを通すことができました。 めんどくさいけど、バージョン管理はするようにしよう。

Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考:Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。

で準備を整えたら、必要な設定をしていきます。

コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ

main.js main.jsにてVue Routerをプラグインとして登録します。

App.vue 最後にrouter-viewで読み込んで、Vue Routerが動くようになります。

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 $emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント(App.vue)

子コンポーネント(Checkbox.vue)

$emitを使ってみて 処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。 これは何度も使って慣れるしかないかも

子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。

Vue.jsにQuasar Frameworkを入れてみる

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、

と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。

実行する時のコマンドはvue cliと同じ。

Quasar拡張機能 Quasar – App Extension Quasarには色々な拡張機能が存在しています。QMarkdownを試してみたので、こちらの記事も是非👇 QuasarでMarkdownを表示する

Djangoの開発環境を作る

Djangoの開発環境を作成した時の備忘録。 2020年2月17日にコピペでCentOS7の初期設定、PythonインストールからMySQLサーバーにログインまでできることを確認。 作成する環境 OS : CentOS7 Database : MySQL フレームワーク:Django 言語:Python3.7 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。

次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。

出来上がった、Vagrantfileを開き、以下のような行を追加します。

これで、PCのVagrantfileと同じディレクトリ のworkspace`フォルダと仮想マシーンの`django_rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。

で仮想マシーンを起動させ

runnningになっていることを確認したら。

仮想環境に接続します。 これで仮想環境の構築までは完了! 基本設定

パスワードを聞かれた場合はvagrantと入力します。 Python環境を整える 今回は、仮想マシーン上でpyenvを使うことにします。

MySQLインストール参考 How to Install MySQL on CentOS 7 MySQL5.7の初期設定はこちら CentOS7にMySQLをインストールした時の備忘録…

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。

そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。

親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。 次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。 ソースコードを実行するとこんな感じ

Vue.jsで快適な開発ライフを送りたい

VS Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。 コード整形 Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。 このコードでは、属性が2つだけなので、何とか読めますが、これが3つ4つと増えてきたら読めた物ではありません。 タグが見切れる前に早く何とかしましょう。 参考にした記事はこちら↓ VSCodeでvueファイルのhtmlを自動フォーマットする方法 必要な情報だけが載っていてノーストレスで解決できました。 設定が終わったら、。.vueのコードを全選択して、Shift + option + Fで整形完了! (WindowsならCtrl + Alt + F) これならソースコードが右側に見切れることはありませんね