おっさんプログラマーがゆく

37歳で突然プログラミングにハマり、未経験からエンジニア街道にひとまず乗れました。同じ高年齢でエンジニアを目指す人たちの希望になれたら嬉しいです。

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

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もやりたいし、やりたいこと一杯。
地道にコツコツ頑張ろう。

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