CATEGORY Web開発

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

Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。 モデルを変えたのになぜ???と思ってググルと python manage.py makemigrations <project名> とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実 >>> python manage.py makemigrations No changes detected >>> python manage.py makemigrations project Migrations for 'project': project/migrations/0001_initial.py – Create model Person – Create model Team manage.py └── project ├── __init__.py ├── __pycache__ │   ├── __init__.cpython-37.pyc │   ├── models.cpython-37.pyc │   ├── settings.cpython-37.pyc │   ├── urls.cpython-37.pyc…

Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考:Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。 vue create <project name> cd <project name> npm install vue-router で準備を整えたら、必要な設定をしていきます。 └── src ├── App.vue ⭐️ ├── assets │   └── logo.png ├── components │   └── HelloWorld.vue ├── main.js⭐️ ├── router.js⭕️ └── views ├── Bar.vue⭕️ └── Foo.vue⭕️ コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ import Vue from 'vue'; import Router from 'vue-router'; //…

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

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 $emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント(App.vue) <template> <div id="app"> <BaseCheckbox v-model="Checked" ></BaseCheckbox> <h1>{{Checked}}</h1> </div> </template> <script> import BaseCheckbox from "./components/BaseCheckbox"; export default { name: "app", props: { Checked: { type: Boolean, default: true } }, components: { BaseCheckbox, }, }; 子コンポーネント(Checkbox.vue) <template> <div> <input type="checkbox" v-on:click="$emit('CheckboxChanged', $event.target.checked)" > <h1>{{checked}}</h1> </div> </template> <script> export default…

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

子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。 <div id="components-demo"> <h1>{{ number }}</h1> <sample-button :totalNumber="number" v-on:my-click="number += $event" > </sample-button> </div> Vue.component('sample-button', { props: { totalNumber: { Type: Number, } }, methods: { increment(){ this.$emit("my-click", this.totalNumber += 1); } }, template: '<button v-on:click="increment()">+1</button>' }) new Vue({ el: '#components-demo', data(){ return { number: 10 }; }, })

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

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、 vue create <Project Name> と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。 >>> vue add quasar WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? Yes 📦 Installing vue-cli-plugin-quasar… +…

Djangoの開発環境を作る

Vagrantにたどり着いた理由 Pythonのバージョン管理は何かと大変なので、仮想マシーン上で環境を管理してしまうのが一番手っ取り早いかつ一番安全だと思ったため。 2系、3系両方入ってると何が何だか分からなくなるしね 笑 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。 >>> vagrant box list centos/7 (virtualbox, 1905.1) 次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。 vagrant init <マシーン名> 出来上がった、Vagrantfileを開き、以下のような行を追加します。 config.vm.synced_folder "./workspace", "/home/vagrant/django_rest_framework" これで、PCのVagrantfileと同じディレクトリ のworkspace`フォルダと仮想マシーンの`django_rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。 # ファイル共有のためのプラグイン vagrant plugin install vagrant-vbguest # 起動 vagrant up で仮想マシーンを起動させ vagrant status runnningになっていることを確認したら。 vagrant ssh 仮想環境に接続します。 これで仮想環境の構築までは完了! 基本設定 #…

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

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。 <template> <div> <ul> <li v-for="(PostTitle, index) in PostTitles" :key="index" >{{ PostTitle }}</li> </ul> </div> </template> <script> export default { props: { // ここでプロパティの型を配列に指定 PostTitles: { Array, default: () => (["C", "C#", "Java"]) } // https://qiita.com/hogesuke_1/items/c74463de1a1eee802ca8 // factory関数にしないとWarning発生 } }; </script> そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。 <template> <div id="app"> <!– データの渡し口…

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

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

Vueコンポーネントの基本

今日は、Vue.js公式の 「Vueコンポーネントの基本」を読んでみました。 コンポーネントの基本 コンポーネントの基本 例えば、下図のTwitterのいいねボタン。 大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。 パッと思いつく感じでも。 カーソルが触れると赤くひかる 押されると、カウントが1増える もう一度押されるとカウントが1減る ハートマークのアイコン マウスオーバーエフェクトが動作する。 などです。 これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。 参考:Atomic Design を 分かったつもりになる ボタンコンポーネントを作ってみる Vueにおいて、コンポーネントを作ることは簡単です。 オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) new Vue({el: '#components-demo'}) data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。 上記のコードでは、button-counter`という名前のコンポーネントを作成し、`#components-demoにマウントしています。 マウント先のHTMLはこんな感じ。 <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>…

最速でVue.jsの学習環境を作る

はじめに  自分はこれまでフロントエンドをほとんど触ったことがありませんでした。どのくらいフロントエンドに触れてなかったかというと、フロントエンドで処理が必要なときは、C#のRazor文ですましてしまったり、もう少し複雑な処理の時は、JQueryを使っていました。  趣味レベルであればこれでも良かったのですが、仕事でVueを使うことになり、3日ほど前から本格的に学習を初めてみました。  ようやっと自分の中で「この学習環境が一番始めやすいんじゃないか」というものができたので、備忘録を残していこうと思います。 jsfiddle jsfiddleはブラウザ上で、HTML・JavaScript・CSSを実装できるサービスです。 リンク:jsfiddle jsfiddleでアカウントを作成することで、インターネット上にソースコードを保存しておくことも可能です。 自分はこの環境でVue.jsのチュートリアルをやりました。 jsfiddleの使い方とかは説明するまでもないかと思うので、使い方とかは、書きません。というか、RunとSaveボタンしか押したことないので、説明とかできません。笑 Vueでfor文、if文  Vueには、色々な機能があるのですが、プログラマー が一番最初に書き方を知りたいのが、この二つかと思います。 ここでは、「Reverse」ボタンを押すと、「Now you see me」という文字が表示されるというプログラムをif文を使って実装しています。 Vueでは、v-ifディレクティブと呼ばれる要素をタグの中に入れることで、if文を実装することができます。 ちなみに、for文はv-forと書きます。 上図のプログラムは、Vueインスタンスの一例です。 赤四角の部分で、Vueインスタンスがマウントする要素を指定します。 青四角部でVueインスタンスのデータを保持し、黄色部分で、メソッドを持つことができます。 公式チュートリアルにて、 算出プロパティとメソッドの比較や 算出プロパティと監視プロパティ など、より理解を深められるような解説があります。 公式:算出プロパティとウォッチャ 今後 他にも、Vueには様々なディレクティブがあったり、イベントハンドラがあったり 効率よく開発するためのデザインパターンとしてAtomic Designであったり、コンポーネント思考などまだまだ学ばなければいけないことはたくさんあります。 この辺りの理解が深まってきたら、また記事を更新していこうと思います。 コピペ用ソースコード html <div id="app-3"> <span v-if="seen">Now you see me</span> <button v-on:click="convert"> Reverse </button> </div> Vueインスタンス var app3 = new Vue({ el: '#app-3', data:…