React, Vue.js, JavaScriptでdebounceの仕組みを理解| アールエフェクト
JavaScriptのdebounceの仕組みがよくわかっていないで理解したいという人向けに PureなJavaScript(Vanilla JavaScript) だけでなくReact, vue.jsではどのようにdebounceを利用することができるのか解説しています。lodashライブラリのdebounceを利用すれば簡単に設定できますが本書では自作のdebounceを作成することでdebounceの仕組みを理解してReact, Vue.jsでの設定方法を確認していきます。lodashライブラリを利用した場合の設定方法も合わせて説明を行なっています。 作成するdebounce関数はReact, vue.jsで共通なのでReact, Vue.jsで設定を行う前にPureなJavaScript(Vanilla JavaScript)でコードの説明と動作確認を行います。 Debounceと
React Router v6 はじめでもわかるルーティングの設定方法の基礎 | アールエフェクト
複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の
vue-cliで作成したプロジェクトでVue Routerを設定 | アールエフェクト
本文書ではvue-cliコマンドを利用して作成したvueプロジェクトでのVue Routerの設定手順について説明を行なっています。最新のvue-cliのバージョンを利用するとVueのバージョンを選択することができます。本文書では最新バージョンのVue CLI v4.5.11で動作確認を行っているためVue2, Vue3の両方で動作確認を行っています。 Vue 2, Vue 3の両方の環境を使って説明を行っていますが本文書内でのバージョン間の違いはVueとRouterのインスタンス化に関するコードが記述されているmain.jsとrouter/index.jsファイルの2つとコンポーネントのroot要素が必ず1つという制限がVue 3からなくなったことです。Vue Routerのルーティングの設定については違いはありません。 Vue Routerを利用することでページを移動する際にページの再
これならわかるVue3 Composition APIでのコード再利用の基礎 | アールエフェクト
Vue 3ではコードを記述する方法として大きくわけて2つの方法があります。従来の方法であるOptions APIとVue 3から利用することができるComposiont APIです。本文書ではComposition APIの利点の一つであるコードの再利用をどのように行うかを確認していきます。再利用できそうな機能を取り出すことで同じコードを何度も記述する必要がなくなり効率的にコードを記述することができる上他のプロジェクトでも利用することができます。本文書を読み終えるとcdnのVue 3を使ったComposition APIの記述方法とComposition APIではどのようにコードの再利用を行うのかの基本を非常にシンプルな例から理解することができます。cdnを利用しているのでVue環境を構築することなく動作確認も簡単に行うことができます。Composition APIではVue 2の時より
Vue 3のComposition APIでTodoリスト作成 | アールエフェクト
Vue 2(vue.jsのバージョン2)で作成したコードをVue 3(バージョン3)の新機能であるVue Composition APIを使用した方法に書き換えを行うことでVue Composition APIの記述方法を確認していきます。 書き換えに利用するのは頻繁にプログラミングの例で活用されるTodoリストアプリケーションです。身近で馴染みのあるコードを利用することでComposition APIではどのような書き換えが必要なのかを短時間で理解することができます。 Vue 3はまだリリースされていないためVue 2のComposition APIを追加でインストールします。またVue 3でもこれまでのようにCompositon APIを利用しない記述も可能です。これまでの記述方法をoptions(API or based)と呼んでいます。2020年8月ではVue CLIをバージョンア
Javascript, Vue.jsでスクラッチから自作カレンダーアプリケーション作成 | アールエフェクト
前回の文書通りに進めていくと下記のカレンダーをブラウザ上に描写することができるようになります。”前の月”、”次の月”ボタンを押すことで表示月とは異なる他の月のカレンダーを表示することができますがカレンダーの外枠だけでカレンダー上へのイベント表示やイベントの入力は行うことができません。 作成したカレンダー カレンダーの外枠では自作のカレンダーを作成したことにはなりません。カレンダーの外枠に加えて今回の記事ではカレンダーの必須機能である2つの機能を実装を行っていきます。 前回作成したコード 前回の記事で作成したCalendar.vueファイルの中身は下記の通りです。 <template> <h2>カレンダー{{ currentDate }}</h2> <button @click="prevMonth">前の月</button> <button @click="nextMonth">次の月</
本当にこれだけ？JavaScript+vue.jsでカレンダー作成 | アールエフェクト
ブラウザ上でカレンダーを使ってスケジュールを管理したい場合、ネット上に公開されているカレンダーライブラリを利用するかGoogle Calendarを利用するしか選択肢がないって決め付けていませんか？ 自作のカレンダー作成はJavaScriptの入門者の人にとってハードルが高いように思うかもしれませんが作り方のベースさえ理解することができれば実はそれほど難しいものではありません。本文書ではJavaScript+Vue.jsを利用してスクラッチから自作カレンダーを作成していきます。 自作のカレンダーの作成方法を理解することができればGoogleカレンダーやライブラリにはない自分だけのオリジナルの機能をもったカレンダーアプリケーションを作成することができます。 本文書ではカレンダーを作成する際にvue.jsを利用していますが、vue.jsは必須ではありません。本文書でカレンダー作成の基本がわかれ
簡単な例で始めるVue3でTypeScript入門 | アールエフェクト
以前はVueのプロジェクトの作成する際はVue CLIを利用することが推奨されていましたが2022年2月からVue3がデフォルトのバージョンとなりVue CLIはメンテナンスモードに入りました。新規にプロジェクトを作成する場合はViteを元にしたnpm install vute@latestコマンドを利用することが推奨されています。 本文書では現在推奨されているViteベースのプロジェクト作成ツールとVue CLIを利用した手順について説明を行っています。 環境構築(Viteベース) Vue.jsプロジェクトを作成するためにnpm init vue@latestコマンドを実行します。npm init vue@latestを実行すると裏側ではcreate-vueが実行されます。 % npm init vue@latest create-vueではプロジェクト名とプロジェクトに追加する機能を聞
【TypeScript入門】TypeScriptを実践で活用したい人向けの基本を徹底解説 | アールエフェクト
TypeScriptを学習する前の人の中にはTypeScriptがJavaScriptの開発には必須な知識だということはわかってはいるものの以下のような疑問を持っている人は多いのではないでしょうか。 TypeScriptがなぜ必要なのか TypeScriptを習得するためにはJavaScriptとは異なる言語を一から勉強をしなければならないのか TypeScriptは難しいか そのような疑問を持っている人がTypeScriptを実践で活用できることを目標に本文書を作成しています。 TypeScriptとは TypeScriptはJavaScriptにType(型)を扱う機能が追加されたプログラミング言語です。JavaScriptとは異なる言語ではなくType(型)に関すること以外のコードについては通常のJavaScriptと同様の構文を使って記述することができます。TypeScriptはJ
【vue.js】 Vuetifyで簡単ページネーション(Paginations) | アールエフェクト
Vuetifyのコンポーネントを利用すると見栄えのいいページネーションを簡単に設置することができます。Vuetifyのマニュアルには、v-paginationコンポーネントによるページネーションのタグは記述されていますが、どのようにvue.js上で設定を行い動作させるかについては説明はありません。 本文書では、最も簡単だと思われる方法でVuetifyのページネーションの設定方法を詳細に説明しています。Vuetifyのページネーションに興味がある人はぜひ参考にしてみてください。 vue.jsとVuetifyの環境について 本文書ではページネーションに焦点を当てているので、vue.jsとVuetifyの環境構築手順については説明を行なっていません。下記の文書の前半部分を参考に環境構築を行なってください。またVuefityの設定方法についても説明を行なっています。 ページネーションの設定 Vue
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
