絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

105 件中 1 - 60 件表示
カバー画像

Reduxのデータ処理に値を渡すには?

Reduxのデータ処理に値を渡すには?前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。Redux のデータ処理は、「slice reducer」前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。* カウンタを1づつ増やす* カウンタをリセットする(「0」に戻す) この処理は、データを処理する際にデータを渡す必要はありませんでした。今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。まずは、前回紹介した「slice reducer」に「init」という処理を追加した例です。 追加した処理は、指定された値をカウンタの値(value)にセットする処理を行なっています。import {  ActionReducerMapBuilder,  createSlice,} from "@reduxjs/toolkit";interface SampelState {  value: number;}interface Action {  type: string;  payload: any;}const initialState: SampelState = {  value: 0,};exp
0
カバー画像

Redux Toolkit を使った Redux 活用法

Redux Toolkit を使った Redux 活用法Redux Toolkit を使うと Redux の設定が簡素化されます。この連載では、何回かに分けて Redux Toolkit を使った Redux の活用事例を紹介していきます。Redux Toolkit を利用する利点React などで Redux を利用する際のハードルになるのは、Redux を利用する為の細かい設定が初心者には面倒という点がありました。Vue などでよく利用される、Vuex や Pinia などの場合は、Redux に比べると設定の部分が大幅に簡素化されていて、初心者でも扱いやすいというのが大きな利点になっています。Redux Toolkit を利用すると、この設定の部分を大きく簡素化する事ができます。Redux Toolkit をする場合に必要な設定は:* ストアの作成* React への組み込み* Slice Reducer の作成とストアへの登録 この三点です。ストア(store)は、データを一括管理するための、Redux の仕組みと考えてください。 このストアには、後から説明する、「slice reducer」と呼ばれる、実際に一括管理するデータの定義と、そのデータの処理方法を記述するモジュールを登録する必要がありますが、最初はまずその「型」を作ります。「slice reducer」は作成後に追加で登録すれば OK です。その後で、作成したストア(store)を React に組み込んで、あとは、実際のデータとその処理方法を記述した、「slice reducer」を作成して、最初に作成し
0
カバー画像

少し簡単になった Redux

少し簡単になった ReduxReact でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします!React で Redux を利用するための設定Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。実際に必要な設定は大きく分けて以下の三つの設定です:* ストア(store)の作成* アクション(action)の定義* 各アクションに対応した、ス
0
カバー画像

React のスロット機能

