すべてのカテゴリ

ご覧いただきありがとうございます！ 要件定義・設計・実装・テスト・リリース・技術相談と幅広くが対応可能でございます。 LaravelやStripeなどの決済システムや外部APIの実績も多数ございますので、まずはお気軽にお問い合わせください。 迅速丁寧な対応を心がけておりますので、よろしくお願いいたします。 『例』　 →Webシステムの開発のお手伝いをしてほしい →HTML・CSS・Javascriptを使ったWebサイト作成・修正 →既存システムの修正・機能改修をお手伝いしてほしい →Webサービスの仕様・設計をお手伝いしてほしい その他ご相談承ります。 『対応実績』 →Laravelを使用したAPIの開発 →Stripeを使った決済機能の追加 →外部APIを使ったシステム開発 →テーブル設計 【 対応言語 】 ・PHP/Laravel ・HTML/CSS ・Javascript/Vue.js/Nuxt.js・Python(Django or Flask)・Java(SpringBoot)

▼こんな方へオススメ ・既存の古いサービスを最新の技術で作り替えたい ・自社サービスをサブスク化して収益事業にしたい ・Excel、Access等の業務システムをWebアプリ化したい ・開発だけではなく業務知識も持っている開発者に依頼したい ・前任者がいなくなったため引き継ぎをお願いしたい ・アイデアはあるが開発が未経験なのでどのように依頼すればいいかわからない 他にあれば付け加えてください ▼ご提供内容 Laravel・ReactまたはLaravel・VueによるWebアプリ・Webサービスの開発を行います。 ・設計、実装、テスト ・データベース連携(MySQL、PostgreSQL、Firebase、Redis) ・ソース管理(SVN, Github) ▼ご購入後の流れ ①ヒアリングや資料にてお客様の現場やご要望を聞き取り致します。 ②要件洗い出しを行い設計、イメージをご提案します。 ③お見積りをご提示します ④問題なければご契約・仮払いまで行って頂きます。 ④開発・テストを行います。 ⑤納品 ⑥問題なければ完成 ▼料金プランやオプション 画面の複雑さ（低・中・高）と画面工数の多寡（少・中・多）により金額と期間の見積もりを行いますが、長期的パートナーが前提の場合は柔軟な対応可能です。 ▼納期 開発スピードはかなり早い方だと自負しています。 納品日までに確実に対応することが可能です。 また全納期までの期間の70～80%以内に開発を完了し、テスト期日を十分に保証します。

▼こんな方へオススメ ・既存の古いサービスを最新の技術で作り替えたい ・自社サービスをサブスク化して収益事業にしたい ・Excel、Access等の業務システムをWebアプリ化したい ・開発だけではなく業務知識も持っている開発者に依頼したい ・前任者がいなくなったため引き継ぎをお願いしたい ・アイデアはあるが開発が未経験なのでどのように依頼すればいいかわからない 他にあれば付け加えてください ▼ご提供内容 Laravel・ReactまたはLaravel・VueによるWebアプリ・Webサービスの開発を行います。 ・設計、実装、テスト ・データベース連携(MySQL、PostgreSQL、Firebase、Redis) ・ソース管理(SVN, Github) ▼ご購入後の流れ ①ヒアリングや資料にてお客様の現場やご要望を聞き取り致します。 ②要件洗い出しを行い設計、イメージをご提案します。 ③お見積りをご提示します ④問題なければご契約・仮払いまで行って頂きます。 ④開発・テストを行います。 ⑤納品 ⑥問題なければ完成 ▼料金プランやオプション 画面の複雑さ（低・中・高）と画面工数の多寡（少・中・多）により金額と期間の見積もりを行いますが、長期的パートナーが前提の場合は柔軟な対応可能です。 ▼納期 開発スピードはかなり早い方だと自負しています。 納品日までに確実に対応することが可能です。 また全納期までの期間の70～80%以内に開発を完了し、テスト期日を十分に保証します。

はじめまして。イプシロンと申します。ココナラブログはじめました。まずは、自己紹介をします！！・・・と、言いたいところですが、自己紹介については、ココナラのプロフィールをご参照ください(笑)↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓https://coconala.com/users/2549559さて、このブログでは以下のカテゴリーに分けて、技術的なコラムや、独り言を徒然なるままに書いていこうかと考えています。①Excel/VBAに関するブログ②Reactに関するブログ③firebaseに関するブログ④コラム的なブログ※カテゴリーは今後変更するかもしれませんが、、、wなぜこのカテゴリーにしているかというと、、、好き！！！だからです。VBAに関してはプログラミングの基本的な構造を学びつつ、Excelを自動化したり、webスクレイピングをしたりと遊べる範囲が広いですし、Reactに関しては、コードにかなりクセがありますが、webアプリをサクサク作れる点に魅力を感じます。どちらの言語も習得するまでに私はかなり時間がかかりましたが、自分に対する備忘録的な意味合いも含めて、少しでも面白可笑しく綴っていこうかと思います！なお、私のサービスにもExcel/VBA、React/firebaseを利用したサービスを展開しておりますので、一度足をお運びくださいwExcel&VBAを活用したスクレイピングサービスになります。サイトの情報をExcelに抽出したり、入力したり、単純作業を自動化するサービスです。BUYMAのバイヤー様必見のサービスです。最近TVCMも放送していて盛り上がってきてますね！

Reduxのデータ処理に値を渡すには？前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。Redux のデータ処理は、「slice reducer」前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。＊　カウンタを１づつ増やす＊　カウンタをリセットする（「０」に戻す）　この処理は、データを処理する際にデータを渡す必要はありませんでした。今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。まずは、前回紹介した「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

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」を作成して、最初に作成し

少し簡単になった 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)の定義＊　各アクションに対応した、ス

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

