JavaScript
JavaScriptのXMLHttpRequestとPromiseの違い
JavaScriptのXMLHttpRequestとPromiseの違いについてまとめました。 Promiseの書き方は次の記事を参考にしてみてください。 JavaScriptのPromiseの使い方・書き方 XMLHt…
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
Vue.js
OpenWeatherMap APIで天気情報を取得する(Vue.js)
OpenWeatherMapのapiで過去、現在、未来予測の天気の情報を取得することができます。 無料から使い始めることができる点でも使いやすいです。 Vue.jsでOpenWeatherMapで天気情報を取得する方法を紹介します。
Vue.js
QuasarのIcon Genie CLIのインストール方法とよく使うオプションについて
QuasarのIcon Genie CLIを使うとアイコン（ファビコン）をデスクトップ、macandroid、iphone用に一括して作成することができます。Icon Genieのインストール方法、アイコン(ファビコン)作成時によく使うオプション、package.jsonの設定方法などを説明しています。
Vue.js
Vue2でタブとモーダルを作成する方法(Bulmaフレームワーク)
Vue2でタブとモーダルを作成する一例を紹介します。 Vue2でBulmaのcssフレームワークを使ってタブとモーダルを作成します。
Vue.js
Firebase+Vue.js(Vue3 Composition API)でログイン/サインアップフォームを作成する
Firebase+Vue.js(Vue3 Composition API)でログイン/サインアップフォーム作成する方法です。 JavaScriptでパスワードベースのアカウントを使用してFirebase認証を行う場合のF…
Vue.js
Vue 3 Composition APIでasync-awaitを使う方法
Vue 3から導入されたComposition APIでasync-awaitを使う方法をまとめました。 async-await自体の使い方は、こちらの記事を参考にしてみてください。 JavaScriptのasync/a…
Vue.js
Vue 3 Composition APIの基本的な使い方
Vue 3から新しく導入されたComposition APIの基本的な使い方をまとめました。 Vue 3 Composition APIの基本的な使い方 Options APIとComposition APIの違い 基本…
Vue.js
Vue.js v2でTODOアプリ(CRUDシステム)を作成する
Vue.jsでTODOアプリ(CRUDシステム)を作成する方法を紹介します。 Vue.jsでTODOアプリ(CRUDシステム)を作成する プロジェクトの構成 プロジェクトの構成は次のようになっているとします。 Proje…
Vue.js
Vue.js v2のslotの使い方
Vue.jsのslotの使い方をまとめました。 slotの基本的な使い方 親コンポーネントApp.vue 親コンポーネントのtemplateタグの中に次のように記述します。 <template> <di…
Vue.js
Vue.js v2のteleportの使い方
Vue.jsのteleportの使い方をまとめました。 teleportの使い方 teleportを使うことで、index.htmlでmountしている場所と異なる場所に指定したコンポーネントを出力することができます。 …
Vue.js
Vue.js v2でリアクションタイマーを作成する
Vue.jsでリアクションの時間を図れるタイマーを作成します。 Vue.jsでリアクションタイマーを作成する 親コンポーネントApp.vueに加えて、 子コンポーネントBlock.vue 子コンポーネントResults.…
Vue.js
Vue.js v2のrouterの基本的な使い方
Vue.jsのrouterの基本的な使い方をまとめました。 routerの基本的な使い方 Vue CLIでrouterをインストールすると、次のようにpackage.jsonのdependenciesに追加されます。 p…
JavaScript
JavaScriptのオブジェクトの操作方法
JavaScriptのオブジェクトが使えるようになると、いろんなことができるようになります。 そもそもオブジェクトはなぜ使うのか、どうやって使うのかを学んでいきましょう。
JavaScript
JavaScriptのbind()、call()、apply()メソッドの使い方と違いについて
JavaScriptのbind()メソッドの基本的な使い方とcall()/apply()メソッドとの違いを具体例とともに紹介します。 また、bind()メソッドにはとても便利な使い方ができるので、実際によく使われるbin…
JavaScript
JavaScriptのEnhanced Objueft Literals
JavaScriptのEnhanced Objueft Literalsについて便利な使い方をピックアップしました。 JavaScriptのEnhanced Objueft Literals まずは下のオブジェクトをざっ…
JavaScript
JavaScirptのラッパーオブジェクト(Wrapper Object)とは
ラッパーオブジェクト(Wrapper Object)について、簡単にまとめました。 ラッパーオブジェクトとは ラッパーオブジェクト(Wrapper Object)とは、プリミティ値を内包するオブジェクトのことです。 デー…
JavaScript
JavaScriptの配列メソッド、どれを使えばいいのか？まとめ
たくさん配列のメソッドがあるけど、どれを使えばいいのか？に対しては、何をしたいのかをまず決める必要があります。 配列のメソッドで「何をしたいのか」をカテゴライズしたので、それに合わせて選択しましょう。 配列のメソッドのカ…
JavaScript
JavaScriptでnpmを利用するメリットと使い始めるために必要な知識
JavaScriptでnpmを利用するメリットと使い始めるために必要な基本的な知識をまとめました。 npmはなぜ必要なのでしょうか？ npmを使うと、とても簡単にscriptタグなどを利用することができるようになります。…
JavaScript
JavaScriptのオブジェクト指向プログラミング(OOP)とは?
JavaScriptのオブジェクト指向プログラミングについての基礎知識をまとめました。 まずは、オブジェクト指向プログラミングとは何かについて、理解を深めた上で、JavaScript特有の点を理解していきましょう。 オブ…
JavaScript
JavaSciriptのプロパティとディスクリプターについて
JavaSciriptのプロパティとディスクリプターについてまとめました。 プロパティとディスクリプター オブジェクトを作成するとプロパティには、値（バリュー）がセットされます。 実は、この値以外にもプロパティの設定値を…
JavaScript
JavaScriptのforEachの使い方、for-ofループとの違い、MapとSetとの組み合わせ
JavaScriptのforEachの使い方とfor-ofループとの違いをまとめました。 また、forEachとmapとsetとの組み合わせ方も紹介します。 for-ofループの使い方については、次の記事を参考にしてみて…
JavaScript
モダンなJavaScript開発の流れと必ず必要になるモジュールについて
モダンなJavaScript開発がどのように行われているのかについてまとめました。 モダンなJavaScript開発の流れ 近年では、一つのjsファイルに記述するのではなく、モジュールごとにファイルを分けて開発を進めます…
JavaScript
JavaScriptのES6のクラス(class)キーワードの使い方と具体例
ES6のクラス(class)キーワードの使い方と具体例を紹介します。 ES6のクラス(class)とConstructor関数の書き方の違い クラスキーワードは、Constructor関数と背景で起こっていることは全く同…
JavaScript
JavaScriptのaddEventListenerで関数に引数をわたす方法(bind)
JavaScriptのaddEventListenerで関数に引数をわたす方法を紹介します。 bind()メソッドを使った方法です。 なぜ失敗するのかを把握することも大事なので、失敗例も合わせて記載します。 addEve…
JavaScript
JavaScriptのスクリプトの非同期読み込み(async, defer)の基礎知識
JavaScriptのスクリプトの非同期読み込み(async, defer)の基礎知識をまとめました。 JavaScriptの非同期読み込み(async, defer)の基礎知識 通常の書き方 通常の書き方は、bodyタ…
JavaScript
JavaScriptでランダムに配色を変えるプログラムの作り方
JavaScriptでランダムに配色を変えるプログラムの作り方を紹介します。 JavaScriptでランダムに配色を変えるソースコード //乱数を作る const randomInt = (min, max) =>…
JavaScript
JavaScriptのasync/awaitの書き方
JavaScriptのasync/awaitの書き方についてまとめました。 JavaScriptのasync/await async/awaitは、Promiseをさらに直感的に記述できるようにしたものです。 Promi…
JavaScript
JavaScriptのPromiseでよく使うfetch()メソッドとJSONについて
JavaScriptのPromiseでよく使うfetch()メソッドとjsonファイルについてまとめました。 Promiseの書き方は次の記事を参考にしてみてください。 JavaScriptのPromiseの使い方・書き…
JavaScript
JavaScriptのsetInterval()とsetTimeout()を使い方
JavaScriptのsetInterval()とsetTimeout()を使い方をまとめました。 setInterval()の使い方 時刻を指定した時間ごとに返したい場合に、使えるのがsetInterval()命令です…
JavaScript
JavaScriptのプロトタイプ継承の具体例(.prototypeと__proto__)
JavaScriptのプロトタイプ継承の具体例を紹介します。 Constructor関数についてはこちらの記事を参照ください。 JavaScriptでclass属性とstyle属性を操作する方法まとめ JavaScrip…