React のスロット機能Vue では、スロットを使って「親」の部品から、「子」の部品にデータを渡す事ができます。React でも似た様な機能を使うことができます。この記事では、React のスロット機能の使い方を紹介します。スロットとは?HTML のタグで囲まれた部分です。<h1>スロット</h1> この例では、「h1」のタグで囲まれた「スロット」の部分です。 この部分のデータを呼び出している「部品」(子)に渡す事ができます。Vue の場合には、呼び出される側の部品(子)の方で、<template>  <slot>子で設定したデータ</slot></template> の様に「slot」のタグで囲んでおくだけで利用できます。 この場合、「子で設定したデータ」は、親でスロットのデータを設定している場合には上書きされる仕組みです。親側でスロットのデータを設定していない場合には、この「子で設定したデータ」が表示される仕組みです。React の場合はどうなっているか?React でも同じ様な機能を利用できます。 React の場合は、このスロットのデータも「プロパティ」の一部として、呼び出される部品(子)に渡されます。React の呼び出される側(子)の「部品」の例です。import React from "react";interface IProps {  children: string | undefined;}export default function Step14Child(props: IPro
0
カバー画像

React で呼び出し元の部品にデータを渡すには?

React で呼び出し元の部品にデータを渡すには?Veu の場合、呼び出し元(親)の部品に、呼び出される(子)の部品からデータを渡す機能があります。React の場合にも似たような機能を実装できますが、考え方が少し違っています。この記事では、React で「子」から「親」にデータを渡す例を紹介します。Vue の場合は?Vue の場合は、公式チュートリアル(英語版)のステップ13で紹介されているように、「_emit_」を使うと、「子」の部品から「親」の部品にデータを送る事ができます。<script>export default {  emits: ["response"],  created() {    this.$emit("response", "hello from child");  },};</script> この場合、「_emits_」で定義している、「_response_」という名前で、「_this.$emit('response', 'XXXX')_」を使うと、データを「親」の部品に送る事ができます。この例では、「hello from child」というデータを「親」に送っています。「親」の部品では、最初は「No child msg yet」というデータをセットしておいて、データが送られてきた場合には、送られてきたデータに更新するという処理を行なっています。React ではどうするか?実は、React の場合、基本的な考えとして、「子」の部品から「親」の部品にデータを送るような Vue の機能はサポートされていません。基本的に、データのや
0
カバー画像

React で「部品」にデータを渡すには?

React で「部品」にデータを渡すには?React の「部品」に呼び出し元(親)からデータを渡すやり方は、Vue と殆ど同じです。プロパティ(property)と呼ばれるアトリビュートを呼び出すモジュールの HTML に相当する部分(JSX)で指定して渡します。プロパティを使って渡すReact でも Vue でも呼び出し元(親)からデータを渡す場合、プロパティ(property)と呼ばれるアトリビュートで指定します。記述方法も似ています。今回は、呼び出される部品(子)では、相当するプロパティ(property)が指定され中たあ場合には、「No props passed yet」を表示して、プロパティ(property)が指定されている場合には、指定されたプロパティの値を表示するようにします。まずは、呼び出される部品(子)の記述です。import React from "react";interface IProps {  msg: string | undefined;}export default function Step12Child(props: IProps): JSX.Element {  return (    <React.Fragment>      <div>        <h2>{props.msg ? props.msg : "No props passed yet"}</h2>      </div>    </React.Fragment>  );} 今回は、Typescri
0
カバー画像

Reactの「部品」

Reactの「部品」React も Vue と同様によく使う表示のパターンを部品化して再利用する事ができます。この記事では React の部品の使い方を紹介します。基本は「部品」!部品化と言っても特別な事はありません。 これまで、紹介してきた記述は基本的に全て「部品」です。 今までの記述は、React のトップレベルの「部品」であるの「App.tsx」から呼び出しています。今回は、意図的に一つの部品を作成して、React の上位(親)の部品から呼び出すやり方を紹介しています。今回の部品は、「A Child Component!」を表示するだけのシンプルな物です。import React from "react";export default function Step11Child(): JSX.Element {  return (    <React.Fragment>      <div>        <h2>A Child Component!</h2>      </div>    </React.Fragment>  );}  基本的な記述は、これまで紹介してきた書き方と同じです。 違いは、別に部品を作って呼び出す点です。呼び出し元の記述呼び出し元(親)の記述は、必要な部品を「import」して呼び出すだけです。import React from "react";import Step11Child from "./step11Child";import "./styles/step11.cs
0
カバー画像

React で変数の更新を監視するには?

React で変数の更新を監視するには?React で変数の値が更新された場合、その変数を使った表示を更新するのは、ステートで監視すれば良いので簡単です。しかし、変数が更新された際に、その変数を使って別の操作をする場合の記述方法を紹介します。基本はステート管理React でデータの更新に合わせて、表示データを更新するには、ステートを使って管理するのが基本です。 今回の課題は、Vue の公式チュートリアル(英語版)のステップ10を基にしています。この課題は、「JSON placeholder」と呼ばれるサイトから、 ID を基にしたデータを取得して表示する物です。ボタンがクリックされる度に ID を更新して、それに伴うデータを取得して表示するというのが課題です。一番シンプルなのは、ボタンがクリックされたイベントを検出して、その際に一緒にそれに対応するデータを取得して表示データの更新を行うという方法です。この方法を使う場合、これ迄のステートを使った、データ管理を行えば実現可能です。import React, { useEffect, useState } from "react";import "./styles/step10.css";interface TodoData {  userId: number;  id: number;  title: string;  completed: boolean;}export default function Step10(): JSX.Element {  const [todoId, setTodoId]: [    number
0
カバー画像

React の「部品」のライフサイクルとリファレンス

React の「部品」のライフサイクルとリファレンスReact でも、表示に利用する「部品」にはライフサイクルがあります。Vue の公式チュートリアル(英語版)では、この「部品」のライフサイクルをリファレンスの機能を使って体験するステップがありました。React でも似たようなやり方で同じような機能が実現できます。React の表示の更新の例外これまで紹介してきたように、React で表示データが更新に合わせて表示も更新する場合には、「ステート」を利用して管理するのが基本です。 今回取り上げるれでは、例外的にステートを利用しないでも表示の更新ができる例です。import React, { useEffect } from "react";import "./styles/step9.css";export default function Step9() {  return (    <React.Fragment>      <div className="step9">        <p>hello</p>      </div>    </React.Fragment>  );} Vue のチュートリアルと同様に、最初は、単純に「hello」を表示するように、直接、HTML に相当する部分(JSX)に「hello」を書いて表示させています。当然、表示は、「hello」が表示されます。この記述を変更して、HTML に相当する部分で指定した、「hello」を「mounted!」に上書きします。 やり方は
0
カバー画像

React のリストの表示を条件によって変えるには?

React のリストの表示を条件によって変えるには?Vue の公式チュートリアル(英語版)のステップ8では、「Computed Property」で事前処理したデータを表示する課題があります。React ではどのようにするのかをこの記事で紹介しています。React の基本は Typescript!この連載では何回も触れていますが、React の表示の基本は全てプログラムです。つまり、Typescript (Javascript)で処理することになります。 したがって、Vue の「Computed property」のような概念はありません。 基本は、* 表示の更新は、「ステート」を利用して管理する* データの処理は基本的に関数(method)を使う この例では、前回に引き続き、「Todo(やる事)」の一覧の表示を、完了したものを表示するかしないかを切り替えるわけですが、元々のやる事リスト(todos)をステートで管理して、実際の表示は、条件によって選別したデータのみを表示するような形で実現します。したがって、「_filteredTodos()_」という関数で条件によって表示するデータを抜き出して、この関数が返すデータを表示するようにします。 ただし、「条件」が変わった場合にも、表示内容を更新する必要があるので、「条件」もステートで管理します。この場合の条件は、「_hideCompleted_」です。条件によって、表示データを選別する関数は以下のようになります。function filteredTodos(): Array<Todo> {  return todos.
0
カバー画像

React でリストを表示するには?

React でリストを表示するには?この記事では、React でリストを表示する方法です。リストのデータの一覧を表示する事は簡単です。しかし、このリストのデータを変更する場合はちょっと複雑です。この記事ではその辺も含めて紹介しています。React はプログラムで表示データを作る!前回の条件によって表示を変える場合と同じで、React を利用する場合には、基本的にプログラムで表示データを作ります。今回の、リストのデータを表示する場合も考え方は同じです。Vue の場合には、「_v-for_」を使って、本来の HTML にはない書き方でリストの中身を表示していました。React の場合は、このような機能が HTML に相当する部分(JSX)にはないので、Typescript(Javascript)で記述する方法を使います。色々書き方はありますが、比較的よく利用されているのは、「_map()_」という予め用意されている関数を使います。この機能を利用する事で、リストのデータを表示するための HTML に相当する記述(JSX)を作る事ができます。以下の部分がそれに相当する部分になります。<ul>  {todos.map(    (todo: Todo): JSX.Element => (      <li>        {todo.text}        <button className="btn btn-secondary" onClick={() => removeTodo(todo)}>          X        &lt
0
カバー画像

React で条件によって表示を変えるには?

React で条件によって表示を変えるには?React で変数の値(状態)によって表示内容を変える方法を紹介しています。React の場合は、HTML に相当する JSX の記述が Typescript (Javascript)の一部なので、Typescript(Javascript)の書き方を使って表示を切り替えます!React は全てプログラム!Vue の場合には、HTML の記述の部分にもプログラム的な要素を書けるようにして「_v-if_」を使って表示の切り替えをおこなっていました。 React の場合には、HTML に相当する部分(JSX)は Typescript(Javascript)の一部なので、表示の切り替えには、Typescript(Javascript)を使って切り替えます。Typescript(Javascript)の「xxx ? OOOO : _XXXX_」を使って切り替えます。 この記述は、「_xxx_」が真(true)の場合は、「_OOOO_」、「_xxx_」が偽(false)の場合には、「_XXXX_」という処理を行う場合に使います。 今回は、この「_OOOO_」と「_XXXX_」の部分に HTML に相当する JSX の記述を入れて利用します。以下が Typescript を利用した実装例です。import React, { useState } from "react";import "./styles/step6.css";export default function Step6(): JSX.Element {  const [awesom
0
カバー画像

React で入力フィールドの文字を表示する

React で入力フィールドの文字を表示するステップ5では入力フィールドに入力された文字を Reactde 表示する方法です。これも、React と Vue では若干違ったやり方になります。この記事では React で実現する二つの方法を紹介しています。リファレンスを使う方法Vue では「v-model」という方法を使って、入力フィールに入力された文字と変数を結びつけていました。(binding)React でも似たような機能としてリファレンス(reference)ができます。import React, { useState } from "react";import "./styles/step5.css";export default function Step5(): JSX.Element {  const fieldValue: React.RefObject<HTMLInputElement> =    React.createRef<HTMLInputElement>();  const [value, setValue] = useState("");  return (    <React.Fragment>      <div className="step5">        <input type="text" ref={fieldValue} onChange={() => getValue()} />        <p>{value}</p>      &lt
0
カバー画像

React で表示する文字に色をつける!

React で表示する文字に色をつける!Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「_xxxx.tsx_」でインポートする方法を使います。CSS で記述すれば簡単!前回の連載のVue 公式チュートリアル(英語版)をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ3の実装例です。import React from "react";import "./styles/step3.css";export default function Step3(): JSX.Element {  const titleClass: string = "title";  return (    <div className="step3">      <h1 className={titleClass}>Make me red</h1>    </div>  );} この「部品」の記述は、「Make me red」を Web ブラウザで表示するための、HTML に対応する部分(JSX)を作っています。実際に文字を赤くするのは、HTML に対応する部分(JSX)に CSS で装飾を指定するためのタグ(className)をつけて、CSS ファイルで指定します。今回は、「_./styles/step3.css_」をインポートし
0
カバー画像

Vite で Ract のプロジェクトを作成する

Vite で Ract のプロジェクトを作成するVue のフレームワークを中心にお届けしてきましたが、React でやったらどうなるのというお問い合わせも多いので今回は、これまで Vue で紹介してきた事を React でやったらどうなるかということで、React の実施例をお届けします。アメリカでは React の方が主流Vue は便利なフレームワークで初心者でも React に比べると少しですが入りやすいという利点があります。しかし、アメリカの開発現場では React の方が利用されるケースも多く求人も多くなっています。そこで、今回は、これまで Vue で紹介してきた事を React のフレームワークを使って書くとどんな感じになるかを紹介していく事にしました。Vue の際は、Javascript を利用するケースを中心にお伝えしてきましたが、今回は、アメリカの開発現場で React と組み合わせて利用される事の多い、Typescript でプログラムを書く方針でお届けしていきます。Typescript を利用する理由Typescript は Javascript の拡張版です。記述自体はとても似ています。Typescript が利用される理由は、Javascript に比べると変数の「型」の制約が厳格で、大きなプロジェクトなどで、複数の人が開発に関わる場合、インターフェースなどをより厳格に決める事ができることを初め、コードを管理する上で型が厳密に管理されるので有利など幾つかの理由が挙げられています。Typescript で記述されたコードはそのままでは、Web ブラウザなど
0
カバー画像

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する!

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する!前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。Firebase のプロジェクト情報Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。環境変数を利用した Firebase の初期化のコードでは、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹
0
カバー画像

Firestoreを利用したブログサービスの実装例

Firestoreを利用したブログサービスの実装例この記事では、Firestore を利用して、投稿記事のメタデータを保存した場合の実装例を紹介します。今回紹介する方法では、投稿記事を表示する場合以外は、Firestore からメタデータを取得して表示するため、投稿数が多くなっても素早い記事の一覧表示が可能です。投稿記事の一覧の取得Firebase のデータベースである、Firestore から投稿記事のメタデータを取得します。 投稿記事のメタデータは、記事の投稿時に、Firestore のデータベースに保存して、オリジナルの Markdown のファイルは、Firebase のストレージに保存してある前提です。 メタデータを保存している Firestore のコレクションは「sample」です。import {  collection,  doc,  onSnapshot,  query,} from "firebase/firestore";import { db } from "../lib/firebase";getList() {      const my_query = query(collection(db, "sample"));      const unsub = onSnapshot(my_query, (query_snapshot) => {        this.docs = [];        for (let i = 0; i < query_snapshot.size; i++) {          const doc =
0
カバー画像

Markdown を使う利点

Markdown を使う利点Markdown 形式で記事を書いて Vue で表示する方法を紹介しました。この方法だと、HTML などで記事を書く場合に比べると幾つかの利点があります。この記事では、Markdown で記事を書く利点について紹介します。記事の概要のデータを埋め込める!一つの大きな利点は、前回の記事でも紹介していますが、Markdown 形式の記事はそのままでも読みやすくなっています。 HTML ファイルの場合は、Web ブラウザを使って表示させる場合には、見やすく体裁も整えることが可能なので便利です。しかし、HTML 形式のファイルそのものを見た場合には、見出しや本文につけるタグがあるために、一般の人には読みにくいと言う欠点があります。別の利点は、記事の概要のデータを Markdown のファイルに埋め込んで簡単に利用できる点があります。 例えば、タイトルや投稿日時などを埋め込んで、Markdown を処理するパッケージプログラムで簡単に抜き出して利用できるのはとても便利です。 こうしたデータを「メタデータ(meta data)」と呼んでいます。このようなデータを埋め込むことは、HTML でも可能ですが、Markdown の方がより利用者に使いやすい形で利用できるようになっています。この記事では、Markdwon に記事の概要のデータを埋め込む方法と、その利用のやり方を紹介しています。Markdown にメタデータを埋め込むには最初に、Markdown 形式の記事にメタデータ、つまり、記事の概要に関するデータを埋め込む方法を紹介します。 書き方を簡単で、行の最初に
0
カバー画像

Vueを使ってMarkdownファイルを表示する

Vueを使ってMarkdownファイルを表示する前回は、Firebase ストレージに保存したファイルを Vue を使って表示する方法を紹介しました。これで簡単なブログなどのサービスを実現できます。今回は、HTML ではなく、Firebase のストレージに保存した Markdown のファイルを Vue で表示する方法を紹介します。こちらの方が、原稿を書く際書きやすく、そのままの形でも読みやすいというメリットがあって便利です!Markdown とは?Markdown は以前にもこの連載で取り上げていますが、マークアップ言語です。 そのままの形でも、比較的読みやすく HTML などに比べると初心者でも書き方を簡単に覚えられるので便利です。 便利なのは、この形式で書かれたファイルを公開されているモジュールで簡単に HTML に変換する事が可能になっている点です。 ブログなどの記事は、ある程度文章の形が決まっていて、特別な HTML を書く必要はあまりありません。そう考えると、原稿を Markdown で書いておいて、表示する際にプログラムで HTML に変換して表示するという方法はブログサイトを運用するには都合の良い仕組みです。プログラムの履歴を管理するのに、Git がよく利用されますが、Git をベースにオンラインでプログラム開発のプロジェクトを保存して、共有したり公開するのに広く利用されている GitHub のドキュメントも Markdown を採用しています。この記事では、これまで学習してきた Vue を使って、Firebase に保存した Markdown を表示する方法
0
カバー画像

Vue を使って Firebase ストレージのファイルを表示する

Vue を使って Firebase ストレージのファイルを表示する前回は Firebase のストレージの特定のフォルダに保存されているファイルの一覧を Vue を利用して表示する方法を紹介しました。この記事では、表示されたファイルの中から選択されたファイルの中身を表示する方法を紹介します。Firebase ストレージのファイルにアクセスするにはFirebase ストレージの機能の一部として、保存されているファイルのリンク(URL)を取得する機能がサポートされています。リンク(URL)がわかると、Javascript の基本機能「fetch()」を使えばファイルの中身を取得することができます。したがって、Firebase ストレージに保存されているファイルの中身を表示するには、以下の手順が必要になります。1. ファイルを選択する2. 選択したファイルのリンク(URL)を取得3. 取得したリンク(URL)を使ってファイルの中身を取得4. 取得したファイルの中身を表示の四つのステップです。ファイルを選択するには?いろいろなやり方がありますが、クリックされた場合の処理を行う関数に、「file」を渡してしまうのが簡単な方法です。前回の「src/views/HomeView.vue」に記述の追加を行います。<template>  <div>    <h1>HTML view</h1>    <div class="file-list">      <ul v-for="file in list.files" :key="f
0
カバー画像

Vue で Firebase ストレージに保存したファイルの一覧を表示する

Vue で Firebase ストレージに保存したファイルの一覧を表示する前回は Vue を使って Firebase のストレージにファイルを保存する方法を紹介しました。これは「管理者」としての機能です。今回は、Firebase のストレージに保存されたファイルを閲覧する前段階として、Firebase のストレージに保存されたファイルの一覧を表示するやり方を紹介します。今回実現する機能は?最初に、今回実現する機能を整理しておきます。 今回、実装するのは Firebase のストレージのフォルダに保存されたファイルの一覧を Vue で表示するというのが目的 d す。この記事では触れませんが次のステップとしては、表示したファイルの一覧の中から選択されたファイルを表示できる様にするために必要な機能という位置づけです。Firebase ストレージに保存されたファイルを取得するFirebase ストレージに保存したファイルの情報になるので、Firebase から必要な情報を取得することになります。 Firebase でサポートしている機能なので、基本的な関数(API)を呼び出すだけで簡単に取得できます。必要な関数は:* getStorage()* listAll()* ref() の三つです。「ref()」でファイルの一覧を取得したい、Firebase ストレージのフォルダへのリファレンス(簡単に言うと場所)を取得します。 ファイルの一覧を取得する方法は大きく二つのやり方がありますが、この記事では指定したフォルダに保存されている全部のファイルのリストを取得する方法を紹介します。もう一つの
0
カバー画像

Vue を使ってFirebaseのストレージにファイルを保存する

Vue を使ってFirebaseのストレージにファイルを保存するVue を使って Firebase のストレージにファイルを保存する前回の記事では、Vue でページ毎にアクセスの権限を使い分けるやり方を紹介しました。今回は、前回の実装を少し発展させて、「管理者モード」を考えてみます。この記事では、Firebase のストレージに管理者としてファイルをアップロードする方法を紹介します。管理者モードの利用例まずは、管理者モードで何をするかの例を紹介します。 例えば、ブログサービスを提供する事を考えた場合には、ブログの記事を投稿する機能と、投稿された記事を閲覧する機能が必要になります。この場合、ブログの記事を投稿するのは基本的にブログサービスの「管理者」が投稿するという形になります。この場合、管理者は「特定の利用者」になって、閲覧者(一般の利用者)は、それ以外の利用者というように分ける事ができます。この記事では、まずは、ファイルをインターネットのサーバーに保存する方法を紹介します。Firebase のストレージ機能を使うインターネットにファイルを保存するには、「保存する場所」が必要になります。今回は、この場所として Firebase のストレージ機能を利用する事にします。前回までに、Firebase のプロジェクトを作成しているので今回は Firebase のストレージ機能を新たに有効にします。これは、Firebase コンソールから可能です。最初はインターネット上に公開せずにテストするので、「テストモード」を選択すれば、当面はセキュリティールールを設定しないでも基本的なテストが可能
0
カバー画像

Vueでページ毎にアクセス権を設定する方法

Vueでページ毎にアクセス権を設定する方法Vue と Firebase を組み合わせて、利用者限定のサービスを実装する方法を紹介しました。実際の Web アプリケーションでは、アクセスできる人を限定したページと、誰でもアクセスできるページが混在する場合もたくさんあります。例えば、ブログのようなサイトを考えた場合は、記事を投稿するのは「管理者」だけで、閲覧は誰でもできるとうケースもたくさんあります。この記事では、ページ毎にアクセス権を設定する方法を紹介しています。Vue プロジェクトの作成最初に、Vue のサンプルプロジェクトを作成します。 今回の実装例では、* Vue Router* Pinia を利用します。 最初にサンプルプロジェクトを作成する際に組み込んで起きます。サンプルプロジェクトの作成にはViteを利用しています。 % npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? … No / Yes✔ Add Vitest for Unit Testing? … No / Yes✔ Add Cypress for both Un
0
カバー画像

VueとFirebaseを使ってログイン機能を作るには?

VueとFirebaseを使ってログイン機能を作るには?Vue の基本を一通り学習したところで少し実践的な実装例を紹介します。この記事では、Firebase のユーザー認証機能を利用して、ログイン機能を Vue で作成する例を紹介します。Vue のプロジェクトを作成今回は、Vue Router や Pinia などを使わずにシンプルに、ホームページを表示するという簡単な例にしてみました。簡単に実装内容を説明すると:* ログインしていない場合は、ログインフォームを表示* ログインしている場合には、「Home.vue」を表示 という仕様にします。ログインフォームは再利用できるように「部品化」します。「src/App.vue」で表示の切り替えをするようにします。 「src/components/LoginForm.vue」でログインに必要な情報を入力するフォームを作成します。「src/view/Home.vue」がホームページになります。まずは、サンプルプロジェクトを作成します。$ npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? …
0
カバー画像

Vue Router の部品にデータを渡すには?

Vue Router の部品にデータを渡すには?Vue Router は、一般的な Web サイトのように、Web ブラウザで「ページ」を指定して表示する事ができるので、Web アプリを作る場合でも便利な場合が多くなります。この記事では、Vue Router の「ページ」に相当する「部品」にデータを渡す場合にはどうすれば良いかを紹介します。部品にデータを渡す基本的な方法Vue の部品(子)に呼び出し元(親)からデータを渡す場合には、Vue の公式チュートリアルで学習したように「props」を使って渡します。Vue Router を利用する場合でも、Vue のデータを渡す仕組みは同じなので基本的なやり方は同じです。ところが、Vue Router を利用する場合には、HTML 部分に直接「部品」の記述を書く必要がないので、どのようにデータを渡すのかがよくわからない場合があります。例えば、Vite を利用して、Vue のサンプルプロジェクトを Vue Router を使う設定で作成した場合には、「HomveView」と「AboutView」の二つの「ページ」がつくられます。この例では、「AboutView.vue」は次のような記述になっています。// (AboutView.vue)<template>  <div class="about">    <h1>This is an about page</h1>  </div></template><style>@media (min-width: 10
0
カバー画像

Vue Router を使ったプロジェクトを Firebase で公開するには?

Vue Router を使ったプロジェクトを Firebase で公開するには?Vue Router は Vue を使った Web アプリで、ページ毎に表示を切り替える場合に利用されます。ところが、設定によっては、「ページが見つからない」(404エラー)になる場合があります。原因は、Web サイトのページの切り替え(ルーティング)にあります。この記事では、Firebase を利用して、Vue Router を利用した、Vue アプリを公開する方法を紹介しています。ルーティングの仕組みWeb サイトで表示するページを切り替える仕組みを「ルーティング」と呼んでいます。 簡単にいうと、Web ブラウザで指定したリンク(URL)によって、表示を切り替える事ができますが、この切り替えの仕組みをルーティングと呼んでいます。 この「切り替え」を行なっているのは、通常の Web サイトでは、Web サイトの情報を持っているサーバー(Web サーバー)が行なっています。Web ブラウザは、指定されたリンク(URL)を Web サーバーに送って、表示する情報を Web サーバーから受け取って表示をしています。Vue の表示の仕組みVue は「フロントエンドのフレームワーク」の一つで、「Web ブラウザで表示を管理する仕組み」です。 一般的に Vue で作成した Web アプリをインターネットで公開する場合には、Viteを使って Vue のプロジェクトを作成した場合には以下のコマンドを実行して公開用の情報(イメージ)を作成します。 (*)この連載では、Viteを Vue のサンプルプロジェクト(テン
0
カバー画像

Vue Routerを利用する

Vue Routerを利用する「Vue Router」を使うと、Vue を使って、ページ毎の表示が簡単にできる様になります!この記事は、「Vue Router」の基本的な使い方を紹介しています。Vue の基本は「1ページ」前の記事でも触れていますが、Vue などのフロントエンドのフレームワークの表示の基本は「1ページ」です。 基本になる HTML のページに、Vue が表示させる「部品」を組み込んで表示させるというのが基本的な仕組みになっているのが理由です。 しかし、通常の Web サイトの様に、ページ単位で表示を作れると便利なので、ページ毎の「部品」を作成して、アプリを作る場合も多くなっています。前回は、Vue の基本機能である「v-if」を使って表示するページを切り替える方法を紹介しました。実は、Vue は、こうしたページ毎の表示をサポートするパッケージ(モジュール)を予め用意していて、ページ毎の表示を簡単に行うことが可能です。この記事では、そのパッケージ(モジュール)の、「Vue Router」の使い方を紹介します。一番簡単な方法は?「Vue Router」を一番簡単に使う方法は、Vue のプロジェクトを作成する際に、「Vue Router」を使う事を予め選択する方法です。 予め、選択する事で、プロジェクト作成時に必要な設定を行なってくれるので、あとはページを追加する感じで利用する事ができます。以前紹介した、「npm init vue」を利用して Vue のプロジェクトを作成する場合には、以下のような感じで実行されますが、その際に、「Add Vue Router」の質問の
0
カバー画像

Vue のページの考え方

Vue のページの考え方Vue の公式チュートリアルの例では、作成したのは基本的に「1ページ」の Web アプリでした。この記事では、Vue フレームワークの「ページ」の考え方について紹介します。基本は「1ページ」!Vue フレームワークを利用した場合は、Web アプリのページは基本的に「1ページ」になります。 公式チュートリアルでは、「メインのページ (App.vue)」から「部品(ChildComp.vue)」を呼び出すような例も学習したと思いますが、これも基本的には「1ページ」のアプリです。「部品(ChildComp.vue)」も、メインのページの一部として表示されているからです。理由は簡単で、Vue のフレームワークがやっていることは、元になるページに作成した「Vue」の「部品」を Vue が埋め込んで表示をしているからです。Vue では「メインのページ(App.vue)」も、「部品(ChildComp.vue)」も「Vue の部品」として扱われています。したがって、npmなどのパッケージ管理アプリを使って Vue のアプリを開発する場合は、「index.html」というファイルが元になるページで、Vue はこのページに表示を埋め込む仕事をしているだけです。これが、 Vue や React などフロントエンドのフレームワークを利用して開発した Web アプリが「1ページアプリ」と呼ばれている理由でもあります。複数のページを扱うには?では、Vue のフレームワークを利用して複数のページを持った Web アプリは作れないのかという疑問が出てくると思います。 結論から言うと、
0
カバー画像

CSS の手抜き 〜 Bootstrap

CSS の手抜き 〜 BootstrapVue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。Bootstrap とは?Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。Bootstrap の利用例次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げてい
0
カバー画像

Windows で NodeJS を使う

Windows で NodeJS を使うNodeJS は基本的に、コマンドラインで利用するアプリです。Windows のコマンドラインは、Linux や MacOS とは違うタイプの物を使っています。この記事では、Windows で NodeJS を使う場合について紹介しています。Web 開発でよく利用される NodeJSNodeJS に含まれている「npm」、Javascript のパッケージ管理のためのアプリです。 NodeJS を使わなくても、Web 開発は可能ですが、Vue や React などを利用して開発する場合、殆どの場合は、パッケージ管理のアプリを使って開発するのが一般的です。 この連載でも、Vue を利用するやり方として、NodeJS に含まれる、「npm」を利用するやり方を以前の記事で紹介しています。「npm」を利用すると、Vue や React などのフレームワークの仕組み以外にも、インターネット上で公開されている沢山の基本機能のパッケージ(モジュール)も簡単に自分の開発プロジェクトに取り込んで利用する事ができます。こうした、理由もあって「npm」は Web 開発では広く利用されているアプリになっています。「npm」を含めてソフトウエアの開発用のアプリの多くが、「Unix」という OS をベースに開発されていて、無料で公開されています。Linux や MacOS は、Unix ベースの OS なので余り問題はないのですが、Windows は、少し系統の違う OS なので若干の違いがあります。この記事では、Windows で Web 開発を行う場合のやり方に
0
カバー画像

PythonのWebアプリ公開するためのサーバー費用を無料にするには?

ベナオと申します。ココナラさんでは主にDjangoというフレームワークを使った、PythonのWebアプリケーション開発をさせていただいております。WebアプリケーションはスマホとPCどちらからもブラウザさえあればアクセスできたり、iosアプリなどにある公開時の審査も無いのでサービス公開しやすいといったメリットがあります。しかし開発の経験が浅い方にとっての不安要素は、アプリを公開する際のサーバーの種類や料金になるかと思います。最も一般的に耳にするのはAmazonの提供するAWSでしょうか。Webサービスのアイデアはあるけどサーバー費用に月々いくらかかるのか分からないから不安、といった方は多いのでは無いでしょうか?今回はHerokuというサービスを紹介し、用途に応じたプランの費用をチェックしてみたいと思います。ご自分でサービス公開される場合や、開発をご依頼される場合の参考になりましたら幸いです。1. Heroku(クラウドアプリケーションプラットフォーム)個人開発者なら耳にする方は多いのでは無いかと思います。HerokuはWebアプリケーションを手軽に公開できるクラウドサーバーを提供しています。画像にもあるように、8つのプログラミング言語に対応しています。PHPのlaravel、Ruby on rails、PythonのDjangoなどメジャーなWeb開発フレームワークがカバーされています。制約はありますが、完全無料でアプリを公開することもできます。Gitを利用して公開作業をするので、Gitを使ったことがあれば初めてでも取り組みやすいでしょう。また入門向けのWebアプリ作成のチュ
0
カバー画像

Vue をパッケージ管理アプリを利用して使う!

Vue をパッケージ管理アプリを利用して使う!前回は、HTML の中に Vue の記述を書いて Vue を利用する方法を紹介しました。今回は、パッケージ管理アプリを利用して、Vue を使うやり方です。この方法は、公式チュートリアルで学んだ方法と同じやり方で Vue を利用する事ができます。この記事を読むのに必要な前提条件は:プログラムを入力するためのエディタがインストールされている(VSCODなど)NodeJSがインストールできるコマンドラインの使い方がわかる(Windows の PowerShell や Mac/Linux のターミナル)まずは、この記事をお読みになる前に、VSCODE などのエディタをインストールして、簡単にアプリを開いてみてください。パッケージ管理アプリとは?パッケージ管理アプリは、インターネット上に公開されている誰かが既に開発したモジュール(部品)を自分の開発のプロジェクトに取り込むためのアプリです。よく利用する基本的な機能は、大抵は誰かが作ってインターネット上で公開されています。そうしたモジュール(部品)を活用することで、アプリの開発を効率的に行う事ができます。よく利用されている、パッケージ管理アプリは幾つかありますが、この記事では、「_npm_」というパッケージ管理アプリを利用して、Vue を使うやり方を紹介します。「_npm_」は、「_NodeJS_」という Javascript のプログラムを、Web ブラウザではなく、PC 上で動かす際に利用するパッケージに入っています。NodeJS のサイトからダウンロードできます。インストールのやり方は N
0
カバー画像

Vue 公式チュートリアル 〜 スロットの使い方?

Vue 公式チュートリアル 〜 スロットの使い方?Vue の公式チュートリアルを使った、Web 開発の学習例もステップ14まで来ました。このチュートリアルはこれで基本的に最後です。ステップ14では、スロットの使い方を学習します!前回までのポイントはポイントは?これまでの学習をまとめると大きく分けて二つです。* 基本的な Vue の部品の記述方法* Vue の部品の基本的な使用方法 です。基本的な Vue の基本的な記述方法は、メインのページでも、呼び出される側の「部品」でも同じでした。 基本は、HTML の部分で表示の基本的な構成を作って、Javascript で表示に使うデータを管理・処理します。これに加えて、CSS で表示の「飾り」をするという構成です。これをベースに、HTML、Javascript、CSS の連携のやり方に加えて、部品を呼び出す方(親)と呼び出される部品側(子)の間でのデータのやり取りのやり方を学んできました。これまでの、13 のステップで基本的な書き方をカバーして来ました。こうした基本を改めて振り返っって見てください。今回学ぶのは?今回学ぶのは、「スロット」の使い方です。 「スロット」を使うと、部品の呼び出し元(親)から、「部品」(子)にデータを渡す事ができます。まずは、変更前のコードを見てみます。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    retu
0
カバー画像

Vue 公式チュートリアル 〜 部品からデータを渡す

Vue 公式チュートリアル 〜 部品からデータを渡すVue 公式チュートリアルのステップ 13 は、「部品」の方から呼び出し元(親)にデータを渡す方法を学習します。前回までのポイントは?ステップ10までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ11からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側(親)と呼び出される側(子)の間でのデータのやり取りです。前回のステップ12では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは?ステップ13では、前回とは反対に、呼び出される側(子)から、呼び出し側(親)にデータを渡す方法を学習します。まずは、変更前のコードです。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    return {      childMsg: "No child msg yet",    };  },};</script><template>  <ChildComp />  <p>{{ childMsg }}</p></template>これが、呼び出し元(親)のコードです。特に新しい点は
0
カバー画像

Vue公式チュートリアル 〜 部品にデータを渡す

Vue公式チュートリアル 〜 部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは?前回のステップでは、これまで学習に使っていたメインの部品(ページ)から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは?今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報(ヘッダーと呼ばれる場合もあります)に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from
0
カバー画像

Vue 公式チュートリアル 〜 「部品」を呼び出す!

Vue 公式チュートリアル 〜 「部品」を呼び出す!Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。前回までのポイントは?前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。今回学習するのは?今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。例によって、変更前のコードから見ていきましょう!今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。(App.vue)<script>export default {  // register child component};</script><template>  <!-- render child component --></template> 今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。(ChildComp.vue)<template>  <h
0