2019-08-15

Vue.jsの設定

Vue.jsの設定方法

vue.config.jsを作成することでVue-CLI3上で設定できる。

vue.config.js

outputDir

ビルドされたファイルの出力先の指定ができる

indexPath

index.htmlの出力先を指定できる outputDirを基準に見て指定する

publicPath

バンドルファイルのjsやcssのパスの指定をすることができる。デフォルトはルート

2019-08-15

Django メモ１

Djangoで学んだことを書いていく

related_nameの使い方について

models.pyでForeignKeyやManyToManyFieldとよく使うrelated_nameについてのメモ

ForeignKeyなどでリレーションを張ったときに、逆参照するときに使用する

〇〇_setを〇〇に置き換えることができる

本当に必要となるのはForeignKeyを使用して同じモデルに対して複数のリレーションを貼るとき

一つのモデルで同じモデルを複数リレーションを張ると参照する際にどちらを使用するかわからなくなるのでrelated_nameを使用する必要がある

参考文献

www.goodmadeused.com

2019-08-14

盆休みにやったこと

8/10

Javascriptでタブ機能の作成
Vue.jsでタブ機能作成
Typescriptの本を読んだ

8/11

Django rest frameworkでモデルの作成について勉強
Django rest frameworkでapiviewを使ってみたがわからなかった
Django rest frameworkでtodoのモデル作成　django_api_todo

8/12

-CSSアニメーションの勉強

8/13

DjangoでUserモデルを動かした
Vue.jsでテストについて勉強した
TypescriptでTemplate patternについて書いてみた　ブログ参照

8/14

keep-aliveの動作テスト
Vue computedのテストのやり方の勉強

2019-08-13

Typescript デザインパターン　Template Method

Template Method

親クラスで処理の概要を決め、子クラスで具体的な処理を書くデザインパターン。

親クラスは直接インスタンスを作成しないのでAbstractClassを使う。これを抽象クラスという

子クラスは具象クラス（ConcreteClass)という

プログラム

ソースコード

abstract_display.ts

export abstract class AbstractDisplay {
  abstract open(): void;
  abstract print(): void;
  abstract close(): void;

  public display() {
    this.open();
    for(let _i = 0; _i < 5; _i++) {
      this.print();
    }
    this.close();
  }
}

char_display.ts

import { AbstractDisplay } from './abstract_display';

export class CharDisplay extends AbstractDisplay {
    // typescriptにchar型はないのでstringで代用(1文字でない場合はエラーを起こす)
    private ch: string;

    constructor(ch: string) {
        super();
        if(ch.length != 1) {
            throw("CharDisplay: length is invalid.");
        }
        this.ch = ch;
    }

    public open(): void {
        console.log("<<");
    }

    public close(): void {
        console.log(">>");
    }

    public print(): void {
        console.log(this.ch);
    }
}

abstract_main.ts

import { AbstractDisplay } from './abstract_display';
import { CharDisplay } from './char_display';

const abstractFunc = () => {
  const d1: AbstractDisplay = new CharDisplay("A");

  d1.display();
}

export default abstractFunc;

出力

<<
A
A
A
A
A
>>

参考文献

www.te-nu.com

2019-08-10

Javascriptでタブ機能

コード

var tabBtns = document.getElementsByClassName('tab');
var tabStages = document.getElementsByClassName('stage');
var activeIndex = 0;

Array.prototype.forEach.call(tabBtns, function (element, index) {
  element.addEventListener('click', function (e) {
    if (activeIndex === index) return;

    // 前回のアクティブクラスを削除
    tabBtns.item(activeIndex).classList.remove('is-active');
    tabStages.item(activeIndex).classList.remove('is-active');

    // クリックした要素にアクティブクラスを追加
    e.target.classList.add('is-active');
    tabStages.item(index).classList.add('is-active');

    // 現在アクティブの要素のインデックスを更新
    activeIndex = index;
  })
})

ul li {
  list-style: none;
}

.tabs {
  display: flex;
  flex-direction: row;
  color: #fff;
}
.tab:first-of-type {
  background-color: #f00;
}
.tab:nth-of-type(2) {
  background-color: #0f0;
}
.tab:last-of-type {
  background-color: #00f;
}
.tab.is-active {
  background-color: #333;
}
.stage {
  display: none;
  width: 600px;
  height: 300px;
}
.stage.is-active {
  display: block;
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <ul class="tabs">
    <li class="tab is-active">タブ１</li>
    <li class="tab">タブ２</li>
    <li class="tab">タブ３</li>
  </ul>
  <div class="stage is-active">
    <h2>Stage1</h2>
    <p>Stage1</p>
  </div>
  <div class="stage">
    <h2>Stage2</h2>
    <p>Stage2</p>
  </div>
  <div class="stage">
    <h2>Stage3</h2>
    <p>Stage3</p>
  </div>
  <script src="./script.js"></script>
</body>
</html>