CATEGORY 備忘録

CentOS 7にMySQLをインストールする

はじめに 初期設定のパスワードがランダムであるところ # MySQLをインストール yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm yum info mysql-community-server sudo yum install -y mysql-community-server とやったあとの初期設定でハマったので備忘録。 mysql: [Warning] Using a password on the command line interface can be insecure. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 以下のコマンドで、一旦MySQLを止めましょう。 [vagrant@localhost ~]$ service mysqld stop Redirecting to /bin/systemctl stop mysqld.service ==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units…

Djangoでmigrationのやり直しが上手くいかない

Djangoのmigrationをやり直したくなったけれど、色々試したら、 python manage.py migrate で psycopg2.errors.UndefinedColumn: column "<field名>" does not existといったエラーが出て、後戻りできなくなったりする。 僕みたいによく分かってない人は、一度全部消してからやり直したほうが絶対早い。 djangoでmigrateができない 下のコマンドは、同じSchemaのテーブルを全削除するコマンド。 drop schema public cascade; create schema public; これを実行してからマイグレーションすれば確実。

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

python manage.py migrate で、 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をかけて解決した。

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

普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録 ちゃんとバージョン管理ソフトは使いましょう。。。 今回ハマったエラーはこちら Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/kouki/Projects/vue-login-sample/src/main.js: Package exports for '/Users/kouki/Projects/vue-login-sample/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath (While processing: "/Users/kouki/Projects/vue-login-sample/node_modules/@vue/cli-plugin-babel/preset.js") at applyExports (internal/modules/cjs/loader.js:485:15) at resolveExports (internal/modules/cjs/loader.js:508:12) at Function.Module._findPath (internal/modules/cjs/loader.js:577:20) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27) at Function.Module._load (internal/modules/cjs/loader.js:785:27) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/debug.js:8:33) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)…

子コンポーネントから親コンポーネントへのデータの受け渡し〜$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…

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… +…

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>…

MS Learnをやってみた(Select a cloud deployment model編)

今回はMS Learnをやってみた感想を書いていきます。 MS Learn : Select a cloud deployment model ↑皆さんもぜひやってみてください。 はじめに 本日は、無料でMicrosoftのサービスについて学べるMS Learnというサービスを試してみました。 今回やるのは「Select a cloud deployment model」という題目です。 このラーニングパスで学べることは The considerations to keep in mind when selecting a cloud service. クラウドサービスを選ぶときの考え方 Terminology associated with adopting a cloud service. クラウドサービスを採用するときの用語 The difference between cloud-only and hybrid migration models and how to choose between them. ハイブリッドモデルとクラウドのみのモデルの違い…

.NET Core 3.0 MVCで作成したプロジェクトをビルドした時に、ブラウザが起動しない

状況 Visual Studio for MAC バージョン8.3 .NET Core3.0 MVC (プロジェクトの作成直後) 2019年11月28日時点 ふと、C#でプログラムを書いてみたくなり、.NET Core 3.0 プロジェクトを新規作成し、GUIでビルドすると、起動するはずのブラウザが起動しなかった。 .csprojファイルをいじったりと無駄な努力をしてみたが、結局解決せず。 dotnet コマンドでビルドを行い、ログから開いているポート番号を確認した。 localhost:5000 にアクセスし、アプリが起動していることを確認できた。 どのポートを開くかは、launch.jsonで設定できるっぽい { "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:20286", "sslPort": 44369 } }, "profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "dotnet_sample": { "commandName": "Project",…