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

前回、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…

JavaScriptのasync JavaScriptのawait JavaScriptのasync JavaScriptで非同期処理を書く方法は、コールバック関数、Promise、そしてasyncがあります。 asyncは関数宣言につけることができ、asyncを付けた関数は非同期で処理されます。 async function f() { …

JavaScriptの非同期処理 非同期処理とコールバック関数 JavaScriptにはPromiseがある JavaScriptの非同期処理 JavaScriptでは、非同期処理を行うことができます。 非同期処理とは、その処理の完了を待たずにほかの処理が実行される処理のことです。 タイマー…

JavaScriptのコールバック関数と高階関数 高階関数とコールバック関数の例 コールバック関数は非同期処理で使われる setTimeoutの例 JavaScriptのコールバック関数と高階関数 JavaScriptでは、関数はオブジェクトの一種である。 そのため、関数の引数を関数…

JavaScriptの変数・定数 varとletとconstの比較 再代入と再定義 varとletとconst 巻き上げについて JavaScriptの変数・定数 JavaScriptにもほかの言語同様に変数と定数があります。 今回は、その変数と定数の宣言方法をみていきます。 変数の宣言はいくつか…

JavaScriptで関数を宣言する function を使う 無名関数 アロー関数を使う JavaScriptで関数を宣言する 関数は、引数をとり、処理を行い、値を返すものです。 イメージはこんな感じ 関数は、何かしらの処理をします。 ここでは、足し算を行う関数を考えます。…

JavaScriptのforEach forEachでインデックスも取得する JavaScriptのforEachから途中で抜ける (breakは使えるのか) JavaScriptのforEachでbreakは使えない breakの代替手段 continueについて JavaScriptのforEach JavaScriptでは、forEachを使ってループを記…

JavaScriptの繰り返し処理 JavaScriptでforを使う for (基本) for ... in ~ for ... of ~ JavaScriptでwhileを使う JavaScriptの繰り返し処理 JavaScriptでは、ほかのプログラミング言語と同様に、forとwhileを使って繰り返し処理（ループ処理）を記述できま…