vuetifyをvue.jsに導入する際に、【no such file or directory, open ‘/app/public/index.html’】エラーが出る場合の対処法

2020.08.09 rara

vue.jsのプロジェクトにVuetifyを導入しようと試みた際に以下のエラーが発生しました。原因上記のように、vue init webpackというコマンドで、vue.jsプロジェクトを作成したために発生したエラー…

【Typescript】呼び出しシグネチャと省略記法の書き方

2020.08.08 rara

typescriptを使う際に頻出する呼び出しシグネチャ。普段は、省略記法で書くことが多いのですが、完全な書き方を覚えておくと、オーバーロードする際に楽なので、呼び出しシグネチャの省略記法呼び出しシグネチャの正式な…

React.jsのprops.childrenとはなにか？javascript・typescript

2020.08.04 rara

import * as React from 'react'

const Child = props => (
  <div>{props.children}</div>
)

const Parent = props => (
  <Child>
    aaaaaaaaa
  </Child>
)

export default Parent

import * as React from 'react'

const Child = props => (

<div>{props.children}</div>

)

const Parent = props => (

export default Parent

以上のようなソース。 Childコンポーネントの中に、props.childrenという記述があります。 reactを書いていると頻出する記法なのですが、…

firebase認証のonAuthStateChangedはどこでログイン状態を管理しているのか？

2020.07.12 rara

タイトルの通りの内容です。

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      // ログイン状態
    } else {
      // notログイン状態
    }
  })

firebase.auth().onAuthStateChanged((user) => {

Firebaseのユーザー認証機能を使う際に、ユーザーがログイン済みかどうかを判定する上記のメソッドは、どこでログイン状態…

【Vue.js Nuxt】Vuetifyのv-file-inputが動作しないバグの修正方法

2020.06.18 rara

Nuxt.jsでwebアプリを作る際にVuetifyを利用しているのですが、v-input-fileでplaceholder(label)の部分をクリック(タップ)しても、@changeが動作しないバグに遭遇したので、回…

【momentjs】Sequelizeのtimezoneを設定する方法【時間ずれる】

2020.06.14 rara

SequelizeとExpressでwebアプリケーションを作成しているときに、momentjsで現在時刻を指定して、MySQLからSELECTするときに、時刻がずれるという現象が起こったので、その解消法を紹介します！ …

Dockerの基本・勉強法・技術書・環境構築に関するまとめ

2020.06.05 rara

お手軽に仮想環境を構築でき、ポータビリティに大きなメリットがあるDockerに関する記事をまとめました！ Dockerの技術について基本的なコマンドについて Dockerは、docker-compose.ymlやDoc…

【Docker】Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築してみた！

2020.06.02 rara

Nuxtの開発環境をDockerfileとdocker-compose.ymlで構築したので、備忘録も兼ねて、まとめておきます。 Dockerfile まずは、イメージの元となるDockerfileを作成します。 FRO…

DockerでMySQLの環境構築【docker-compose.yml】

2020.06.01 rara

docker-compose.ymlを使って、お手軽にMySQL環境を構築する方法を紹介します！ docker-compose.yml docker-compose.ymlはこんな感じです。 imageにmysqlのイメ…

【Docker】Dockerの勉強におすすめな技術書・動画を紹介！【エンジニア】

2020.06.01 rara

Dockerの勉強に役立った技術書と動画を紹介いたします！ここで紹介する1冊の本と1つの動画を勉強すれば、ローカル環境でDB・フロント・サーバーサイド(API)をdocker-composeで連携した仮想環境を作成でき…

【Docker】docker compose upするとnode_modulesがマウントされて消える問題

2020.05.31 rara

NuxtやExpressの環境をDockerで構築する際に、Dockerfileでinstallしたnode_modulesがdocker compose upする際に、ホストマシンのファイルがマウントされることによって…

【Docker】複数コンテナを同時に管理するdocker-composeの使い方

2020.05.30 rara

web開発は、複数のサーバー(コンテナ)を連携して、サービス開発を行います。例えば、webサーバーやDBサーバー、キャッシュサーバー、loggingサーバーなど複数のサーバーを連携して、一つのアプリケーションを作成して…

Vue.jsで親Componentから子Componentのmethodsを呼び出す方法

2020.05.29 rara

シングルページアプリケーション(SPA)を作るときに使用するVue.jsで、親Componentから子Componentのmethodsを呼び出す方法を紹介します。 ChildComponent [crayon-6483…

Nuxtの【Component names should conform to valid custom element name in html5 specification.】エラーの対処法

2020.05.28 rara

Nuxt.jsでWebアプリケーションを制作している際に、「Component names should conform to valid custom element name in html5 specificat…

APIサーバーとNuxtサーバーをDockerで構築した際にSSRで404エラーになる対策

2020.05.24 rara

APIサーバーをDockerコンテナで構築 Nuxtでフロントエンド構築(Dockerコンテナ) NuxtはSSR(サーバーサイドレンダリング)を使用 docker-composeでAPIサーバー・Nuxtサーバー同時に…

DockerfileのRUN命令とCMD命令の違い【Docker】

2020.05.22 rara

Dockerfile内で頻繁に使用するRUN命令とCMD命令。共に指定したコマンドを実行する命令ですが、実行されるタイミングが異なります。 RUN命令・CMD命令の違い RUN命令はDockerfileからImageを作…

【Dockerfileとは】イメージ作成(image build)や構文について【チュートリアル】

2020.05.22 rara

仮想環境を作成するときには、以下のようなフローが存在します。 ubuntu等のベースとなるOSをインストールするパッケージリストの更新(apt-get update等) nginxなどのミドルウェアのインストール ng…

【docker network】Dockerコンテナのネットワークまとめ【コンテナ間通信・名前解決】

2020.05.19 rara

Dockerは、ユーザーが作成したDocker networkを使うことにより、同一のnetworkに接続されたコンテナ間で、コンテナ名で名前解決をして相互通信することが可能です！今回は、そのDocker networ…

Dockerの基本的なコマンドまとめ【container・image・便利コマンド】