React で呼び出し元の部品にデータを渡すには？Veu の場合、呼び出し元（親）の部品に、呼び出される（子）の部品からデータを渡す機能があります。React の場合にも似たような機能を実装できますが、考え方が少し違っています。この記事では、React で「子」から「親」にデータを渡す例を紹介します。Vue の場合は？Vue の場合は、公式チュートリアル（英語版）のステップ１３で紹介されているように、「_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 の機能はサポートされていません。基本的に、データのや

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

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

React で変数の更新を監視するには？React で変数の値が更新された場合、その変数を使った表示を更新するのは、ステートで監視すれば良いので簡単です。しかし、変数が更新された際に、その変数を使って別の操作をする場合の記述方法を紹介します。基本はステート管理React でデータの更新に合わせて、表示データを更新するには、ステートを使って管理するのが基本です。 今回の課題は、Vue の公式チュートリアル（英語版）のステップ１０を基にしています。この課題は、「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

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!」に上書きします。 やり方は

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

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

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

React で入力フィールドの文字を表示するステップ５では入力フィールドに入力された文字を 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

React でイベント処理を行うReact のチュートリアルの第４回目は、Vue の公式チュートリアル（英語版）と同じで、「ボタン」をクリックしたイベントを検出して処理を行う例です。この例では、ボタンをクリックする度にカウンターを１づつ増やして行く処理を行うやり方を紹介しています。React と Vue では少し考え方が違う！Vue の公式チュートリアル（英語版）で同じような課題を紹介していますが、Vue の場合は、単に Javascript の部分で変数を宣言して、その変数に対する処理を実装するだけでしたが、React の場合は少し考え方が違います。React の場合には、「特別な変数」を作って、その変数に対する処理を行います。これが大きな違いです。 このように実装しないと、変数の値が更新されても表示が更新されないような仕組みになっています。特別な変数は、「useState()」を使って宣言する！React の場合には、この特別な変数は、 *useState()*という関数を使って宣言します。 今回は、クリックされた回数を数える変数「_count_」を使いますが、変数の宣言は以下のように行います。const [count, setCount] = useState(0); ＊　count: クリックされた回数を示す変数の名前＊　setCount: 変数を更新する関数の名前　これで、指定された関数で変数を更新するような形で実装します。 変数の宣言もこの二つをペアにする形で行います。さらに、「useState(0)」で変数の初期値を設定します。以下が今回の課題を実装した例です。i

React で表示する文字に色をつける！Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「_xxxx.tsx_」でインポートする方法を使います。CSS で記述すれば簡単！前回の連載のVue 公式チュートリアル（英語版）をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ３の実装例です。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_」をインポートし

React で変数を表示する！React のフレームワークを利用して、Vue の公式チュートリアルと同じことをやっています。二回目は、Javascript の変数を表示する方法です。あまり Vue と変わりません！Javascript の変数Vue では HTML、CSS、Javascript を記述する場所が、xxxx.vueファイルのタグで決められていました。React で Typescript を利用する場合には、xxxx.tsxというファイルがこれに相当するファイルになりますが、基本的にこのファイルは、Typescript を記述するファイルです。したがって、普通に Typescript の変数（定数）を作れば良いだけなので簡単です。Tαypescript で書いているので、変数（定数）の型名を明示的に書くとコンパイル時に、変数（定数）を利用する際の型のチェックをしてくれるので、実際にプログラムを実行する前にミスを見つける事ができます。今回の例では、「count」という定数を作って表示させているので、変数の宣言はconst count: number = 0; のように行います。この定数の型は数値（number）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。ステップ２のコードの例以下のコードがステッ

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

Vite でプロジェクトを作る従来は、Vue CLI や create-react-app などのスクリプトを利用してサンプルのプロジェクトを作っていました。最近は、「Vite」というビルドツールがよく利用されているようなので簡単に紹介します。色々なフレームワークで利用可能React や Vue などのフレームワークを利用する際は、多くの場合は、パッケージ管理アプリのnpmなどを利用して開発するケースが多くなっています。もちろん、HTML に組み込む形で、利用する事も可能ですが、多様なモジュールを利用する場合も多く余り現実的ではありません。以前は、Vue の場合は、「Vue CLI」や、React の場合は、「create-react-app」などのスクリプトを利用してサンプル（テンプレート）のプロジェクトを作って利用するというのが一般的でした。これに対して、Vite を利用すると、Vue でも React などのフレームワークでも、同じような要領でサンプルのプロジェクトを作成することができて、開発用のサーバーや公開用のイメージの作成もできるという結構便利なツールです。簡単な使い方使い方は極めて簡単です。$ npm create vite と入力するだけです。コマンドラインで細かい指定をすることもできますが、単純に上のコマンドを実行すると、プロジェクト名や、利用するフレームワークを聞いてくるので、質問に答えて行くと目的のサンプルプロジェクトを作成できます。プロジェクトを作成した後に、プロジェクトのフォルダに移動して$ npm install を実行して、必要なモジュールをインス

React が面倒な理由フロントエンドのフレームワークは、React と Vue がよく利用されています。どちらを学習した良いのかを迷う人も沢山いらっしゃいます。基本的に大きな違いはありませんが、React の方がやや面倒な部分があります。この記事では、React が面倒だと思う人が多い理由を紹介します。基本パッケージのコンセプト一番の大きな違いは、基本パッケージの考え方です。 簡単に言ってしまうのならば、React は Javascript の中に HTML に近い記述（JSX）を書けるようにしたパッケージという事です。 一方で、Vue の方は、フロントエンドの開発の基本的な仕組みという感じです。人によって表現の仕方が多少違っていますが、React の場合は、フレームワークというより、「ライブラリ」というような表現をする人がいます。こちらの方が、フレームワーク（仕組み）というより、React の実態に合っているのかもしれません。一方で、Vue の方は、フレームワーク（仕組み）に近いコンセプトになっています。これでも、まだわかりにくかもしれませんのよね？ もう少し、簡単に言うのならば、Vue は色々な機能が予め詰め込まれています。一方で、React の方は、色々な事をやるのには、外部のパッケージを追加していく必要があるという感じになっています。大きな違いは何処に？よく利用する機能で見てみると＊　データの一括管理（Redux / Vuex)＊　仮想 URL(React Router / Vue Router)　あたりが違います。データの一括管理は、複数の「部品」でデータを共有する

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法

