サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
reffect.co.jp
複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の
業務でExcelを利用していますか?もしPythonでExcelと連携を行い、プログラムを利用して操作できれば業務の効率が上がること間違いなしです。PythonはWindowsでも簡単に利用することができるプログラム言語なので普段利用しているパソコンでもすぐに実行することができます。 本文書ではPythonのデータ解析のライブラリであるpandasを利用してExcelの読み込み方法を確認していきます。ExcelはCSVファイルとは異なり複数のシートを含めることが可能なので複数のシートがあるExcelファイルからのデータの取得方法についても説明しています。Excelからデータ取得後の処理についてはExcelから取得した後にどのように加工するのか各自の業務やアプリケーションに依存するのでデータ取得後のデータの処理方法については本文書では解説を行っていません。 実際の業務では取引先から送られてき
Node.jsの基礎 JavaScriptは本来、HTMLやCSSで構成された静的なHTML文書に動きを加えるために利用され、ブラウザ上で動作させることを目的にしたプログラミング言語です。ブラウザ上だけではなくサーバサイドでもJavaScriptを動作させるために登場したのがNode.jsです。Node.jsはJavaScriptに関連するプログラミング言語ではなくサーバサイドでJavaScriptを動かしたい場合に利用するJavaScriptランタイムです。JavaScriptに限らずどの言語でもその言語で記述したコードを動かすにはコードを理解して実行する環境が必要です。JavaScriptの場合はその実行環境がNode.jsにあたります。Node.jsによってブラウザ以外でもJavaScriptを実行することができます。 サーバサイドで動作すると言われると動作を行うためにメールサーバや
Reactを利用してサーバからデータを取得する際に利用する関数やライブラリは何かと聞かれた場合にすぐに思いつくのはfetch関数やaxiosライブラリではないでしょうか。 React QueryはReactのData Fetchingライブラリでサーバからデータを取得する際に利用することができます。サーバからデータを取得するだけならfetch関数とaxiosを利用することで実現できるのでReact Queryを理解するためにはfetch関数とaxiosが持っていない機能が何かを理解する必要があります。 React Queryの機能について動作確認を行う前にReact Queryをドキュメントを確認しておきましょう。説明では”React Query makes fetching, caching, synchronizing and updating server state in Reac
Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな
Stripeを導入するためにStripeのドキュメントを確認したけれどどこから何を始めていいのかわからなかったという人を対象にStripeを導入するために必要な組み込み方法を説明しています。Stripeでオンライン決済といってもプログラミングの得意な人向けの方法から全くプラグラミングがわからない人でもお手軽に導入できる方法まで幅広い方法が提供されています。その上、プログラミングを使って組み込む方法も一つではなくシチュエーションによって利用するAPIが異なるため混乱する人も多いと思いますのでぜひ参考にしてみてください。Stripeの料金体系や成り立ちなどの説明はなく組み込み方法を中心にStripeの基本的な仕組みを理解したい技術者向けの内容になっています。 アカウントの作成 Stripeを利用するためにはStripeのアカウントを作成する必要があります。テスト目的で利用する場合は名前、メール
本文書はJestとVue Test Utilを利用したVue.jsでのテストに関する2回目の記事で2回目となる今回はテスト入門者にとって少しわかりずらいStub(スタブ)やMock(モック)、Shallow Mountに注目して説明を行っています。 Stub, ShallowMountとMountの違いを説明した後にVue.jsのHTTPリクエストで頻繁に利用されるaxiosのMock(モック)の方法についても説明を行っています。コンポーネントの単体テストでは、axiosライブラリやfetch関数を利用した外部へのアクセスを伴う機能を実装している場合モックを利用することで外部へのアクセスを行うことなくコンポーネントのテストを実施することができます。 Vueでのテストを実施したまたは学習した経験がない人であれば先に前回公開した”【基本編】Jestを利用してVue コンポーネントをテストする方
ブラウザ上でカレンダーを使ってスケジュールを管理したい場合、ネット上に公開されているカレンダーライブラリを利用するかGoogle Calendarを利用するしか選択肢がないって決め付けていませんか? 自作のカレンダー作成はJavaScriptの入門者の人にとってハードルが高いように思うかもしれませんが作り方のベースさえ理解することができれば実はそれほど難しいものではありません。本文書ではJavaScript+Vue.jsを利用してスクラッチから自作カレンダーを作成していきます。 自作のカレンダーの作成方法を理解することができればGoogleカレンダーやライブラリにはない自分だけのオリジナルの機能をもったカレンダーアプリケーションを作成することができます。 本文書ではカレンダーを作成する際にvue.jsを利用していますが、vue.jsは必須ではありません。本文書でカレンダー作成の基本がわかれ
レンタルサーバーの【エックスサーバー】でLaravelを利用できる機会をもらったのでLaravel8をXserverにインストールをして動作確認をしていきます。初めてLaravelをサーバ上で動作させる人のために手順を省かずできるだけ詳細に説明を行っている完全版です。 Xserverの利用目的は間違いなくWordPressだと思いますが、コマンドラインを使えばLaravelのインストールも行うことができます。Xserverでコマンドラインを使えることを知らない人もいるかもしれませんのでLaravelのインストールだけではなくSSH設定の手順も含めて説明を行っています。Laravel8をインストールしますがLaravel5~Laravel7もインストールすることはできます。現在のLaravelの最新バージョンはLaravel10です。Laravel10でもXserverにインストールを行いサ
関連する記事 2024/08/28 2024/08/29 【React】リッチテキストエディタSlate Editorを基礎からマスター 2024/08/09 2024/08/19 【dnd-kitの基本的な使い方】Reactで簡単にテーブル行の並び替え 2024/07/11 2024/07/16 shadcn/uiにChartが登場 2024/07/11 2024/07/11 React NativeのAuthentication(認証)にClerkを使う 2024/07/10 2024/07/16 React NativeのExpo Routerで設定できる基本的なナビゲーションを理解 2024/07/04 2024/07/04 React NativeからローカルのSQLiteデータベースを操作する方法を確認 2023/12/20 2023/12/20 TanStack Router
cURLはAPIだけではなく、さまざまな用途に使用できる汎用性の高いPHPのライブラリです。cURLを理解できればPHPのプログラムからクラウドサービスのデータにもAPIを通して簡単にアクセスできます。cURLを利用した経験がない人はぜひこの機会にcURLをマスターしてください。 PHPで記述したコードを動作させるためにはPHPのプログラムを動作させるための環境が必要です。環境を構築しない状態でWindowsパソコンでphpのプログラムを記述しても動作しないので注意してください。 PHPで書かれた実際のプログラムコードを見ながら上記の流れを確認してみましょう。 <?php /* curlセッションを初期化する */ $ch = curl_init(); /* curlオプションを設定する */ curl_setopt($ch, CURLOPT_URL, "http://www.google
Reactプロジェクトの作成 macOS上でReactプロジェクトを作成するためにNode.jsのインストールが必要となります。Node.jsインストールを行ってからReactプロジェクトの作成を行ってください。 npx create-react-appコマンドを利用してReactプロジェクトを作成します。コマンドの後ろにはプロジェクト名を指定します。プロジェクト名には任意の名前をつけてください。ここではreact-fierebase-authとしています。 % npx create-react-app react-firebase-auth Firebaseの初期設定 FirebaseのAuthenticationの機能を利用するためにはFirebaseでユーザアカウント登録を行う必要があります。もしアカウントを持っていない場合は、Firabaseのページでユーザ登録を行なってください。
top:0; right:0; bottom:0; left:0;での違い 最初にtop:0; right:0; bottom:0; left:0;を設定し、positionのfixed, absoluteでどのような違いがあるか確認してみましょう。 CSSのpositionプロパティをfixedに設定し、top:0; right:0; bottom:0; left:0, backgroudColorを設定するとブラウザの画面全体に背景色が広がります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fixed, absoluteの違い</title> </h
本サイトでもLaravelアプリケーションからテストメールの送信の動作確認をする時に毎回利用しているMailTrap。無料でユーザ登録もでき手間のかかる設定もないのでテストの動作確認には最適なサービスです。Laravel以外のアプリケーションでも利用可能なサービスですがLaravelを利用することを前提に説明を行っています。本文書ではMailTrapサービスへのユーザの登録方法からLaravelでの使用方法について説明していきます。 Mailtrapとは Fake smtp testing server. Dummy smtp email testingとホームページで説明されているようにフェイクのSMTPテストサーバを提供するサービスです。アカウント作成後に提供される情報を使ってSMTPの設定を行います。SMTPの設定完了後、アプリケーション内で送信したメールはすべてMailtrap上の
React Routerは複数のページを持つReactアプリケーションを構築する際に利用されるライブラリです。複数のページが存在するということはブラウザからアクセスするためのURLが複数存在することになります。レイアウトなどの共通部分もありますがページ毎に異なるコンポーネントで構成されているためURLとコンポーネントを紐づける仕組みが必要となります。その役割を担うのがReact Routerです。React Routerを利用することで例えばブラウザからURLの/aboutにアクセスするとAboutコンポーネントの内容を表示、別のURLである/contactにアクセスするとContactコンポーネントの内容を表示させるといったことが可能になります。 また通常のHTMLでのページ間の移動ではページを移動する度にブラウザからサーバにリクエストを送り、サーバからHTMLを受け取りページ全体を描写
WEBページのレイアウトを整えて行く上で絶対に理解しておきたいのがCSSのpositionプロパティです。インタラクティブなUI(ユーザインターフェイス)を持つアプリケーションを作成したい場合は必須な知識で使用頻度も極めて高いです。初めてpositionプロパティを学び人もまだ完璧に理解していない人も基礎からしっかり学んでいきましょう。読み終えた時には他の人にも説明できるぐらいCSSのpositionの理解が深まっているはずです。 cssのpositionプロパティの値 cssのpositionプロパティを利用することで要素をHTMLに記述した場所ではなく自分の表示させたい場所に表示させることができます。しかし細かなルールが決められているのでそのルールを理解しておく必要があります。 positionプロパティを完全に使いこなすためには、下記の4つの値のそれぞれの動作をしっかり理解しておく必
特に個人で開発を行っているとテストを実施することでコードの品質を高められることはわかってはいるものの時間もかかりそうなので時間がある時にやろうとテストを後回しにしているという人も多いのではないでしょうか。 本文書ではVue CLIで作成したVue 3環境下でのVueのコンポーネントのテスト方法について説明を行っています。テストにはJavaScriptのテストフレームワークのJestとVue Test Utilsを利用しています。Jestはテストフレークワークの中でも人気が高くFaceBookによって開発されました。Vue Test UtilsはVueの公式のテストツールでVueのアプリケーションをテストするために必要な関数が含まれています。Vue.jsのビギナーの人にも理解してもらえるようにシンプルなコードを利用して動作確認を行っていきます。 Jestというテストフレームワークを利用するこ
突然ですがReactではReduxを利用することですべてのコンポーネントからアクセス可能なデータを一箇所で一元管理することができます。 アクセス可能なデータを一元管理??Reactの初心者の方であればデータを一元管理するということがどういうことを言っているのかも理解し難いかもしれません。Reactでは複数のコンポーネントを構成してアプリケーションを構築するためコンポーネント間でデータの受け渡しが必ず必要になります。コンポーネント間でデータを渡す場合は親コンポーネントから子コンポーネントへpropsを使って行います。しかしpropsでは親子関係のないコンポーネント間ではデータを渡すことができません。また親と子のみの関係であればpropsを一度渡すだけでいいのですが子コンポーネントにさらに子コンポーネントがあるとpropsをバケツリレーのように渡していなかければなりません。どのコンポーネントか
トークンの作成方法の確認 トークンの発行はcreateTokenメソッドを利用します。createTokenメソッドは先ほどUser.phpファイルに追加したHasApiTokensトレイトの中に含まれているのでUserモデルからcreateTokenメソッドを実行することができるようになります。createTokenメソッドではcreateメソッドを使って先ほどphp artisan migrateで作成したpsersonal_access_tokensテーブルにトークンを保存していることがわかります。 /** * Get the access tokens that belong to model. * * @return \Illuminate\Database\Eloquent\Relations\MorphMany */ public function tokens() { re
本文書を読み終えるとDropboxのAPIを通して下記の操作が行えるようになります。 指定したフォルダ下にあるファイル/フォルダ一覧を表示 指定したフォルダへの任意のファイルのアップロード 保存されているファイルのダウンロード 保存されているファイルのリンクの取得 保存されているフォルダ/ファイルの存在の取得 新規フォルダの作成 PHPのcURL環境で、Dropboxのファイル操作を行うためには、アプリケーションの作成(Create an App)を行う必要があります。アプリケーションを作成することでDropboxに接続するために必要な認証情報であるアクセストークンの取得を行います。アプリケーションを作成する目的は、アクセストークンを取得することにあります。 アプリケーションの作成は、Dropboxの開発者サイトで行います。以下のリンクからDropboxの開発者サイトに移動してください。
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 4つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
axiosはPromiseベースのHTTPクライアントでReactに限らずフロントエンドのフレークワークで利用することができるだけではなく、バックエンドのNode.jsでも利用することができる便利なライブラリです。バックエンドサーバを含め外部のサービスからデータを取得したい時に利用することができます。本文書ではReact環境におけるaxiosの利用方法について確認していきます。 Reactを使ってaxiosを使う場合どのように設定を行うのか知りたいと思っている入門者の方も多いかと思います。Vue.jsでも同様の文書を公開したところ閲覧してくれている読者の方も多いので今回React版を作成しました。axiosだけでなくReactの基本処理も一緒に理解を深めることができます。 React+axiosを使える環境を構築 Reactプロジェクトの作成はViteを利用して行います。 Viteを利用し
Slack Web APIとは Slack Web APIを利用するとSlackワークスペースのユーザの情報へのアクセスやユーザ、チャネルへ自作のプログラムから直接メッセージを送信することができます。 Slack Web APIのアプリケーション作成 Slack Web APIを使用するためには、Slack上でアプリケーションを作成する必要があります。アプリケーションの作成を行わなければSlack Web APIを使用することができません。 Slack apiサイトにアクセスします。SlackにWEB経由でログインする必要があるためSlackのユーザIDとパスワードが必要になります。 slack apiトップページ 真ん中にあるStart Buildingボタンをクリックします。 アプリケーション名の入力画面 Slackアプリケーションの作成画面(Create a Slack App )が
以前は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ではプロジェクト名とプロジェクトに追加する機能を聞
Vue.jsを利用してスクラッチからガントチャートを作成する方法を解説しています。JavaScriptのガントチャートを検索するとライブラリの利用方法を解説している記事がほとんどで作成方法を公開している記事を見つけるのは困難です。 本文書では有償・無償を問わずガントチャートのライブラリは一切利用しておらず、Vue.jsを利用してスクラッチからガントチャート の作成を行っています。 内容が比較的多いので3回に分けて文書を公開していますが、最終的には下記のようなガントチャートを作成することができます。 完成時のガントチャート 【実装するガントチャートの主な機能】 タスクバーは横方向にドラッグ&ドロップで移動することができ、移動が完了すると日付も一緒に更新されます。タスクバーの両側についている四角いボタンをドラッグ&ドロップすることでタスクの期間を変更することができ、日付も一緒に更新されます。タ
以前紹介した下記の文書ではQueueの基本設定を確認しました。今回は前回の文書で動作確認を行なっていないQueueの設定についてもう少し詳細に説明を行なっています。 Laravel環境は下記の文章で構築したものを利用しています。ユーザ登録後に送信するWelcomeメールのジョブを利用してキューの動作確認を行なっていきますで下記の文書を先に読むことをお勧めします。 ジョブの実行を遅らせる キューに入れたジョブの実行を遅らせたい時、delayメソッドを利用することができます。 下記ではジョブがキューに入ってから3分後に実行できるように設定を行なっています。 SendWelcomeMail::dispatch($user)->delay(now()->addMinutes(3)); ユーザがユーザを登録を行なってから3分後にキューに入ったジョブが処理されました。Processingのメッセージが
モーダルウィンドウとは モーダルウィンドウは画面中央にウィンドウが表示され、表示されたウィンドウ以外の背景を薄暗く表示させることでユーザに伝えたい内容を際立たせるための技術です。Webの世界ではさまざまな場所で利用されているので、モーダルウィンドウという言葉にピンとこない人でもこの技術に触れたことのない人はいないでしょう。あるサイトにアクセスすると急に画面中央にモーダルウィンドウが表示され消し方がわからないといった経験をしたことのある人も多いかと思います。英語ではmodalという単語を使うので検索する場合はmodalと検索することで情報を見つけることができます。 モーダルウィンドウ 注意点 本文書では作成するモーダルウィンドウの見栄えは重視していません。これまでの個人的な経験では見栄えに注目した場合にCSSが複雑になりCSSの記述箇所で勉強を諦める人もいます。本文書では仕組みに注目している
本文書はNext.jsのバージョン12を元に作成していますが新たにNext.jsのバージョン13に対応した記事を公開しました。 Next.jsはオープンソースのReactベースのフロントエンドフレームワークです。パフォーマンス、SEOやアプリケーションの開発の効率化に関わるFile System Based Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Incremental Static Regeneration(ISR), Image Optimization, Code Splitting, Pre-fetching, Serverless Functions, Fast Refreshなどの機能が事前に組み込まれています。これらの機能を自分で実装しようとすると非常に困難です。しかし自分で実装すること
Laravel8から認証パッケージがLaravel/uiからJetStreamに変わった上JetStreamではLivewire, Inertiaとこれまでに使用したことがない機能の選択まで迫られ認証はどのように行えばいいのだろうかと不安を持った方も多かったかと思います。しかし現在はLaravel Breezeという選択肢も増えたので不安はかなり解消されたとは思います。またLaravel/uiもLaravel8に対応したバージョンは存在します。Laravel8からJetStreamが登場したこともあり今後はJetStreamを使う機会が増えることが予想されます。JetStreamの認証機能の理解を深めるためにはその中のコア機能の一つFortifyの理解が欠かせないのではないかと思いFortifyの動作確認を本文書を公開しました。 本文書を読み終えるとFortify単独のパッケージを利用して
次のページ
このページを最初にブックマークしてみませんか?
『アールエフェクト | IT初心者スキルアップ応援ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く