【基本編】Jestを利用してVue コンポーネントをテストする方法(Unit Test) | アールエフェクト
特に個人で開発を行っているとテストを実施することでコードの品質を高められることはわかってはいるものの時間もかかりそうなので時間がある時にやろうとテストを後回しにしているという人も多いのではないでしょうか。 本文書ではVue CLIで作成したVue 3環境下でのVueのコンポーネントのテスト方法について説明を行っています。テストにはJavaScriptのテストフレームワークのJestとVue Test Utilsを利用しています。Jestはテストフレークワークの中でも人気が高くFaceBookによって開発されました。Vue Test UtilsはVueの公式のテストツールでVueのアプリケーションをテストするために必要な関数が含まれています。Vue.jsのビギナーの人にも理解してもらえるようにシンプルなコードを利用して動作確認を行っていきます。 Jestというテストフレームワークを利用するこ
【React Redux初心者向け】Todoリスト作成を通してしっかり学ぶRedux | アールエフェクト
ReactのReduxの基礎は理解できていると思うのでより実践的なコードでReduxの理解を深めたいという人向けにTodoリストのアプリケーションを作成を通してReduxの説明を行っています。useState, useSelector, useDispatchなどのReact Hooksを利用して作成しておりconnectやmapStateToPropsは利用していません。 作成するTodoリストのアプリではTodoリストの追加、削除、Todoリストのステータス変更(未完了→完了）の機能を持ちます。 環境の準備 Todoリストのアプリケーションを構築する前にReactプロジェクトの作成を行います。 % npx create-react-app react-todo-list 作成したプロジェクトディレクトリに移動して、npx startコマンドを実行します。Reactが起動するか確認してく
アールエフェクト | IT初心者スキルアップ応援ブログ
IT初心者がつまずきやすい事柄を中心に簡単なコードとわかりやすい解説でスキルアップを応援します。
入門者必読、vue.jsの状態管理Vuexがわかる | アールエフェクト
本文書ではできるだけシンプルな例を通してVuexの説明を行っていきます。Vuexを使った経験がないという入門者の人また下記の図がわからないという人を対象にしています。Vuexが難しいなと感じている人がいるとすれば用語がこれまでのvue.jsよりも増えていることまた記述方法が長かったり短縮形によって複数の書き方があることが原因だと思います。一度理解してしまえば決して難しいものではないので安心して読み進めてください。 vuex diagram Vue3では新たに状態管理のライブラリとしてpiniaが登場しました。Vue3で新しいプロジェクトを作成する場合にはpiniaを利用することが推奨されています。
React + Tailwind CSS+APIで天気アプリケーション作成 | アールエフェクト
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 ４つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
vue.jsを使ってaxiosを学ぶ | アールエフェクト
CDNを利用するとブラウザのコンソールに”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.”メッセージが表示されます。 Vue2の場合 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>vueを使ってaxiosを学ぶ</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script s
vue.jsコンポーネントの基礎 | アールエフェクト
コンポーネントとは 企業HPやブログのサイトを見るとヘッダー、フッター、メイン、サイドバーというようにいくつかのパーツに別れて構成されています。特にヘッダーやフッターなどはすべてのページでも同じ内容を表示する場合が多くすべてのページで同じ内容を何度も何度も記述することは非効率です。そのためヘッダー用のパーツ、フッター用のパーツを個別に作成し、すべてのページからパーツを読み込んで共有化することが一般的です。可能なかぎり構成要素をパーツ化し共有化することができれば開発、メンテナンスの効率が格段に上がります。vue.jsではコンポーネントという機能を使ってパーツ化し再利用することで効率よく開発、メンテナンスを行うことができます。 コンポーネントの設定 コンポーネントの作成 コンポーネントを利用するためには、コンポーネントを定義して登録する必要があります。 Vue.component(コンポーネン
簡単な例で始める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ではプロジェクト名とプロジェクトに追加する機能を聞
Nuxt.jsでvue-chart.jsを使って簡単グラフ作成 | アールエフェクト
npmコマンドを利用してvue-chart.jsとchart.jsパッケージをインストールします。vue-chart.jsとchart.jsの2つをインストールする必要があります。 $ npm install vue-chartjs chart.js --save Barグラフの設定 コンポーネントを作成 インストールが完了したら棒グラフを描写するコンポーネントを作成します。名前はBarChart.vueとします。 <script> import { Bar } from 'vue-chartjs' export default { extends: Bar, data(){ return { chartdata: { labels: ['January', 'February'], datasets: [ { label: ['Data One'], backgroundColor: '
vue.jsを使ってテーブルのセル更新 | アールエフェクト
Vue.jsの入門者の方にもわかるようにvue.jsを利用したシンプルな方法で更新可能なセルの設定方法を説明しています。セルを更新するvue.js側のファイルはcdnを使用するためVueのプロジェクトの作成など特別な環境は必要がありませんが、テーブルデータを取得するために外部リソースを準備する必要があります。 バックエンドサーバについて vue.jsを使ってテーブルを描写する際、通常はテーブルのデータはデータベースや外部サービス上に保存されているため外部リソースからデータを取得する必要があります。 本文書では外部リソースであるバックエンドサーバにLaravel8を利用しています。vue.jsからのデータ取得/更新/削除処理を受けつけることができればバックエンドがLaravelである必要はありません。Laravelを利用していない/利用しない場合は、この章をスキップして次の章に進んでください
シンプルで使ってみたいWYSIWYGエディター Editor.js | アールエフェクト
本文書で今回紹介するのはNote, Medium, WordPressのGutenbergのようなブロックスタイルのWYSIWYGエディターのEditor.jsです。シンプルで使いやすそうだったのでどのように設定を行うのか確認しました。 動作確認はMacで行っていますがcdnで利用することができるため動作確認を簡単に行うことができます。 ブロックエディターはWordpressのプラグインにも利用されている Ediror.jsとは Editor.jsのページにはNext generation block styled editorと記述されている通りブロックスタイルのエディターです。 Editor.jsは主に下記の3つの特徴的な機能を持っています。 一つ目の特徴はブロックスタイルエディターということでヘッダー、パラグラフ単位にブロックが割り振られ、ブロック毎に編集を行い、ブロッグ毎に位置の入
Nuxt.jsのAuth認証の設定(バックエンド設定含む) | アールエフェクト
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
