BLOG

Docker+VuejsでTODOリストを作る

こんにちは!りゅうです。
今回はVuejsの学習をDocker環境で行ったので、DockerとVuejsの環境構築からTODOリストを作るまでの流れを書いてみました。

この記事で実現したいこと
Docker+Vuejsの環境構築とTODOアプリを作れるようにする

参考にしたサイト
Vue.jsで作るtodoアプリ
docker-composeでシンプルにvue.js環境構築

Docker+Vuejsの環境を構築する

Vueのアプリを動かすコンテナを作成していきます。

フォルダ構成は以下の通りです。serverフォルダはwebコンテナのappフォルダのマウント先です。

docker-compose.yml

Dockerfile

docker-compose.ymlとDockerfieを作成したら、以下のコマンドでコンテナイメージの作成とコンテナの起動を実行

ビルドと起動ができたら、コンテナに入りvueのデフォルトAppを作成

デフォルトApp作成時、色々聞かれますが、特になければ回答はYesと基本的なパッケージを選択で問題ないです。

ホスト側のserverフォルダに色々追加されるので、その中から config>index.js を探して、修正していきます。

0.0.0.0にすることでコンテナのlocalhostにコンテナ外部からアクセスが可能

pollをfalse→trueでファイルの変更を起動中に検知

デフォルトAppの作成が終わったら、以下のコマンドでAppを起動

localhost:8080にアクセスしてデフォルトの画面が表示されればOKです。

ポート8080が使用されている場合は使用しているものを閉じるか、 config>index.js のport:8080 を空いているポートに変更し、docker-compose.ymlもそれに合わせて修正してあげれば、再設定したポートで表示できるようになります。
docker-compose.ymlを修正した場合は再ビルドをお忘れなく、自分はよくやらかしてます(笑)

ポート7080で設定し直す場合

TODOアプリの作成

TODOアプリに必要なものを作成、修正していきます。
作成
server\src\components\List.vue

修正
server>src>App.vue
server>src>router>index.js

2つの修正ファイルから修正していきます。

<img src=”./assets/logo.png”> (Vueのロゴ画像)を削除

server\src\router\index.js ルーターと呼ばれどの画面に遷移するかの制御をします。
Listはこれから作成するTODOリストのファイル名(List.vue)です。

ここまでで、不要なロゴ画像の削除と、ルーターにTODOリスト画面のパスと呼び出すコンポーネントを登録しました。

TODOリストの画面部分を作成していきます。
入力部分とボタン押下時リストを追加するメソッド(ロジックは後述)をまず記述

9行目の<pre>{{$data}}</pre> で newItem の中身を確認
addItem メソッドにalert()を書いて追加ボタン押下時のメソッド呼び出し確認

addItemメソッドにロジックの追加、data()に入力内容を複数格納する配列(todos)の追加

複数追加できるか確認

一覧表示のテーブル、リストのチェックと削除ボタンを追加
一覧を中央表示、文字を左寄せ、チェック後の取り消し線を<style>タグで調整
確認できたら<pre>{{$data}}</pre>は削除

リストを3つ追加、取り消し線と削除の確認

以上で、完成です。

最後に

Vuejsは初歩的な内容だったので、これを機により実用的な部分も学習できたらと思います。
それからDocker、イメージ作成時やコンテナ起動時に多少エラーで悩まされたりしますが、ローカルに一切パッケージをダウンロードせず学習が進められる点は、改めて便利だなと実感しました。

今回は以上になります。
ご覧いただき、ありがとうございました。

BLOGトップへ戻る