開発にアサインされて一月半が経ちました。思ったより地獄です

12月に受託開発に無事アサインされました。
しかし、思ったよりも開発現場は地獄…
決して炎上しているわけでもないし、計画通りに進んでいます。
何が地獄かと言えば、”とにかく何も出来ない”ことが地獄…。

何も経験がないので当たり前なのは分かっています。
ですが、今まで仕事をしてきて、ここまで足を引っ張る経験がなかったのでツライ…
何か質問をすれば、先輩エンジニアの手を止めてしまう。
しかし、質問しなければ先に進まない…
このジレンマがほんとキツイ。

開発言語はGoとVueです。
12月は主にフロント側の改修を担当し、1月からはサーバー側も触り始めました。

今まで独学で学んでいた事は何だったのだろう…と言うくらい、圧倒的無力…
Goでは聞いたこともないアーキテクチャを採用していて、何がどうなってるのかキャッチアップするのが大変でした。
今は多少、どんな形で実装しているのか徐々にわかってきましたが…
しかし無力…

てことで、VueとGoを使ってアプリを作ることにしました。
極力、今の開発に似せて作ってみます。
正直、簡単なアプリなのでVuexとか、大規模開発で使用するようなアーキテクチャは不要なのですけど、まぁ勉強ということで。

で、さっそく画面側でわからない事が発生し、無事に解決したので備忘録として書いておきます。
まず、わからなかったことは、コンポーネント化したモーダルを、別コンポーネントから呼び出す方法がわからなかったのです。
BootStrapを使用しているので、こいつの書き方も理解しないとなりません。
他にもやり方はあるのでしょうが、簡単なBootStrapとVueを使用したモーダルの開閉方法です

まず、VueでBootstrapが使えるように準備をしましょう。
このページ見れば導入は出来ると思います。
Bootstrap を Vue.js で使ってみよう - Qiita

導入が終わりましたら、testmodal.vueというモーダルコンポーネントと、
それを呼び出すtop.vueというコンポーネントを作成します。
まずはtestmodal.vueからです。

<div>
   <b-modal id="modal-1" title="BootstrapVue">
      <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

このページはBootStrapの公式そのままのコードです。
モーダルを開くボタンはtestmodal.vueに必要ないので削除してあります。
Modal | Components | BootstrapVue

んで、次にTop.vueです。

<template>
    <div>
　　<b-button v-b-modal.modal-1 variant="danger">モーダルOPEN</b-button>
　　<TestModal></TestModal>
    </div>
</template>

<script>
import TestModal from '@/components/testmodal'
export default {
    components: {
        TestModal
    },
}
</script>

これで完了です。
親コンポーネントでは、testmodal.vueを使えるようにインポートし、
モーダルを開くボタンを設置するだけです。
top.vueにある、

v-b-modal.modal-1

がミソなのかな？
v-b-modalディレクティブを使用して、子コンポーネントのIDと紐づけているようです。
あとはBootstrap側でよろしくやってくれるみたいですね。
まずは基本的なことを一つ一つ理解していこう…

Vueもやりたいし、JavaScriptもやりたいし、Goもやりたいし、やりたいこと一杯。
地道にコツコツ頑張ろう。

※もし間違っていたらごめんなさい。