JavaScript
Firebaseって聞いたことはありますか？ ウェブアプリを開発するのに非常に役立つサービスが勢揃いのクラウドサービスです。 Firebaseとは Firebaseが提供するサービス Firebaseとは Firebaseとは、Googleが提供するBaaS (Backend as a Service) で、 Webアプ…
TL;DR TypeScriptは静的型付けなJavaScriptで、保守性向上に貢献 TypeScriptとは TypeScriptはコンパイラ!? どうしてTypeScriptが必要？ TypeScriptとは TypeScriptとはなんでしょうか。 とりあえず、Wikipediaを見てみましょう。 TypeScript はマイクロソフ…
Composition APIを使って開発をするとき、はじめの一度だけ実行したい処理の記述方法をまとめていきます。 マウント直後に実行する ライフサイクルフック マウント直後に実行する はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理…
Vue 3 でComposition API が追加され、ロジック毎にまとめて記述できるようになりました。 そんな Composition API の基本的な使い方をまとめていきます。 HTML は <template>タグ内に記述 変数や関数を使う HTML は <template>タグ内に記述 まずは、HTMLの記述ですが、これはVue</template></template>…
Vue はバージョン３がリリースされていますが、Vue 2 もまだまだ使われているようです。 Vue CLI でプロジェクト作成時も、Vue のバージョンを２にするか３にするか、問われます。 Vue のバージョン３でどんな機能が追加されたのでしょうか。 バージョン３で…
Vue Router Vue Router Vueでは、シングルページアプリケーション (SPA) をつくることができます。 SPAでは、ページは1枚だけです。 しかし、URLをもとに複数の画面を表示したいときもあります。 そんなときに、Vue Router を使ってルーティングを行います。…
Vuetifyで提供されているクラス スペーシング カラー その他 Vuetifyで提供されているクラス Vuetifyでは、スタイリングのためのクラスもいくつか用意されています。 詳しくは、ドキュメントに書いてあります。 (Styles and animations) vuetifyjs.com スペ…
ドキュメントに詳しく書いてある 試してみる ボタン (Button) カード (Card) 前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。 utouto97.hatenablog.com ドキュメントに詳しく書いてある Vuetifyには、ボタン…
Vueでスタイルを設定 Vueで使えるUIフレームワーク Vueでスタイルを設定 Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。 また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともで…
Dockerとdocker-composeでVueプロジェクトを作成 Dockerfile docker-compose.yml Dockerイメージをビルド Vue CLIを使ってプロジェクト作成 コンテナを起動 Dockerとdocker-composeでVueプロジェクトを作成 Dockerとdocker-composeを使って、Vueプロジェクト…
v-forを使ってみる v-forを使ってみる v-forを使って、リストを表示してみます。 まずはリストを準備します。 data() { return { items: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "peach" }, { id: 4, name: "grape" }, { id…
v-for v-forをオブジェクトに使う v-for Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。 例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。 v-forでは、value in list のよ</li>…
v-if v-ifを使ってみる v-if v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。 つまり、v-ifを使うことで、表示する要素を切り替えることができます。 v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。 条件を…
Vue CLI で作ったプロジェクトのファイルを見てみよう カスタマイズしてみる Vue CLI で作ったプロジェクトのファイルを見てみよう まずは、main.jsを見てみましょう。 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('…
Vue CLI Vue CLI で Vue を始める Vue CLI インストール Vue CLI でプロジェクト作成 Vue CLI Vue には、CLIツールが提供されており、それが Vue CLI です。 Vue CLI を使うことで、CLI で Vue プロジェクトの作成等の操作が可能です。 プロジェクト作成時に…
Vue.js Vue.jsの特徴 テンプレート構文 リアクティブシステム Vue.js Vue.jsはシングルページアプリケーションを構築できるWebフレームワークです。 Vue.jsはオープンソースなフレームワークで、コミュニティ主体で開発が進められています。 Vue.jsを実行す…
開発において、テストでは正常に動作するかの確認をします。 テストについて、特にユニットテスト・インテグレーションテストについて簡単にまとめます。 ユニットテスト インテグレーションテスト まとめ ユニットテスト ユニットテスト（単体テスト）は、…
トランザクションとは Railsでトランザクション トランザクションとは トランザクションは処理のまとまりです。 銀行の振り込みがトランザクションの例としてよく挙げられると思うので、ここでも銀行振り込みを例にします。 AさんからBさんの口座への振り込…
対象のN+1問題 N+1問題を解消する 対象のN+1問題 前回、触れたN+1問題を今回は解消します。 utouto97.hatenablog.com ↓で起こっているN+1が対象です。 <% @todos.each do |todo| %> <div> <%= todo.title %> : <%= todo.user.name %> </div> <% end %> N+1問題を解消す…
前回、ORMについてまとめました。 SQLを書かなくてもDB操作を簡単にできて便利なORMですが、 N+1問題という問題があります。 N+1問題とは RailsでN+1問題を試す N+1を確認する N+1問題とは N+1問題とは、ループ処理の中で、1回ずつクエリを発行してしまう問…
ORM (オブジェクト関係マッピング) とは 各言語の有名ORM ORM (オブジェクト関係マッピング) とは ORMとは、Object-Relational Mappingの頭文字をとったものです。 その名前からわかる通り、オブジェクトと関係（関係データベース、RDB）とのマッピングを行…
前回、Babelでトランスパイルを試してみました。 utouto97.hatenablog.com このとき、利用したBabelのバージョンは7です。 $ > ./node_modules/.bin/babel --version 7.14.5 (@babel/core 7.14.6) Babel7では、設定ファイルとして.babelrcファイルだけではな…
Babelとは Babelを使ってみる Babelのインストール presetを設定 トランスパイルする Babelとは BabelはJavaScriptのトランスパイラです。 トランスパイラは、あるプログラミング言語で書かれているプログラムを違う言語もしくは違うバージョンの言語のプロ…
ES modules と CommonJS import/export (ES modules) と require/exports (CommonJS) ES modules と CommonJS JavaScriptで、モジュールという仕組みがあります。 外部ファイルの読み込み/書き出しを行うための仕組みです。 import/exportが、モジュールの仕…
JavaScriptで関数やクラスをimportで読み込む JavaScriptで関数やクラスをexportで書きだす export default を使う JavaScriptで外部ファイルから、関数やクラスを読み込むにはimportを使います。 また、importで読み込みをできるようにするには、exportを使…
Expressでルーティング処理を行う express.Router Expressでルーティング処理を行う ExpressのWebサーバーで、ルーティング処理を行うのはとても簡単です。 次のように初期化したappのgetメソッドやpostメソッドで設定できます。 var express = require('exp…
Expressとは Expressをインストールする ExpressでHello world Expressとは Expressとは、Node.jsのWebアプリケーションフレームワークです。 RailsのNode.js版みたいなイメージです。 ルーティングやリクエストボディのパースなどもできます。 また、ミドル…
はじめに Dockerを使ってhttpサーバー on Node.jsを構築する はじめに 今回は、↓でつくったhttpサーバーをDocker環境で構築します。 utouto97.hatenablog.com 準備としては、Dockerとdocker-composeが入っている前提で進めていきます。 $ docker -v Docker v…
Node.jsでhttpサーバーを秒で建てる GETパラメータを処理する。 Node.jsでhttpサーバーを秒で建てる 前提として、Node.jsがインストール済みであるとします。 では、速攻でhttpサーバーを構築します。 まず、ファイルapp.jsを作成します。 $ touch app.js フ…
JavaScriptはブラウザ上で動作する JavaScriptを実行できるアプリケーションNode.js Node.jsでHello world! JavaScriptはブラウザ上で動作する JavaScriptはHTMLやCSSで記述されたWebページに動きをつけるために、ブラウザ上で実行可能な言語でした。 Chrome…
