CSSとVue.jsでHexagon Mapを作る

# 作ったもの

![hexmap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266469/e48ed7a4-443b-8eed-d55e-a51554b40ed1.gif)

## 参考にしたサイト


[CSS Hexagon Grid - codepen](https://codepen.io/ericornelissen/pen/vWbWKv)

<p class="codepen" data-height="496" data-theme-id="0" data-default-tab="html,result" data-user="ericornelissen" data-slug-hash="vWbWKv" style="height: 496px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Hexagon Grid">
  <span>See the Pen <a href="https://codepen.io/ericornelissen/pen/vWbWKv/">
  CSS Hexagon Grid</a> by Eric Cornelissen (<a href="https://codepen.io/ericornelissen">@ericornelissen</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

- 基本的に上記のコードを使ってます．

# 作り方

コードは，Vue CLI で作られる App.vue に全部書いてます．

## 最終的な App.vue は以下の通り

``` App.vue
<template>
  <div id="hexagonA-container">
    <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
      <span>{{ i }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

$hex-width: 100px; 
$hex-between: 10px;
  
/* Other hexagon dimentions */
// どれが，hexのどの長さに対応するかを理解すること
$hex-height: $hex-width / 1.73 /* sqrt(3) */;
$hex-margin: $hex-width / 2;
$hex-border: $hex-margin / 1.73 /* sqrt(3) */;
$hex-transition: all .2s ease;

/* Colors */
$color-hex-default: #000000;
$color-hex-hover:   #FFFFFF;
$color-sass:        #CC6699;

#hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}

.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA span {
  width: 100%;
  height: $hex-height * 0.9;
  line-height: $hex-height;
  color: rgb(255, 255, 255);
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
}

.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}
.hexagonA:hover {
  background-color: $color-hex-hover;
}
.hexagonA:hover:after,
.hexagonA:hover:before {
  border-top-color: $color-hex-hover;
  border-bottom-color: $color-hex-hover;
}
// https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}
</style>
```

多分，余計なコードも交じってます．

## 六角形の作り方

```
.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}
```

うまいこと四角と三角を組み合わせてる？  
以下の記事のコップを作るところ辺りを参考に

参考：[[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita](https://qiita.com/mame_hashbill/items/ccf6e89f46fde8a8e20c)  

## 六角形の配置決め

```
#hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}
```
  
ここと  
  
```
.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}
```

ここ

参考：[CSS Grid Layout を極める！ - Qiita](https://qiita.com/kura07/items/e633b35e33e43240d363)  
参考：[MDN web docs :nth-child()](https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child)

この辺を参考にしながら，強引に配置  
もっとうまい方法がある気がしてる．  
教えてください．

## 六角形を配置
```
<div id="hexagonA-container">
  <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
    <span>{{ i }}</span>
  </div>
</div>
```
  
Vueっぽいことしてるの，ここだけな気がする  
公式リファレンスをどうぞ  

参考：[Vue.js リストレンダリング](https://jp.vuejs.org/v2/guide/list.html)

# 感想

特に何かに使うわけでもないですが，作ってみました．  
もっと効率のいい方法がありそう……   
アドバイス等あればぜひ！！