効果的な Web 開発の学習のやり方プログラミングの学習のやり方には色々ありますが、この記事では Web 開発の上手いやり方を考えてみました。Web 開発の基本は？当然ですが、Web 開発の基本は、HTML と CSS になります。 従って、いずれにしても、HTML と CSS の基本は学習する必要があります。 これは、ページの記述をするのに必要最低限の内容です。これに加えて、実際のデータを処理するためには、プログラムを書く必要があります。これには、Javascript が必要になります。最初に学習する際は、とりあえずバックエンドの開発は必ずしも必要はないので、まずはバックエンドの件は「今すぐに学習する必要はない」と割り切って先送りすると考える事にします。もう一つは、フレームワークです。全て、Javascript で書くとなると大変大きな労力です。そう考えると、フロントエンドのフレームワークを学習の候補に入れておく方が開発がスムーズに進みます。このように考えると、Web アプリの開発に必要な学習項目は：＊　HTML＊　CSS＊　Javascript＊　フロントエンドのフレームワーク　と言う事になります。始める前に考える事一応、学習項目が揃いました。ではもう少し、具体的な内容を決めて行くのが次のステップです。普通に考えると、一つ一つ順番に学習して行くと言うのが一般的な手順です。 しかし、HTML、CSS、Javascript、フロントエンドのフレームワークも学習する内容が沢山あります。 時間を十分にかけられる場合は、ある程度順番に学習していけば良いので、まずは、HTML と CS

