車を例に考えるユニットテスト

さあ、車を作ることを想像してみてください。 まず、必要な部品を考えてみます。 エンジン 車体 シャーシ シャフト タイヤ などなど はじめに、これらの部品の一つ一つを製造します。 そして、これらの部品を組み立てると、車が完成しました。 では、完成した車にのってドライブに行こうと、車に乗り込んでエンジンキーを回しました。 しかし、なにも起こりません。そう、エンジンが点かないのです。 さて、エンジンが点かない原因はどこにあるでしょうか。 車に使ったいずれかの部品が故障しているのか、もしくは、それぞれの部品を組み合わせた相性が悪かったのか。 組み立てる前に一つ一つの部品に不具合がないか確認をしてから…

docker-compose down が遅い

TL;DR CMD ["command", "param1", "param2"]の形式で記述する execコマンドを使う Dockerコンテナの終了が遅い 原因 解決策 まとめ Dockerコンテナの終了が遅い docker-compose downやdocker stopしたときに、Dockerコンテナの終了が遅いことがあります。 (数秒の時間がかかることがあります。) しかも、docker-compose ps で確認してみると、xxxxx exited with code 137となっており、SIGKILLにより終了しています。 docker-compose down が遅いと、作業に…

Dockerコンテナをずっと起動しておく

TL;DR docker runでは-itオプションをつける docker-composeではyamlにtty: trueとstdin_open: trueを書く 処理が終わるとDockerコンテナは終了 Dockerコンテナを起動したままにするにはitオプション Docker Compose の場合は設定ファイルに書く まとめ 処理が終わるとDockerコンテナは終了 通常、dockerコンテナは起動したらそのまま終了してしまいます。 DockerfileにCMDを指定することで、コマンドを実行させることができますが、その指定されたコマンドが終了すると、やはりdockerコンテナは終了してし…

オープンソースでFirebaseの代替となる？ 「Supabase」

Friebase は Google のサービスですが、オープンソースで利用できる Supabase というサービスがあります。 TL;DR Supabase使うと簡単にバックエンド構築可能 Postgres Database, Authentication, instant APIs, Realtime subscriptions, Storage が使える Functions も近く実装予定 無料枠も結構ある！ Supabase とは Supabase と Firebase との違いは？ Supabase の料金プランは？無料枠はある？ Supabase とは Supabase は、オープン…

Firebase APIKey は公開してもいい？危なくない？

Firebase の API Key は公開してもいい 何なら誰でも見れる場所に公開されている ただし、権限の設定には注意（特に Firestore)

半年ほど勉強してきて ~2021年 振り返り~

約半年ほど学んできて WEBの勉強を始めて半年以上が経ちました。 そこで一番考えたことは、「何をどの順で学べばいいか？」ということです。 私は独学で、本も買わずにネットの情報を拾いつつ手を動かして勉強をしてきました。 その第一歩の目標としては、バックエンドもフロントエンドも開発し、AWS等にデプロイし、動くものを作ることでした。 そこで、さっそく取り掛かろうと思うのですが、いきなり迷いがありました。 使う言語とフレームワークの選択肢が多すぎて、何を選んでいいのかわからない、ということです。 結局のところ、自分が使ったことある言語、または、自分が使ったことある言語に似ている言語を使うことにきめ、…

Firebaseのプランどれにする？

TL; DR 何も考えず無料で使いたい + Cloud Functions は使わない → Spark (無料) プラン きちんと管理する → Blaze (従量課金) プラン Cloud Functions を使う → Blaze (従量課金) プラン Firebase のプランは二つ Firebase で Cloud Functions を使うなら、Blaze (従量課金) プラン Firebase の Blaze (従量課金) プランは要注意 ! 何も気にせず無料で使うなら Spark プラン Cloud Functions 使うなら Blaze プラン Firebase のプランは二つ…

Firebaseっていう便利なやつ

Firebaseって聞いたことはありますか？ ウェブアプリを開発するのに非常に役立つサービスが勢揃いのクラウドサービスです。 Firebaseとは Firebaseが提供するサービス Firebaseとは Firebaseとは、Googleが提供するBaaS (Backend as a Service) で、 Webアプリやスマホアプリの開発プラットフォームです。 Ruby on Rails 等のフレームワークを使って開発されることの多いバックエンドを、Firebaseを使うことで容易に構築することができます。 プログラムを書く必要もなく、Firebaseコンソールでポチポチとしていくだけです…

TypeScript きほんの「き」

TypeScript きほんの「き」 TypeScriptを書く上でとりあえずこれを知っておけばいいというのをまとめてみました。 変数に型をつける 配列の型宣言 自分で型を宣言する 変数に型をつける TypeScriptは、JavaScript + 型 みたいなものです。 utouto97.hatenablog.com ですので、JavaScriptのプログラムに型をつけていきましょう。 まずは、変数からみていきます。 変数には、その変数の宣言時に型をつけることができます。 その方法は非常に簡単で、変数名の後ろに : を挟んで型名を書くだけです。 const msg : string = "H…

