約半年ほど学んできて WEBの勉強を始めて半年以上が経ちました。 そこで一番考えたことは、「何をどの順で学べばいいか？」ということです。 私は独学で、本も買わずにネットの情報を拾いつつ手を動かして勉強をしてきました。 その第一歩の目標としては、バ…

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

Firebaseって聞いたことはありますか？ ウェブアプリを開発するのに非常に役立つサービスが勢揃いのクラウドサービスです。 Firebaseとは Firebaseが提供するサービス Firebaseとは Firebaseとは、Googleが提供するBaaS (Backend as a Service) で、 Webアプ…

TypeScript きほんの「き」 TypeScriptを書く上でとりあえずこれを知っておけばいいというのをまとめてみました。 変数に型をつける 配列の型宣言 自分で型を宣言する 変数に型をつける TypeScriptは、JavaScript + 型 みたいなものです。 utouto97.hatenabl…

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には、ボタン…

Vuetifyを使ってみる 環境はVue 2 Vuetifyをインストールして使ってみる Vuetifyを使ってみる 環境はVue 2 今回は、Vuetifyを導入していきます。 VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。 github.com 公式のドキュ…

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 でカウンタコンポーネントを作る コンポーネントで使うデータを宣言 コンポーネントで使うメソッドを宣言 カウンタ完成 Vue でカウンタコンポーネントを作る カウンタコンポーネントを作成していきます。 ファイルは、src/components/Counter.vueとしま…

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を実行す…

シングルページアプリケーション (SPA) とは シングルページアプリケーション (SPA) とは シングルページアプリケーション (Single Page Application, SPA) とは、単一のページで動作するWebアプリケーションのアーキテクチャです。 単一のページで動作する…

Webサーバー Webサーバー Webサーバーは、ユーザー（クライアント）からのリクエストを受けて、処理を行い、結果を返します。 結果としては、HTML,CSS,JSなどのファイルが返されてます。 ブラウザからインターネット上のWebページにアクセスした場合、Webペ…

CORS RailsでCORSを設定する CORS CORSは、別のオリジンからのリクエストを許可するかどうかを決める仕組みです。 utouto97.hatenablog.com RailsでCORSを設定する RailsでCORSの設定をします。 RailsでAPIサーバーを構築したときに、別のオリジンからのリソ…

Origin （オリジン） 同一生成元ポリシー CORS Origin （オリジン） Origin （オリジン）は、URLのスキーム、ホスト、ポートの組み合わせで決まります。 これら（スキーム、ホスト、ポート）がすべて同じときのみ、同じオリジンであるといえます。 スキーム…

Hot Module Replacement (HMR) webpack-dev-server Hot Module Replacement (HMR) Hot Module Replacement (HMR) は、ファイルの更新を自動でブラウザに反映する仕組みです。 HMRでは、ページ全体を更新することなく、変更したモジュールのみを置き換えるこ…

webpackとは 「webpackはなぜ必要？」 「webpackとBabelの違いは？」 webpackとは webpackとは、JavaScriptのモジュールバンドラです。 モジュールバンドラは、複数のモジュールをまとめるものになります。 webpackでは、JavaScriptを主に、HTMLやCSS、画像…

dig コマンド と nslookup コマンド 127.0.0.1 localhost /etc/hosts dig コマンド と nslookup コマンド digコマンドもnslookupコマンドも、DNS問い合わせを行うコマンドです。 digコマンドとnslookupコマンドで、google.comをDNS解決してみます。 dig コマ…

Domain Name System (DNS) Domain Name System (DNS) Domain Name System (DNS) は、ドメイン名を管理するための仕組みです。 インターネット上で、ほかのマシンにアクセスするとき、宛先は「IPアドレス」によって指定します。 しかし、数字の列挙であるIPア…

RESTful API REST REST APIの特徴 URIでリソースを指定 HTTPメソッドで処理を指定 REST APIの例 RESTful API RESTful API (REST API) は、RESTに基づいたAPIのことです。 REST RESTとは、REpresentational State Transferのことで、ロイ・フィールディング氏…