React と Firebase でブログサービス〜ファイルのアップロード編React と Firebase を組み合わせて利用する例として、ブログサービスを作ってみる事にしました。一度に全部紹介するのは難しいので連載という形で紹介していきます。最初は、ブログの記事をインターネット上にアップロードする機能から紹介していきます。まず最初は投稿の機能ブログサービスで必要になる機能に、記事を投稿する機能が必要になります。 今回は、ブログの記事の原稿となるファイルをインターネットにアップロードする機能について紹介します。 Firebase を利用する場合、データベースに記事を保存する方法もありますが、今回は記事の原稿のファイルそのものを Firebase のストレージに保存する方法を採用しようと考えています。どのようなファイルをブログの原稿にするかを決める必要がありますが、まずは、ファイルを Firebase のストレージに保存する機能が必要です。この記事では、Firebase のストレージにファイルを指定したファイルをアップロードする機能について考えてみました。ファイルの指定まずは、アップロードするファイルを選択する機能が必要です。 ファイルを選択するフォームを作成します。HTML の「input」タグを使ってファイルを選択して、ファイルをアップロードする処理を呼び出すような UI です。 ファイルは、Firebase ストレージの「test」というフォルダの下にアップロードするようになっています。(post.tsx)の例export default () => {  retu

React Router で良く起きる問題！　〜　ページがない！React Router を利用すると、React で作成したアプリを複数のページで構成する Web サイトとして構成することができます。しかし、実際に Web サーバーで公開すると「ページがない！」というエラーが発生する場合があります。一体何が起きているのでしょう？React Router は何をしているのか？React Router は一体何をやっているのでしょうか？ React Router は、React の拡張機能で、Web ブラウザでページの URL を指定すると、別のページがあるように表示できる機能です。この時、どのページを表示するかを決めているのは実は React が作った、Javascript のコードでページを作っています。ところが、この処理を普通は Web サーバーが行なっています。通常は、Web サーバーが Web ブラウザが指定された URL をもとに Web サーバーにリクエストを送って、Web サーバーがどの表示するかを決めて Web ブラウザに表示するページを送っています。このどのページを表示するかを決める処理を「ルーティング」と呼んでいます。サーバーにはページがない！React で React Router を使って利用している場合には、React が表示するページを作って、index.htmlに表示させています。つまり、「サーバーにはそのページはない」のでエラーになります。でも、React の開発用のサーバーを「npm start」で起動して動かすと問題なく動きます。 これは、R

Firebase で React アプリをホスティングするFirebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。React アプリのサンプルプロジェクトを作成最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。$ sudo npm install -g create-react-app　(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。

Firebase ホスティングはプログラミングとの相性も抜群です！Firebase ホスティングは、LP との相性が良いことは既に紹介しましたが、勿論プログラミングとの相性も抜群です。Firebase の他の機能である、データベースやストレージと組み合わせて、React や Vue といったフロントエンドのフレームワークと組み合わせれば本格的な Web アプリケーションを短期間で開発する事が可能です。Firebase の他の機能との連携を考えると、一番相性が良いのは Web アプリケーションという事になります。React や Vue と連携する！React や Vue はフロントエンドのフレームワークと呼ばれる仕組みで、Web ブラウザで動作する UI などを作成するのに適した仕組みです。HTML/CSS と Javascript を組み合わせれば、特にフレームワークを利用しなくても Web アプリケーションを作成することは可能です。しかし、React や Vue などのフレームワークを利用すると、より効率的に UI を開発することができるので便利です。一方で、実際のデータなどの処理は Javascript で書くことになりますが、データを保存する必要がある場合は、通常は Web サーバー側で用意したデータベースなどを利用する必要があります。WordPress の場合は、Web サーバー側で、PHP のバックエンドサービスと、SQL データベースを利用してこうした機能を提供する仕組みになっています。Firebase を利用すると、こうしたバックエンドのサービスの機能やデータベー

昨日は「もりけん塾」でフロントエンドエンジニアを目指す方への勉強会でした過去最多の参加希望応募で盛り上がりました。定期的にやっていきたいと思います。ぜひ、自分のサービスをご購入くださいませ。一緒に頑張りましょう

Redux の罠React などでフロントエンドの開発をする場合、Redux を利用するとデータをページ間で共有できるので便利です。しかし、Web ブラウザが動作している PC のメモリを多く消費する場合があるので注意が必要です。Redux の活用React などの開発で、少し複雑なページ構成でフロントエンドのアプリやサービスを開発する場合、ページ間やコンポーネント間でデータの受け渡しが結構面倒になります。シンプルな場合は、パラメータを利用して渡せば良いのですが、ページやコンポーネントの関係が複雑になると結構大変です。そうした場合に利用されるのが Redux です。要はサービス（アプリ）全体でまとめてデータを管理する仕組みで違うページやコンポーネントから共通のデータにアクセスできるので便利です。React のフレームワーク自体はこうした、データをまとめて管理する機能がありません。従って、データをまとめて一元管理する場合は、外部のモジュールである Redux を利用する場合が多くなっています。設定が面倒な Reduxところが、Redux 自体は React とは別のモジュールになるので、慣れないと設定が面倒なので、初めて学習する方には厄介な代物として扱われる事が多くなります。一旦、設定の仕方と、データをやり取りする仕組みを理解して仕舞えばそれほど難しい物ではありませんが、必要な設定を行うファイルや仕組みがわかりにくいので初心者には何をしているのかがよく見えずに使いこなすのに苦労している方が多い様です。やっている事自体はシンプルで、データを更新する際には、「Reducer」と呼ばれ

簡単にわかる Web サーバーの仕組み？Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム（コンピュータとソフトウエア）をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ（これが URL と呼ばれる物です）の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像（写真や動画、イラスト）のファイル、また Javascript のファイルなどが含まれているので、そうした情

Django で REST API を実装するには？Django は基本的にバックエンドのフレームワークで、サーバー側でレンダリングを行う事ができます。しかし、場合によってはフロントエンド側で処理を行った方が良い場合も結構あります。その際、必要になるのが REST API です。この記事では Django で REST API を実装する方法を紹介します。REST API のフレームワークを利用します！Django で REST API をサポートする場合、REST API のフレームワークを利用するのが簡単で便利です。DJango は Web サービス・Web アプロを実装する基本的な機能は予め用意されていますが、REST API のフレームワークは別途インストールする必要があります。インストールは、pip を利用して行います。 仮想環境が有効になっていることを確認してインストールします。仮想環境になっていないと、システム全体に適用されてしまいます。$ pip3 install dijangorestframework　これに続いて、プロジェクトフォルダの「settings.py」にこのフレームワークを登録します。 登録は、「INSTALLED＿APPS」に「rest_framework」追加します。# Application definitionINSTALLED_APPS = [    # 'srd7.apps.Srd7AdminConfig',    'django.contrib.admin',    'django.contrib.auth',    'django

Reactで作るかNextで作るか？NextでFirebaseのデータベースを利用する場合の方法を紹介してきました。 これまでの投稿では、＊　Nextの機能を利用してバックエンド側とのAPIを使う方法＊　表示のページを分けて全てサーバー側で処理する方法 を紹介してきました。この記事では通常のReactで利用している方法を紹介します。その上で、WebアプリやWebサービスの実装でReactで作るか、Nextで作るかを考えてみました。　　　通常のReactで利用している方法これは、ReactやVueでFirebaseを利用する場合のやり方と全く同じです。 「Webブラウザ」で動作するコードでFirebaseのデータベースにアクセスするためのAPIを呼び出せば使えます。設定のやり方も同じです＊　npmを利用する場合は「firebase」のモジュール（パッケージ）をインストールする。＊　npmを利用しない場合は、CDN(Contents Delivery Network)のリンクをHTMLから呼び出す（「Heed」を使ってリンクを呼び出します）＊　Firebaseのプロジェクト情報を元にFirebaseの初期化を行う　　Firebaseのアクセスは、Webブラウザで動く部分のコードで利用するという感じで、この方法の場合、Nextで特別な事をする必要はありません。注意点は、Reactで利用する場合と同じで、セキュリティルールを別途作成して、アクセスの権限をきちんと管理する事くらいです。これもReactで利用する場合と変わりません。バックエンドとフロントエンドの両方で使えるか？ここで、疑問

Nextでサーバー側に処理を集めた実装例Nextでサーバー側に処理を集めた実装例を紹介します。 実装内容は、前回紹介したAPIを利用したものと機能的には同じものです。 ページの「Get」ボタンを押したら、Firebaseのデータベースのデータのリストを表示するというシンプルなものです。２つのページで実装今回は、Webブラウザー側のコードを最小限にしてシンプルな実装にしています。 実装は２つの別々のページで実装します。ボタンだけのシンプルなページFirebaseのコレクションデータを表示するページに分けて実装します。実際は、ボタンではなくリンクを使って別のページを読み込むようにしておいて、Firebaseのコレクションデータを表示するページがリクエストされたら、バックエンド（サーバー）側でFirebaseのデータを取得してリストを表示するページを作ってWebブラウザーに送るという仕組みにします。最初のボタンのページの例ですimport * as React from "react";import Head from "next/head";class Sample extends React.Component {  render() {    return (      <React.Fragment>        <Head>          <title>Create Next App</title>          <link rel="icon" href="/favicon.ico" />       

Next と React は結構違います！Next は React で利用している、仮想 DOM を活用しているので似ている部分も多いのですが、設計の仕方は結構違う所もたくさんあります。React の場合、React Router を使うと「ページ」という概念での設計も可能ですが、基本的には、「１ページアプリ」の要素の方が強くなっています。 一方で、Next の場合は、サーバー側で「ページを用意する」というイメージで動作するので、設計は基本的にはページ単位ですることになります。Next の基本的なコンセプトは「ページ」Next で Web アプリや Web サイトを設計する場合、ページ単位での実装を考えると上手くまとめる事ができます。 もちろん、同じページで Web ブラウザ側でレンダリング（描画）する事もできるのですが、別の画面にする場合は、ページごと入れ替えてしまった方が設計上はシンプルでスッキリした実装になります。Web ブラウザで表示を動的に変えるような実装の場合、React などのフロントエンドのフレームワークを中心に作った方が実装もスッキリします。Next でページを設計する上で考えることは、「いつ」ページを作るかです。「いつ」とはどういうことかというと、大きく分けると２つです。＊　Next の公開用のイメージを作る時＊　Web ブラウザがリクエストした時　　最初にすることは、Web アプリや Web サイトで必要なページがどちらのタイプなのかを分類する事が最初の作業になります。基準はシンプルで、同じ画面を表示する場合は、Next の公開用のイメージを作成する際に作

Reactのステートは注意が必要です！Reactを利用してフロントエンドのUI（ユーザーインターフェース）を作ると、変更があった部分だけを書き換えてくれるので便利です。これに関連して、前回投稿した変数の扱いでReactのステートを使う場合には注意する必要があるという話を書きました。これに関しては、ご質問が多かったのでもう少し詳しく書いて行く事にします。この機能を利用するには「ステート（state）」で変数を管理して、ステートの変化のイベントを検出する必要があります。ところが、配列やオブジェクトはReactのステートではイミュータブルではないので、正しく実装しないと意図した動作をしない事があります。入力した文字列を配列に追加するアプリ少し具体的な例で説明をします。 シンプルなあぷりとして、文字列を入力する「input」とボタンのシンプルなフォームでボタンが押されたら、入力された文字列を配列に追加するアプリを考えます。これを、Reactのクラスコンポーネントで書くとimport React from "react";import { produce } from "immer";import "bootswatch/dist/spacelab/bootstrap.min.css";import "./App.css";interface IProps {}interface IState {  samples: Array<string>;}class App extends React.Component<IProps, IState> {  privat

Facebook投稿支援アプリにReact/Vueは必要か (6)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、HTMLファイルをベースとした実装例として、シンプルなHTMLとJavascript、jQuery、CDNをベースにしたReactとVueの実装例を紹介してきました。前回の記事でまとめたように、ReactやVueを使う場合、「npm」を利用してReactやVueのプロジェクトを作成して開発した方が便利です。ReactやVueを利用した開発の殆どは、CDNではなく、「npm」が利用されています。この記事では、「npm」を利用したReactの実装例を紹介しています。パッケージを管理する「npm」Node.jsをインストールすると、合わせてインストールされるのが「npm」というパッケージ管理ツールです。このツールを利用すると、インターネット上で公開されているNode.js（Javascript）のパッケージを自分のWebアプリやサービスに取り込んで簡単に利用できます。少し規模の大きなWebアプリやサービスの場合、そうした既存の公開されているパッケージを利用できるので開発の効率が向上します。もちろん、CDN(Contents Delivery Network)で、HTMLファイルから読み込めばこうしたパッケージも利用できるのですが、規模が大きなアプリやサービスの場合、npmで取り込んでしまった方が便利です。Node.jsは、オフィシャルサイトからダウンロードして簡単にインスト

Facebook投稿支援アプリにReact/Vueは必要か (5)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、シンプルにHTMLとJavascript、jQuery、React、そしてVueを利用して実装してみました。プログラムでやっている事はほぼ同じで、サンプルにしたアプリもシンプルな物なので、大きな差はないというのがこれまでの結果です。この記事では、どういうケースにReactやVueの真価が発揮できるのかを考えてみました。シンプルなHTMLで実現出来る場合は大きな差はない！はっきり言えるのは、シンプルなHTMLで十分なアプリの場合は殆ど差が出ないと言えます。 画面の基本構成が決まっている固定のフォームだけで実現できる場合、多少Javascriptのプログラムの書き方が変わりますが、HTMLの部分は殆ど代わりがなく、jQuery/React/Vueの方がHTMLの部分とJavascriptのインターフェースが上手く設計されているため、コードが幾分シンプルで見やすくなる事がメリットです。 それ以外の部分では、Javascript部分は、UIのボタンが押されるなどのイベントの処理とデータの処理でやることがほぼ同じ処理になるので差が出ないということです。Webアプリやサービスの実装でVueを利用する場合は、Reactと同様にnpmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。Vueの場合、「Vue CLI」と呼ばれるプロジェクト管理用のパッケージが

Facebook投稿支援アプリにReact/Vueは必要か (3)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、jQueryを利用して実装してみました。プログラムでやっている事はほぼ同じですが、記述をシンプルにすることが可能になりました。この記事では、Webアプリやサービスの開発によく利用されるReactを使って実装してみました。Reactの実装はnpmを利用する場合が多い！Webアプリやサービスの実装でReactを利用する場合は、npmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。 このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。今回は、通常のHTMLとJavascriptの実装や、jQueryとの比較も考えているので、敢えてnpmを使わずに、jQueryの場合と同様に、CDN(Contents Delivery Network)で必要なモジュールをHTMLで記述したWebページに取り込んで実装をしてみました。ReactをCDNで利用する場合以下のようなリンクをHTMLに記述して利用します。<script      crossorigin      src="ｈｔｔｐｓ://unpkg.com/react＠17/umd/react.production.min.js"></script><script    crossorigin    src="ｈｔｔｐｓ://unp

Typescriptの基本設定は？先日投稿した記事で、機会があれば Typescript を学習することをお勧めするという事を書きました。今日は実際にどのように Typescript を使うのかもう少し具体的な事を記事にしてみました。実行は Javascript!ご存知の方も多いと思いますが、実際に Web ブラウザが実行できるのは、Typescript ではなく、コンパイルして作られた Javascript です。従って、Typescript で書いたからと言って Typescript を実行するわけではありません。理由は簡単で、互換性の制限もあって、Web ブラウザーが実行できるのはあくまで Javascript だからです。つまり、Typescript で書いたプログラムはコンパイルをして、Javascript に変換しないと実行できません。Typescript を使うメリットは？実行されるのが Javascript なら、なぜ Typescript を使うのが良いのかと疑問に思う方がいるかもしれません。実は、この Typescript から Javascript に変換するコンパイルが最大のメリットです。このコンパイルが Javascript では見つけづらいコーディング上の問題をチェックしてくれるのが Typescript が利用される理由です。型の宣言をきちんと守って書かれた Typescript の場合、宣言と違う型の代入や、要素の一致しない JSON や、関数のインターフェース、変数の初期化などをコンパイルする際にチェックして、知らせてくれます。従来の Java

VueとReactで迷ったらどうする？Web 開発のフロントエンドのフレームワークとしてよく利用される Vue と React ですが、どちらを学習すれば良いか迷うことも多いと思います。この記事では、迷った時にどうしたら良いのか、独断と偏見ですがガイドラインを書いてみました。人によって考え方は色々だと思いますが、一人の意見として読んで頂ければと思います。迷うと言うことは強制力はない最初に言えることが、どちらか迷うと言う事はその選択に「強制力」はないと言う事です。「強制力」とは顧客の要求や、会社の方針でどちらを使うかが指定されていたりする場合を指します。この場合は、選択の余地は殆どないので、方針に従うと言うのが選択肢だといえます。就職を目指す場合は、就職を目指す会社を調べてみると良いかと思います。会社の方針として、利用するフレームワークをある程度決めていることがわかった場合は当然その方針に合った方を学習した方が有利です。案件によっては、両方使い分ける方針の場合は迷いますのでこの後を読んでみてください。！統計的な数値は？インターネットで検索をしてみると、世界的には React を利用するケースが多いようです。実際にシリコンバレーの求人をみてみると React ができる人を求める方が多いようです。ただし、日本に注目すると、Vue と React は結構近い数字が出てきます。最近では、Vue の人気も高まっているように見えます。フリーランスの場合は、仕事はある程度自分で選べますが、会社で働くことを考えると React の方が有利に見えます。初心者が学習する場合初心者が学習する場合はどう

Frameworkとは何か？絶対に必要な「中身」！プログラミング関連の記事や投稿を見ていると Framework(フレームワーク)という言葉を良く聞きますよね？皆さんは、Freamework（フレームワーク）というのを何かご存知ですか？Web 開発の世界では、良く利用される React や Vue などもフレームワークと呼ばれています。言葉の定義なので React は Library(ライブラリ)と言う人もいますが、簡単に言えば、「フロントエンドのインターフェースを作るための仕組み」です。もう少しわかりやすく言えば、「箱」みたいなものです。普通の生活で箱をどう使うかと言えば、中に「物」を入れるのに使いますよね？逆に言うと、中に入れるものがないとあまり役に立たない物です。Web 開発で言う「物」とは何か？Web 開発の場合、この「物」に当たるのが、Web サイトから配信する「コンテンツ」です。 これは、単に情報だったり、Web を通じて配信するサービスやアプリだったりします。この「コンテンツ」（配信する中身）があって初めて生きる物です。この記事は、色々あるフレームワークでも、Web 開発でよく利用されている React や Vue を中心としたフロントエンド開発のフレームワークにフォーカスしてお伝えしていきます。実は、React にしても、Vue にしてもフレームワーク自体は余り難しいことはありません。 基本は、HTML で画面の配置を決めて、表示するデータの処理を Javascript（Typescript）で行っているだけです。あとは、その書き方が違うだけで基本は同じです。コ

FirebaseとSendGridを使って送信者の登録を行うには？FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridといろいろな情報を取得する必要があります。 今日は、メッセージの送信者の登録を中心にお届けします。 前回、SendGridに登録されているメッセージ配信先の取得についてお届けしました。 SendGridのAPIの定義の仕方を見るとわかりますが、SendGridとのやり取りの操作の内容は大きく分けると： ＊データの追加 ＊データの取得（読み出し） ＊データの更新 ＊データの削除 になります。例外もありますが、これをHTTPのメソッドで分類して区別しています。 ＊データの追加 POST 登録データ ＊データの取得 GET なし 一括取得 ・個別取得 ＊データの更新 PATCH 更新データ ＊データの削除 DELETE データのＩＤ 前回の例では、SendGridに登録されている送付先の一括取得の詳細をお伝えしました。 基本的なバックエンドの処理は同じ！ データの操作方法や対象とするデータによって詳細のコードは変わってきます。 しかし基本的な処理の「枠組み」は同じです。 app.post(URL,(req:express.Request, res:express.Response) => {     // 登録の処理 }) app.get(URL,(req:express.Request, res:express.Response) =&gt

FirebaseとSendGridを使って登録送付先を取得する方法FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridからいろいろな情報を取得する必要があります。 SendGridのサーバーとやり取りをするためには、SendGridのAPIキー（秘密鍵／secret key）が必要になります。従って、実装はフロントエンドが直接SendGridのサーバーとやり取りをするのではありません。バックエンド（サーバー）側のサービスを介してSendGridとやり取りをします。 この記事ではまず、SendGridに登録した送付先をバックエンドを介して取得する方法を解説しています。 バックエンドの実装 まず最初にSendGridと直接やり取りをするバックエンドの実装例です。 SendGridに登録した送付先を一括取得する部分のコードです。 バックエンドのサーバーのフレームワークにはexpressを利用しています。 事前にexpressのパッケージをnpmを利用してインストールする必要があります。expressの詳しい実装例はこちらの記事をご覧ください。 SendGridのサーバーから、登録した送付先を一括取得するAPIは「contactdb/recipients」をHTTPの「GET」のメソッドでSendGridのサーバーに送ります。 HTTPの送信にはaxiosを使っています。バックエンドのファンクション（functions）をフロントエンドと別々にWebホスティングする場合には

FirebaseとReactでブログを実装！FirebaseでWebホスティングをすれば、無料でWebサイトの運営をスタートできます。 Firebaseの利用事例としてブログサイトの運用を取り上げてみました。 この記事ではシンプルなブログの運用例としてフロントエンドのフレームワークのReactを使った事例を何回かに分けて紹介していきます。 利用するFirebaseの機能は？ この事例で利用するFirebaseの機能は * Firebase ストレージ * Firebase Cloud Firestore （データベース） * Firebase ホスティング の３つの機能です。 Firebaseストレージで記事を保存 ブログの記事はFirebaseのストレージに保存します。こうすることで、Fireabaseのホスティングに毎回デプロイすることを避けることができます。 一番シンプルな方法は、毎回記事のHTMLのファイルを作成して、その都度その記事をWebサイトに追加していく方法ですが、毎回Webサイトのデプロイを行わなければならず、運用上はちょっと面倒な仕組みです。そこで記事自体はFirebaseのストレージに保存しておいて、プログラムでFirebaseストレージのファイルを読み込んで表示するという仕組みを作れば、サイトの運営がシンプルになります。 Firebase Cloud Filrestore(データベース)に記事情報を保存 Firebaseのストレージだけでも、ブログサイトの仕組みは作れますが、将来的なサイトの拡張を考えると、各記事の情報をデータベースで保存して

FirebaseでReact Routerを使うには？FirebaseとReactという組み合わせは、Webアプリ、Webサービスを作る場合よく利用される組み合わせです。 Reactと合わせて利用される機能にReact Router (react-router-dom)があります。これは、React内でページを切り替えるための機能の拡張ですが、実際のWebサイトのページを切り替える感覚で利用できるので便利な機能です。 例えば sv-sw.com/firebase のようにドメインに続いて「firebase」のようにパス（Path）を指定すると、そのページがあるかの様に表示を切り替えてくれる機能です。 Reactのアプリのページは基本的に「１ページ」 よく、１ページアプリとも言われますが、実際にReactが使っているページは、通常は「index.html」だけです。Reactのプログラム内で、「firebase」というページ（のようなもの）を作った場合でも、実際のページは存在しません。 実は、この辺りが、実際にWebサーバーにReactアプリを公開しようとする場合（デプロイする場合）にちょっと混乱する部分です。 Webホスト（サーバー）が管理している「ルーティング」 元々は、Webサイトの全てのHTMLファイルはWebホスティングしているWebサーバーにおいてあって、ブラウザから要求されたファイルをWebホストが提供していました。最近のWebサイトは実際のファイルがない場合も多く、仮想ファイルをサーバーが判断してWebブラウザに提供しています。 サーバー側でのレンダ

FirebaseでWebサイトを作れるの？Firebaseにはホスティング機能があるので、FirebaseでWebサイトを作れます。 しかも、最初は無料でスタートできます。運営してく過程でアクセス数や使用している容量が無料の範囲を超えると料金が発生しますが、殆どのサイトの場合は無料の範囲内でも十分運営ができる場合が多いです。 Firebaseを利用したWebサイトとして考えられるのは大きく分けて３種類です。 * 従来のHTML/CSSなどを主体としたシンプルなサイト * フロントエンドのフレームワーク（ReactやVue）を利用したサイト（Webアプリも含みます） * サーバー側のレンダリングも含めたサイト（Next/Nuxtなどを利用） です。 多くのWebホスティングは、WordPressを主体としたWebサイトのホスティングを前提にしている物が多いですが、Firebaseの場合は、必要に応じて目的のサイトにあったWebホスティングの形態を選ぶことができます。Webサイトだけではなく、ランディングページも簡単に作成できます。 従来のHTML/CSSを主体にしたシンプルなサイト HTMLやCSSを中心に構成される従来型のシンプルなサイトは、簡単にFirebaseでWebホスティングできます。もちろん、HTMLファイルからJavascriptなどのプログラムも動かす事も可能です。 こうしたサイトを作るのに必要な事は、必要なHTML/CSSのファイル、さらに必要な場合は画像ファイルなどの素材やJavascriptなどのファイルを準備するだけです。 後は、Firebas

FirebaseをReactやVueで利用するには？フロントエンドのフレームワークで多くの方に利用されているReactやVueですが、Firebaseと組み合わせるといろいろなWebサービス・Webアプリが実現可能です。 Firebaseがデータベースやユーザー認証（ログイン）の機能を提供してくれるので、バックエンドを気にせずにいろいろなサービスを初心者でも簡単に実現できます。こうしたフレームワークの枠組みの中でFirebaseの機能を利用するには、Firebaseを使うための準備（設定や初期化）が必要になります。 Firebaseの設定はFirebaseのプロジェクト毎に異なります！ Firebaseを利用するには、最初にFirebaseコンソールでFirebaseのプロジェクトを作成する必要があります。 Firebaseの初期化に必要な情報は、このFirebaseプロジェクト毎に異なるのでプロジェクト毎の情報を取得して必要な設定を行う必要があります。 一番簡単な設定はHTMLファイルでCDN等の設置を読み込む方法です Firebaseのドキュメンテーションで詳しく説明されています。また、FirebaseコンソールでFirebaseプロジェクトを作成すると、設定の方法が表示されるかと思いますが、HTMLファイルで、Firebaseのスクリプトを実行する前にCDNの情報を読み込む方法が出てきます。 Firebaseでホスティングをしている場合、自動（Automatic）の機能を使って簡素化できますし、CDN(Content Delivery Network) を利用し

Firebaseホスティングに必要な容量は？ReactとNextの比較Firebaseの利用料金は使用する容量も関係します。 そこで、サーバーサイドでレンダリングするNextとブラウザでレンダリングするReactでどの程度の差があるのかを実際の実装を基にデータを取ってみました。 最近、Firebaseのバックエンドの実行環境が変わっていろいろなポリシーが変わったようで、使用している容量が大きくなているので調べてみました。 Firebaseのホスティングに関係する容量は？ Firebaseでホスティングする場合に関係する使用容量は2種類あります。 ホスティングで使用している容量 ストレージで使用している容量 です。この内Webホスティングで使用している容量は基本的にWebページ関連の容量で、大きなビデオや写真などのイメージがない場合はそれほど大きくならないのが普通です。 比較の例として、最近運営してる記事の投稿サイトを例にしてみました ＊　Firebase関連の記事のサイト ＊　趣味の登山のサイト です。どちらも似たようなサイトにしてあります。 Firebase関連の記事を投稿しているサイト このサイトは、Nextを利用して実装しています。サーバー側で表示するページを動的にレンダリングして記事を表示するようにしています。 殆どイメージは使用していないので、記事の平均的なサイズはせいぜい数十KBです。従って使用容量を見る際に記事の件数はサイズには余り影響が出ません。 趣味の登山のサイト このサイトは２つのReactアプリを実装しています。 一つは記事の投稿サイトで

FirebaseとReactで作るお問合せ管理Vueでの事例を紹介しましたが同じアプリをReactで！ 前回はフロントエンドのフレームワークとしてVueを使ってFirebaseの機能を取り込んだWebサービス・Webアプリの事例を紹介させて頂きました。 今回は、Vueとならんで広く利用されているフレームワークReactを使った事例を同じお問合せフォームの管理アプリで紹介します。FirebaseとReactを組み合わせて使う場合、Vueの場合と同様に「npm」の活用が便利です。Firebaseのモジュールもインストールしてしまえば、簡単にReactのプロジェクトのコードから呼び出す事ができます。Reactを使うための準備「create-react-app」のインストール Vueの場合Vue CLIを使いましたがReactの場合は、「create-react-app」を使います。このパッケージを使うとReactのサンプルプロジェクトを作成してくれます。VueのようなUIはサポートされていませんが実用上は全く問題ありません。 「create-react-app」のインストールは以下のコマンドで行います。 $ npm install -g create-react-appReactのプロジェクトの作成create-react-app」のインストールが済んだら、まずReactのプロジェクトを作ります。VueのようなUIはありませんがコマンドを一つ実行するだけです。 $ npx create-react-app [プロジェクトの名前] --template typescript 今

Webサービス関連の開発をやっていると良く聞く言葉に「REST API」というのがあります。この言葉の定義自体は面倒な説明がされていて非常にわかりにくい気がしますこの言葉の意味や定義はさておき実際に利用するのは簡単です！一言で言ってしまうと「外部のWebサービスの機能を使う仕組み」です基本的にはURLに「おまけ」のデータをつけて送ると外部のサービスとあなたのプログラムからやり取りができるという「仕組み」ですたとえば、「登録ユーザーのリストをください！」とか「メールを送って！」というような要求を外部のサービスの機能を使ってやる場合に利用します。今月はこのネタでブログの連載をする予定です！これが使えるようになるとあなたのWebサービスに外部のサービスを簡単に組み込めるようになります。

フロントエンドのフレームワーク（ライブラリ）としてよく使われる両者です初めての方はどちらを勉強した方がよいか迷いますよね？一言で言ってしまえばどちらを選んでも大丈夫です！出来る事は殆ど同じで大きな違いはありません。最終的には好みの問題かと思います！それでも、最初は両方勉強するのは負担ですよね？なので、何回かに分けてその違いをブログで投稿します！入りやすいのは？個人的にはVue.jsの方が最初は入りやすいと思います！その理由は：1．基本の概念は、HTML/CSS/JavaScriptでできる。2．オブジェクト指向の概念が無くても使いやすい3．子から親へのデータの受け渡しができる（Reactは基本的にできない）4．1か所でまとめてデーターを管理する場合の設定や使い勝手が簡単　　React+Reduxで同じことができますが、設定や使い方は少し複雑5．一つのページ（部品）を一つのVUEファイル（xxx.vue）表現できる　　VUE　CLIを使うと部品化して、再利用しやすさいしょチョット戸惑う部分は<template>（HTML部分）と<script>（JavaScript部分）の関連付けのやり方が通常のHTML・JavaScriptの書き方とは違うところは慣れが必要です。もう一つは、JavaScript部分の書き方が独特の形式になっているこの部分は、HTMLとJavaScriptの基本がわかっていれば、「書き方」を覚えればよいだけなので数日もあれば慣れます。Reactの方が慣れるには時間がかかる！Reactの場合、JavaScriptの中にHTMLを埋め込んだよ

公開してもいいよと了承いただいたので、アップしました。今年１発目にお声がけいただいたプロジェクト。UIやプログラムの分割にこだわりを持つお客さま。何度かやりとりさせていただき、ある程度のものが完成しました。今回も勉強になりました。コンポーネントはマテリアルデザインベースのMaterial UIを採用しました。というわけで、Reactエコシステムのど真ん中案件でした。「rehop.dev/app0」契約しているサーバーです。メニュータブの動きが好きです。ぜひアクセスしてお試しください。

モダンなWebシステムのフロントエンドの一つ、React.js。Facebook製ということもあり凄くメジャーですが、仕事では一部のプログラムやバックエンド（サーバー側）処理を修正していた程度で、本格的に一から作り上げた事はありませんでした。自分のサーバーでDocker、SSL、プロキシ環境作ったので、これを機にReact.jsも本格的に再学習して、何かシステム作ろうと思います！まずは簡単な注文ページをビルドして配置。Reactなだけあって、ボタンを押したときなどアプリのように反応が早くスムーズです。rehop.dev/app0 （画像の通りのURL）でアクセスしてみてください。