Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
LaravelのQueue(キュー)を使いこなすための設定 | アールエフェクト
以前紹介した下記の文書ではQueueの基本設定を確認しました。今回は前回の文書で動作確認を行なっていないQueueの設定についてもう少し詳細に説明を行なっています。 Laravel環境は下記の文章で構築したものを利用しています。ユーザ登録後に送信するWelcomeメールのジョブを利用してキューの動作確認を行なっていきますで下記の文書を先に読むことをお勧めします。 ジョブの実行を遅らせる キューに入れたジョブの実行を遅らせたい時、delayメソッドを利用することができます。 下記ではジョブがキューに入ってから3分後に実行できるように設定を行なっています。 SendWelcomeMail::dispatch($user)->delay(now()->addMinutes(3)); ユーザがユーザを登録を行なってから3分後にキューに入ったジョブが処理されました。Processingのメッセージが
Laravel PassportのAPI認証を理解する | アールエフェクト
Laravelでアプリケーションを構築した経験がある人ならログイン認証機能を利用することでLaravelへのユーザのアクセス制限を行えることは知っているかと思います。しかし、Laravelの外側のアプリケーションからアクセス制限のかかっているLaravel内のリソースにアクセスするためにはどうしたらいいのでしょう。そんな疑問を解決してくれるのがLaravel Passportです。 Laravel Passportを使用するとLaravel上でOAuth2.0に沿った形でAPIの認証機能を短時間で実装することができます。 OAuth2.0に沿った形でAPIの認証機能 といってもそれが何かわからないという人が大半だと思います。簡単に言えばLaravelの外側にあるアプリケーションからアクセスしたいリソースに対してアクセストークン(文字列)を使って管理するための仕組みです。 アクセス制限の行わ
Laravel Breezeでマルチ認証(Multi Authentification)の徹底解説 | アールエフェクト
Laravel8よりLaravelの認証機能を利用する際に大きく分けてJetStream、Laravel BreezeとLaravel UIを利用した3つの方法があります。JetStreamはさらにInertia.js、Livewire、BreezeにはVue、React、Alpine.jsなどフロントエンド側で利用する技術が異なります。JetStream, Breezeどちらでも特別な設定を行うことなく認証機能を実装することができます。しかし1つのLaravelアプリケーションの中でマルチ認証を実装したい場合は追加での設定が必要となりMiddlewareやGuardなどの知識が必要となります。すべての組み合わせでマルチ認証の設定方法について説明をすることは難しいので本文書ではLaravel BreezeとInertia.js(Vue)を利用した方法での説明を行っています。パスワードリセッ
Laravel サービスコンテナの理解を深める | アールエフェクト
サービスというものははっきりしたと思いますが、コンテナはまだまだ曖昧だと思いますが先程説明したサービスとコンテナのイメージ(入れ物）を念頭においてサービスコンテナを理解していきましょう。 サービスコンテナの使い方 サービスコンテナに入れる サービスコンテナの中にはサービスが複数入っているという話をしました。そのサービスコンテナには追加でサービスをいれることができます。サービスコンテナの中に サービスを入れるためにbindメソッドを利用します。 bindメソッドを使ってサービスコンテナにサービスを入れてみましょう。 サービスコンテナの中身はヘルパー関数のapp()で確認することができます。bindメソッドを実行する前にweb.phpファイルの中でdd(app())を実行してサービスコンテナの中身を確認しておきます。 下記がapp()の結果です。bindを使ってサービスコンテナへの追加を行うと
Laravel サービスプロバイダーついに理解できた | アールエフェクト
サービスプロバイダーとは サービスプロバイダーの役目はサービスコンテナへのサービスの登録です。 Laravelではサービスコンテナに登録されているサービスを利用してアプリケーションの開発を行なっていきます。サービスコンテナはサービスを入れる入れ物の役割をもっており、サービスを利用するためには、サービスコンテナに事前にサービスを登録しておく必要があります。そのサービスを登録する役目を持つものがサービスプロバイダーです。 サービスプロバイダーを理解 サービスプロバイダーを登録する場所と登録したサービスの利用方法の確認、最後に自分でサービスプロバイダーを作成することを通してサービスプロバーダーの理解を深めていきます。 サービスプロバイダーの登録場所 まずはサービスプロバイダーを使ったサービスの登録がどこで行われているのかコードを見ながら確認していきましょう。 ブラウザからアクセスがあるとpubi
【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門 | アールエフェクト
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
