オセロ作ってみた|パート2〜ディレクトリの最適化〜
今回はチャレンジ企画第３弾『オセロを作る』のパート2です。コードを書く前にディレクトリの最適化をしていきましょう
みなさんこんにちは！
前回に引き続き『オセロをつくる』チャレンジ企画の記事となっています。
さっそくですが今回のテーマは下の通りです。
- vueの開発環境の利⽤
- オセロの盤⾯をvueで表現
ではまずは新規プロジェクト作成のコマンドでできたディレクトリを確認してみましょう！
ディレクトリの構造を最適化
まずはsrcフォルダの中⾝について⾒てみましょう！（ちなみに今回の開発でいじくるのは主にこのsrcフォルダ内部になります）
srcフォルダを開くと下のようになっていると思います。
今回作業するのはcomponentsフォルダです。
はじめは下のようになってますが
この後の作業で合計3つのvueファイルを作成していきます。
作成するファイルの概要
作成するファイルは.vue拡張⼦がついたファイルで、vueの単⼀コンポーネントと呼ばれているものです。
単⼀コンポーネントとは、view画⾯の定義、scriptコード、スタイルがひとまとまりになっているファイルのことをさします。
下は単⼀コンポーネントのイメージです。
<template>
ここにview画⾯⽤のHTMLを書く
</template>
<script>
ここにJavaScriptやTypeScriptで処理を書く
</script>
<style>
ここにスタイルを書く
</style>このように処理や記述はコンポーネント単位で管理ができるようになっています。
vueファイルはこの3点セットで１つのファイルと覚えておこう!
次にコンポーネントの役割について⾒てみましょう。
役割は下の通りです。
Board.vue
- 盤⾯の⼀番⼤枠となるコンポーネント。
- 盤⾯の⼀番外枠のスタイルも⼀緒に記述
Row.vue
- 盤⾯の⾏を定義するコンポーネント
- 全部で８⾏。
Squares.vue
- 盤⾯のマス⽬を定義するコンポーネント
- １⾏に８マス。
- マスと⽯のスタイルも⼀緒に記述
今回はこんな感じでコンポーネントわけをしてみました。
なぜこんな分け⽅をしたかというとオセロの盤⾯は全部で8⾏あり、1⾏あたり8マスとなっています。
この構図を表現するにはこれぐらいに分けておくのがいいかなと思ったので今回はこのような分け⽅にしてます。
分け⽅は正直好みなのでその時のわかりやすい分け⽅をしよう
では作成するファイルの⽅向性も決まったのでさっそく新しいファイルを作りたいのですが、その前に今回開発で使わないファイルの削除をしましょう。
フレームワークを使うとはじめに必要ないファイルが⽣成される場合があります。
そういった必要ないファイルははじめに削除してディレクトリの中⾝を綺麗にしておきましょう。
ディレクトリの掃除
削除するのはHelloWorld.vueファイルと、App.vueファイル内部のHelloWorld.vueに関連する記述部分です。
HelloWorld.vueを削除すると下のようにエラーが出るはずです。
このエラーはHelloWorldコンポーネントが取得できないと出てくるものなので、App.vue内部を下のように変更することで解消できます。
変更前
変更後
<template>
<div id="app"></div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>新しいファイルの作成
ここまでできたらBoard・Row・Squaresコンポーネントをvueファイルで作っていきましょう。
ファイルの作成ができたらそれぞれのスタイル、スクリプト、ビュー画⾯の設定をしていきましょう。
Board.vueについて
まずはBoardコンポーネントから!
Boardコンポーネントは盤⾯の⼀番⼤枠でRowコンポーネントが⼦として格納されるという役割があるのでシンプルではありますが下のような記述になります。
<template>
<div class="board"></div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Row from "./Row.vue";
@Component({
components: {
Row,
},
})
export default class Board extends Vue {}
</script>
<style lang="scss" scoped>
.board {
display: inline-block;
border: 3px solid black;
}
</style>
まだまだこれでは動きませんが⼀旦はこの状態で⼤丈夫です。
Row.vueについて
次にRowコンポーネントです!
Rowコンポーネントは盤⾯の⾏を表現しつつ、Squaresコンポーネントが⼦として格納されるという役割があるので下のような状態になります。
<template>
<div></div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Squares from "./Squares.vue";
@Component({
components: {
Squares,
},
})
export default class Row extends Vue {}
</script>
<style lang="scss" scoped>
div {
display: flex;
}
</style>Rowコンポーネントは⾏を表現できればOKなので今はこの状態で⼤丈夫です。
Squares.vueについて
最後にSquaresコンポーネントです!
Squaresコンポーネントは盤⾯のマス⽬を表現するのと、⽯に関する処理が実行されるという役割があり1番オセロらしいコンポーネントになります。
最⼩単位のコンポーネントでありながら役割が多いので下のような状態になります。
<template>
<div>
<div class="squares"></div>
<div class="stone"></div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Squares extends Vue {}
</script>
<style lang="scss" scoped>
div {
position: relative;
// マスの設定
.squares {
background-color: darkgreen;
border: solid 1px black;
width: 64px;
height: 64px;
}
// 石の設定
.stone {
position: absolute;
top: 4px;
left: 4px;
width: 56px;
height: 56px;
border-radius: 50%;
}
// 石の色設定
.white {
background-color: white;
}
.black {
background-color: black;
}
}
</style>機能や処理の実装は後ほどするので⼀旦はこの状態で⼤丈夫です。
まとめ
お疲れ様でした。
今回はディレクトリ内部の最適化を主にしました。
次回は作成したコンポーネントを動かすためのスクリプトを作成していきます。
まだまだ今の状態では⾻組みだけなので動かすことはできませんが、この⾻組みが
わかっていないと機能を実装する時混乱してしまいます。
まずは焦らずはどんな構造になっているか理解しながら⾃分のペースで開発を進めていきましょう。