TypeScriptってなんやねん

TL;DR TypeScriptは静的型付けなJavaScriptで、保守性向上に貢献 TypeScriptとは TypeScriptはコンパイラ!? どうしてTypeScriptが必要？ TypeScriptとは TypeScriptとはなんでしょうか。 とりあえず、Wikipediaを見てみましょう。 TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。 TypeScri…

はじめに一度だけ実行したい

Composition APIを使って開発をするとき、はじめの一度だけ実行したい処理の記述方法をまとめていきます。 マウント直後に実行する ライフサイクルフック マウント直後に実行する はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理を実行することで、はじめの一度だけ実行できます。 そして、Composition API では、onMountedを利用することで、マウント直後に実行する処理を記述することができます。 onMountedは、Compostion API の setup()内に記述します。 そして、onMountedには、実行したい関数を渡すことで、マウン…

Composition API ってどうやって使うの？

Vue 3 でComposition API が追加され、ロジック毎にまとめて記述できるようになりました。 そんな Composition API の基本的な使い方をまとめていきます。 HTML は <template>タグ内に記述 変数や関数を使う HTML は <template>タグ内に記述 まずは、HTMLの記述ですが、これはVue 2の時と変わらず、テンプレートを使用することができます。 <template></template>内に、HTMLをほぼ通常通り記述することができます。 Reactのように、JSX記法を新たに覚える必要はありません。 一般的なHTMLと、記述が異なる点もあ…

Vue 2 と Vue 3

Vue はバージョン3がリリースされていますが、Vue 2 もまだまだ使われているようです。 Vue CLI でプロジェクト作成時も、Vue のバージョンを2にするか3にするか、問われます。 Vue のバージョン3でどんな機能が追加されたのでしょうか。 バージョン3での変更点 Composition API Teleport バージョン3での変更点 Vueはバージョン2からバージョン3へのアップデートにより、新機能の追加、破壊的な変更がいくつも行われています。 注目すべき新機能の中に、Composition API や Teleport などがあります。 また、Global API も破壊的な…

■

■ - うとうとしながら。

Vue Router

Vue Router Vue Router Vueでは、シングルページアプリケーション (SPA) をつくることができます。 SPAでは、ページは1枚だけです。 しかし、URLをもとに複数の画面を表示したいときもあります。 そんなときに、Vue Router を使ってルーティングを行います。 router.vuejs.org Vue Router は、VueにおけるSPAで、ルーティングを制御するためのプラグインです。 Vue Routerを使うことで、SPAに複数ページを疑似的に実現することができます。 Vue Routerのインストールは、Vue CLI を使って簡単にできます。 一つは、…

■

■ - うとうとしながら。

Vuetifyを使ってみる② コンポーネント（ボタンとカード）

ドキュメントに詳しく書いてある 試してみる ボタン (Button) カード (Card) 前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。 utouto97.hatenablog.com ドキュメントに詳しく書いてある Vuetifyには、ボタンやリスト、表（table）など様々なコンポーネントがあります。 これらのコンポーネントの使い方は、ドキュメントに詳しく書かれています。 vuetifyjs.com 試してみる ボタン (Button) まずは、ボタンを試してみます。 シンプルなボタンは以下のように記述します。 <v-btn>シンプルな…

Vuetifyを使ってみる

Vuetifyを使ってみる 環境はVue 2 Vuetifyをインストールして使ってみる Vuetifyを使ってみる 環境はVue 2 今回は、Vuetifyを導入していきます。 VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。 github.com 公式のドキュメントも充実していて、導入は簡単に行えます。 vuetifyjs.com VuetifyはVue 3には対応しておらず、Vue 2のみに対応しているようです。 Vuetifyをインストールして使ってみる Vue CLI で Vue 2をインストールし終わった状態から作業を始めることを想定し…

Vueでスタイリング

Vueでスタイルを設定 Vueで使えるUIフレームワーク Vueでスタイルを設定 Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。 また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともできます。 <template> <div> <h1>Vue あかいろ</h1> </div> </template> <script> export default { name: 'App', } </script> <style> h1 { color: red } </st…

DockerでVue

Dockerとdocker-composeでVueプロジェクトを作成 Dockerfile docker-compose.yml Dockerイメージをビルド Vue CLIを使ってプロジェクト作成 コンテナを起動 Dockerとdocker-composeでVueプロジェクトを作成 Dockerとdocker-composeを使って、Vueプロジェクトを作成してみます。 Vueプロジェクトの作成は、Vue CLI を使うと簡単にできます。 まずは、Dockerfileとdocker-compose.ymlの二つのファイルを準備します。 Dockerfile FROM node:alpine …