yasuaki

Nuxt.js

Nuxt.jsの開発環境をDockerで作成する方法!

Nuxt.jsの開発環境をDockerを使用して作ってみました。今回はNuxt.jsを動かすDocker環境の作り方と初期画面の表示までの手順を書いています。Nuxtのバージョンは2.15.8、Vueのバージョンは2.6.14の環境です。N...
Laravel

LaravelのSeederを使用して、CSVまたはJSONでデータを登録する2つの方法!

LaravelのSeederでデータを登録するときに、CSVまたはJSONを使用してデータ登録をする方法を書いています。CSVデータファイルまたはJSONデータファイルを使用して登録する2つのサンプルコードを載せています。Laravelのバ...
Unity

Unity 2Dでキャラクターを上下左右に移動する方法!(キャラクター反転)

今回はUnity 2Dでキャラクターをキーボードを使用し、上下左右に移動させてみます。それと、右と左を押した時には、キャラクターの画像を反転させて押した方向を向くようにします。検証に使用しているUnityのバージョンは’2021.1.19f...
JavaScript

JavaScriptで画像をドロップして画面に表示する(ondrop, ondragover)

JavaScripでondropとondragoverを使用した時にちょっとハマったので、今回はこの2つのイベントについてまとめてみました。最初にJavaScriptのondropとondragoverのイベントの説明を簡単にします。画像を...
Vue.js

Vue.jsのv-if, v-else, v-show(条件付きレンダリング)の使い方!

今回はVue.jsのv-if,v-elseとv-showについて書いています。v-if,v-elseとv-showの使い方について、簡単に説明した後にサンプルコードを載せていますので、確認してみてください。載せているサンプルコードはVue....
JavaScript

JavaScriptのFetchAPIで取得した画像・PDFを表示させる方法!

JavaScriptでFetch APIを使用して、画像やPDFを取得した後にブラウザに表示する方法について書いています。簡単なサンプルコードを用意して試してみました。Fetch APIでファイルを取得した後にwindow.openを使用し...
JavaScript

JavaScriptの配列操作まとめ!(追加 / 削除 / 取得 / 結合 / 判定)

JavaScriptで配列を使うときに、よく使いそうな配列操作をまとめてみました。配列の宣言から始まって、追加・削除・取得・結合・判定について書いています。配列の宣言をするJavaScriptで配列を作るには、角括弧([])を使用するか、A...
JavaScript

JavaScriptで画像ファイルをbase64文字列に変換する方法!

今回はWebフォームで画像ファイルを選択した後に、JavaScriptを使用してBase64形式に変換する方法を書いています。実際に画像をフォームに設定して変換する、簡単なサンプルを作ってみました。JavaScriptで画像をbase64文...
Vue.js

Vue.jsのv-bindとは?使い方とサンプルコード4つ!

今回はVue.jsのv-bindについて書いています。v-bindについて説明した後に、サンプルコードを書いているので、確認してみてください。コードはVue.jsのバージョン3(Composition API)で試してみました。v-bind...
React

React × Bootstrap5でTodoアプリを作成する方法!(サンプル・解説付き)

今回はReactでTodoアプリを作成してみました。create-react-appを使用して、プロジェクトを作成した後に、Todoアプリを作成していきます。create-react-appはReactのプロジェクトを簡単に作成してくれるツ...
JavaScript

JavaScriptのif文で変数・値を判定した場合の挙動11個

JavaScriptのif文に変数や値を渡した時の判定がどうなるか、挙動を11個確認してみました。空の配列やオブジェクト、undefinedなどを、if文に入れてみて判定がどうなるか試してみました。最後に試した内容を表にまとめています。nu...
JavaScript

JavaScriptのArray.mapの使い方!(forEachとの違いは?)

JavaScriptのmapメソッドの使い方について、書いています。配列からmapメソッドを呼び出すことで、ひとつずつ要素を取り出して、新しい配列を作成します。前回はforEachについて、こちらに記事を書きました。forEachと同じよう...