絞り込み条件を変更する
検索条件を絞り込む
すべてのカテゴリ
新着有料ブログ
即行動！決めたその瞬間から始める生き方
占い
500円
スピリチュア...
2024/05/11
不倫とスピリチュアルカルマの解消法
占い
500円
霊感霊視 リ...
2024/05/10
5月10日のスイーツアイコン
デザイン・イラスト
500円
mohumo...
2024/05/10
「即利用可」宅配ドライバー 業務委託契約書 ...
法律・税務・士業全般
4,000円
行政書士三浦...
2024/05/10
.png)
より美しく、より精細に
デザイン・イラスト
1,000円
akarui...
2024/05/10
ゴードン_血小板減少症_診断後2週間
学び
2,000円
まいける 看...
2024/05/10
.jpg)
恋の願いを叶える！神社でご利益 恋愛成就の秘訣
占い
500円
スピリチュア...
2024/05/10
月星座～双子座編～【購入者限定の合言葉付】
占い
500円
霊視・恋愛カ...
2024/05/10
入門英文法（英文法の実像とは）
学び
3,000円
合格サポータ...
2024/05/10
ブログ記事3
コラム
10,000円
_とも
2024/05/10
ブログ記事2
コラム
10,000円
_とも
2024/05/10
Vol.24 避けて吉なる飲食物（5月16日～3...
占い
500円
タカ 人生幸...
2024/05/10
113 件中 1 -
60 件表示
お互いに教え合う
システム開発する時に現在の運用や業種の業務の流れ（セオリー）がわからないことがあります。また、クライアント様独自の業務のやり方は教えてもらわないとわかりません。そして、クライアント様はシステムを導入することがどういう影響があるのかピンと来てないこともあります。クライアント様から現在の運用や業界のセオリーを教えてもらいます。こちらからは効率化（システム化）するための運用をご提案していきます。お互いの目線で一番いい所を模索し検討しながらシステム開発するのはとても楽しいです。これはクライアント様自身が運用の見直し・改善策を考えながらご協力頂いているおかげです。いつもありがとうございます！#hotlinuxhttps://coconala.com/services/1860090
0
ユーザーインターフェースの設計
ユーザーインターフェースの設計前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。HTML でデザインこれまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。<!DOCTYPE html><html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" />
0
Alien Web Services Melbourne, Australia
Websites don't need to have too many pages to be effectiveSuitable for Tradesmen, Restaurants, Massage businessesA benefit of a one-page websiteis that all your information is positioned in a specific order, making it easier for your audience to navigate your website and get all the information they can get when interacting with your brand. find what you're looking forOne-Page-Website SPECIAL OFFER Now Only $1000Suitable for Tradesmen, Restaurants, Massage businesses etc.Do you need a simple and beautiful “Responsive” Website? just having a website the job is not done how to maintain the website is more important. So here is what we will give you the one with the lot, We will give you 1. Pre
0
足し算以外もできるようにする
足し算以外もできるようにする穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。演算子を選べるように変更する足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。これには、HTML の記述を変更してフォームを変更する必要があります。<label>+</label> を以下のように変更します。<select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option></select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。演算子の変更を反映するプログラム側でやることは三つです。＊ 初期状態の演算子を設定する （最初にフォーム上で表示されている演算子をセットする）＊ 演算子の変更を検出して、現在選択されている選択肢を更新する＊ 「Calcullate」ボタンがクリックされたら必要な
0
.png)
Reduxのデータ処理に値を渡すには？
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
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 の場合は、公式チュートリアル（英語版）のステップ１３で紹介されているように、「_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 の公式チュートリアル（英語版）のステップ１０を基にしています。この課題は、「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 の公式チュートリアル（英語版）のステップ８では、「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 <
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 で入力フィールドの文字を表示するステップ５では入力フィールドに入力された文字を 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> <
0
React で表示する文字に色をつける！
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_」をインポートし
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 アプリで、ページ毎に表示を切り替える場合に利用されます。ところが、設定によっては、「ページが見つからない」（４０４エラー）になる場合があります。原因は、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 の基本は「１ページ」前の記事でも触れていますが、Vue などのフロントエンドのフレームワークの表示の基本は「１ページ」です。 基本になる 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 の公式チュートリアルの例では、作成したのは基本的に「１ページ」の Web アプリでした。この記事では、Vue フレームワークの「ページ」の考え方について紹介します。基本は「１ページ」！Vue フレームワークを利用した場合は、Web アプリのページは基本的に「１ページ」になります。 公式チュートリアルでは、「メインのページ （App.vue)」から「部品（ChildComp.vue）」を呼び出すような例も学習したと思いますが、これも基本的には「１ページ」のアプリです。「部品（ChildComp.vue）」も、メインのページの一部として表示されているからです。理由は簡単で、Vue のフレームワークがやっていることは、元になるページに作成した「Vue」の「部品」を Vue が埋め込んで表示をしているからです。Vue では「メインのページ（App.vue）」も、「部品（ChildComp.vue）」も「Vue の部品」として扱われています。したがって、npmなどのパッケージ管理アプリを使って Vue のアプリを開発する場合は、「index.html」というファイルが元になるページで、Vue はこのページに表示を埋め込む仕事をしているだけです。これが、 Vue や React などフロントエンドのフレームワークを利用して開発した Web アプリが「１ページアプリ」と呼ばれている理由でもあります。複数のページを扱うには？では、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
.png)
PythonのWebアプリ公開するためのサーバー費用を無料にするには？
ベナオと申します。ココナラさんでは主にDjangoというフレームワークを使った、PythonのWebアプリケーション開発をさせていただいております。WebアプリケーションはスマホとPCどちらからもブラウザさえあればアクセスできたり、iosアプリなどにある公開時の審査も無いのでサービス公開しやすいといったメリットがあります。しかし開発の経験が浅い方にとっての不安要素は、アプリを公開する際のサーバーの種類や料金になるかと思います。最も一般的に耳にするのはAmazonの提供するAWSでしょうか。Webサービスのアイデアはあるけどサーバー費用に月々いくらかかるのか分からないから不安、といった方は多いのでは無いでしょうか？今回はHerokuというサービスを紹介し、用途に応じたプランの費用をチェックしてみたいと思います。ご自分でサービス公開される場合や、開発をご依頼される場合の参考になりましたら幸いです。1. Heroku（クラウドアプリケーションプラットフォーム）個人開発者なら耳にする方は多いのでは無いかと思います。HerokuはWebアプリケーションを手軽に公開できるクラウドサーバーを提供しています。画像にもあるように、８つのプログラミング言語に対応しています。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 開発の学習例もステップ１４まで来ました。このチュートリアルはこれで基本的に最後です。ステップ１４では、スロットの使い方を学習します！前回までのポイントはポイントは？これまでの学習をまとめると大きく分けて二つです。＊ 基本的な 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 は、「部品」の方から呼び出し元（親）にデータを渡す方法を学習します。前回までのポイントは？ステップ１０までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ１１からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側（親）と呼び出される側（子）の間でのデータのやり取りです。前回のステップ１２では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは？ステップ１３では、前回とは反対に、呼び出される側（子）から、呼び出し側（親）にデータを渡す方法を学習します。まずは、変更前のコードです。(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
Vue公式チュートリアル 〜 変数の変化をチェックする
Vue 公式チュートリアル 〜 変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは？Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ９までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは？ステップ１０では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう！<script>export default { data() { return { todoId: 1, todoData: null, }; }, methods: { async fetchData() { this.todoData = null; const res = await fetch( `h t t p s://jsonplaceholder.typicode.com/todos/${this.todoId}` ); this
0
Vue 公式チュートリアル ~ Vue の部品の状態とテンプレートのリファレンス
Vue 公式チュートリアル ~ Vue の部品の状態とテンプレートのリファレンス今回は、今までとは違ったステップです。Vue の仕組みを理解するには意味のある内容ですが、初めて Vue を学習する人には、知識として覚えておけば十分です。では、早速内容を見てみましょう。前回までの復習Vue の部品の書き方の基本を使って、少しプログラムらしい例として、「やる事の一覧を管理」をするための、シンプルなアプリを前の二つのステップで学習しました。ちょっとしたアプリにしたので、初めて、HTML や Javascript を学習している人には、ちょっと学習する項目が多くなっていました。 今回の、ステップはシンプルなので、時間が許すようならば、前回までの復習を今一度やってみてください！今回学ぶのは？今回学ぶのは、「Vue の部品」の状態と、HTML の記述（template のタグの部分）で利用できる「リファレンス」の使い方です。「Vue の部品」は、Vue の中で「部品が作られる（準備される）」状態から、Web ブラウザで表示できるような状態に「組み込まれた状態」など、いくつかの違った「状態」があります。この「状態」によって、実際に表示される内容が微妙に違ってきます。変更前のコードです。<script>export default { // ...};</script><template> <p ref="p">hello</p></template> この変更前のコードだと、HTML の部分（template の部分
0
Vue 公式チュートリアル 〜 処理したデータを表示に使う
Vue 公式チュートリアル 〜 処理したデータを表示に使うVue 公式チュートリアルのステップ８は、予め処理したデータを表示に使う方法を学習します。Javascript のプログラムで持っているデータは、「生」のデータの場合が多く、実際の表示をする際には、そのデータを「加工」して利用したい場合が、たくさんあります。そうした場合の処理の仕方を学習します。前回までのポイントは？一通り、Vue の「部品」の基本的な、書き方がわかったところで、前回のステップ７からは、プログラミング的な要素が増えてきました。前回の、チュートリアルのタイトルは、「データの一覧表示」がテーマでしたが、実際は、HTML や Javascript で新しい部分がたくさん出てきました。＊ 配列（array）という同じ形のデータをまとめて扱うためのデータの型が出てきました。＊ 「＠keyup.enter」は、リターンキーが押された場合の処理を HTML の部分に書くやり方です。＊ 「v-for」は、配列（array）のデータの一覧を表示するための、繰り返しなるような表示の HTML の書き方です。＊ 処理を行うメソッド（関数）に値を渡すやり方も出てきました。「filter()」というメソッド（関数）を使うと、配列（array）の要素を選ぶことができます。＊ 「++」という「１を加える」という演算子が出てきました。＊ HTML の記述で「箇条書き」を行うやり方が出てきました。（「ul」と「li」のタグ） と実際の内容では、新しく学習した項目が多いステップでした。この他にも、以前のステップで出てきた書き方が使われていた
0
Vue 公式チュートリアル 〜 データの一覧を表示する
Vue 公式チュートリアル 〜 データの一覧を表示するVue 公式チュートリアル 〜 データの一覧を表示するVue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。前回までのポイントは？前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。今回学ぶのは？今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列（array）の中に入っているデータをまとめて表示するやり方です。例題では、「todo（やる事）」の一覧を表示するという内容になっています。<script>// give each todo a unique idlet id = 0;export default { data() { return { newTodo: "", todos: [ { id: id++, text: "Learn HTML" }, { id: id++,
0
Vue 公式チュートリアル 〜 条件によって表示を変える
Vue 公式チュートリアル 〜 条件によって表示を変えるVue 公式チュートリアルのステップ６は、Javascript の条件によって表示の内容を変える事を学習します。前回までのポイントは？前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。今回学ぶのは？今回のステップ６の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。これが今回の変更前の課題のコードです。<script>export default { data() { return { awesome: true, }; }, methods: { toggle() { // ... }, },};</script><template> <button ＠click="toggle">toggle</button> <h1>Vue is
0
Vue 公式チュートリアル〜入力された値を表示に使う
Vue 公式チュートリアル〜入力された値を表示に使うVue 公式チュートリアルのステップ５では、入力フォームに入力した文字を表示に反映させる方法を学習します。前回までのポイントは？例によって、まずは前回までの復習です。 これまで、Vue の「部品」である、「.vue」ファイルの書き方を学習してきました。 HTML/CSS/Javascript の三つの部分から、Vue の表示の部品である「.vue」は、構成されています。それぞれの、基本の書き方と、ボタンを作成して、ボタンをクリックした場合の処理のやり方を前回までに学習しました。特に前回は、ボタンをクリックしたという「利用者の操作」をイベントとして検出して、それに対応した処理（メソッド／関数）を呼び出す方法を学習しました。これには、Vue 特有の HTML の書き方と、Javascript との連携が必要になります。 こうした書き方には、基本的な決まりがあるので、それを覚えれば Vue の色々な機能を使えるようになります。今回学ぶのは？今回のステップ５で学ぶのは、文字を入力する入力フィールドに入力された文字を、表示に反映させるやり方です。最初に示されているコードは以下の通りです。<script>export default { data() { return { text: "", }; }, methods: { onInput(e) { this.text = e.target.value; }, },};</script><template&
0
Vue でボタンをクリックした時の処理
Vue でボタンをクリックした時の処理Vue 公式チュートリアルのステップ４です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。前回までのポイントをもう一度例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。＊ HTML は、「template」のタグの部分に記述します。＊ CSS は、「style」のタグの部分に記述します。＊ Javascript は、「script」のタグの部分に記述します。 Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。今回学ぶのは？今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を１づつ増やして表示をするという機能を実現します。以下のコードが変更を加える前のコードです。<script>export default { data() { return { count: 0, }; },};</script><template> <!-- make this bu
0
Vue の公式チュートリアル（ステップ１）をやってみる！
Vue の公式チュートリアル（ステップ１）をやってみる！フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください！Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。（日本語版のサイトはサイトはサイトはこちら）日本語のサイトは英語のサイトと同じではないようです。（2022 年 2 月現在） 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は？最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ
0
CSS は後回しにしても良い
CSS は後回しにしても良いWeb 開発の基本は、HTML/CSS/Javascript です。基本的にどれも勉強しなければいけないのですが、優先度を考えると後回しにできる物もあります。Web アプリを開発する場合には、CSS は後で学習する事にしても良いもの一つです。Web ページを作るには必要Web ページを作る際には、HTML と CSS は必要です。これは、目的が「Web ページ」を作ることにあるためです。HTML だけでは、ページの細かい装飾ができないので、どうしても CSS を使って体裁を整える必要があリます。一方で、Web アプリの開発を考えた場合は、少し話が違ってきます。 Web 開発でも、最終的なページの体裁を整える場合には、CSS を使う必要があります。しかし、当面の目的は、「機能」の実現になるので、HTML と Javascript を中心に進めた方が効率的です。多少、体裁が悪くても機能は検証できるので最初は、HTML と Javascript で CSS は後回しにするか、最低限の利用でも問題ありません。CSS は手抜きもできるもう一つの理由は、Web アプリの開発の場合は、ある程度、手抜きができます。 Bootstrap などを利用すると、CSS の細かい部分を知らなくてもある程度の体裁を簡単に整える事ができます。基本的な CSS の記述を Bootstrap が提供してくれているので、細かい記述は書く必要が無いからです。もちろん、Bootstrap などでカバーされない部分もあるので、最終的にはその部分は CSS を使って記述する必要があります。しか
0
効果的な Web 開発の学習のやり方
効果的な Web 開発の学習のやり方プログラミングの学習のやり方には色々ありますが、この記事では Web 開発の上手いやり方を考えてみました。Web 開発の基本は？当然ですが、Web 開発の基本は、HTML と CSS になります。 従って、いずれにしても、HTML と CSS の基本は学習する必要があります。 これは、ページの記述をするのに必要最低限の内容です。これに加えて、実際のデータを処理するためには、プログラムを書く必要があります。これには、Javascript が必要になります。最初に学習する際は、とりあえずバックエンドの開発は必ずしも必要はないので、まずはバックエンドの件は「今すぐに学習する必要はない」と割り切って先送りすると考える事にします。もう一つは、フレームワークです。全て、Javascript で書くとなると大変大きな労力です。そう考えると、フロントエンドのフレームワークを学習の候補に入れておく方が開発がスムーズに進みます。このように考えると、Web アプリの開発に必要な学習項目は：＊ HTML＊ CSS＊ Javascript＊ フロントエンドのフレームワーク と言う事になります。始める前に考える事一応、学習項目が揃いました。ではもう少し、具体的な内容を決めて行くのが次のステップです。普通に考えると、一つ一つ順番に学習して行くと言うのが一般的な手順です。 しかし、HTML、CSS、Javascript、フロントエンドのフレームワークも学習する内容が沢山あります。 時間を十分にかけられる場合は、ある程度順番に学習していけば良いので、まずは、HTML と CS
0
.png)
PythonでWebアプリ開発なんてできるの？ 【フリーランスエンジニアが答えます】
ブログを開いていただきありがとうございます。フリーランスエンジニアのベナオと申します。ココナラさんでは主にPythonを使ってコーディングやアプリケーションの開発を承っております。Web開発ではPHPやRubyなどが一般的じゃないの？ という方も多いと思います。この記事ではそんな方のために、PythonがWeb開発に使われ始めている理由を解説したいと思います。1. 機械学習技術の普及からPythonユーザーが増加昨今ではAmazonからNetflixまでありとあらゆるWebサービスに機械学習による推薦システムが組み込まれています。これは2013年頃からのディープラーニング技術のブレークスルーによるもので、Web開発に使われるフレームワーク（プログラミング言語毎に用意されているテンプレートのようなもの）もPythonのものを使う開発者が増えています。これはStackOverFlowというプログラミングの質問サイトが公開しているデータで、月当たりの各フレームワークに関する質問数の推移を比較したものです。それぞれruby-on-railsはRubyに、djangoはPythonに、laravelはPHPに用意されているWeb開発フレームワークです。ご覧通りに2013年からdjangoに関する質問数が右肩上がりになっているのが分かります。現在はDjangoがlaravelを抜いていますね。これは世界的なトレンドですが、日本にも遅れてこの流れがやってくることが予想されます。2. あのInstagramにも使われているDjangoそれでは実際にDjangoはどんなWebサービスの開発に使わ
0
Javascript と Typescript
Javascript と TypescriptWeb 開発では、Javascript は欠かせませんが、最近では Typescript も注目されています。Typescript を勉強しておいた方が良いのか迷う場合も多いと思います。どちらが良いのかを考えてみました！Javascript は必須Web 開発をする場合、バックエンドは別にしてもフロントエンドの Web ブラウザで動作するプログラムは Javascript になります。したがって、フロントエンドに関わる開発では Javascript は必須のプログラミング言語という事になります。そうした、理由もあって Javascript を学習する人はたくさんいますが、最近では企業のある程度の規模の開発では Typescript が使われるケースも増えています。そうなってくると、Typescript を学習しておいても損はなさそうな状況になりつつあります。ところで、Web 開発者を目指してプログラミングを学習する人の場合はどうでしょうか？この連載で既に書いてきたように、「今必要な事に絞って学習する」ことで、学習を効率よく進めて短期間で成果を出すという考え方で言えば、Javascript でプログラミングを書ければ、Typescript はなくても良い事になります。そう考えると、Typescript を初心者が学習するのは後でも良いという事になりそうです。Typescript の正体とは？ところで、Typescript の正体をご存知ですか？ 一言で言うならば、Typescript は Javascript をベースに、変数の型や初
0
Web開発者の仕事を取る！
Web開発者の仕事を取る！Web 開発者の仕事獲得を目指す場合、フリーランスにしても、企業に就職するにしてもあるコツがあります。そのコツとは？誰が応募する？最初に考えるのは、競争相手は誰かを知る事です。 競争相手はシンプルに言えば、Web 開発の仕事を探している人です。当然ですが、この人たちは「Web 開発ができる人」という事です。意外にこの事が見落とされております。つまり、この人は＊ HTML/CSS を書ける＊ Javascript（Typescript)を書ける＊ React や Vue などのフレームワークを使える というのはほぼ全員ができると考えて間違いありません。 これに加えて、バックエンドの知識や経験なども持っている場合もあります。そこで考えてみてください、「HTML/CSS ができる」「Javascript が書ける」「React や Vue などのフレームワークができる」は、応募する人のほぼ全員が主張できる事になります。殆どのアピールは同じWeb 開発の仕事に応募する人は、就職、フリーランスに関わらずアピールする場合、これらのスキルをアピールする事に目が行きがちになります。つまり、ほぼ全員が同じ事をアピールするという事になります。 では、そのアピールの内容はどうなるかというと多くの人が使うのが「経験年数」を利用する場合が多くなります。「Web 開発 XX 年」というような表現を使う事が多くなります。この表現は、経験年数が少ない人は使えません。それで、実績がないと不利と思ってしまいます。ライバルに差をつける事！以前もこの連載で書いていますが、ポイントは「ライバル
0
面倒なCSS!？
面倒なCSS!？Web プログラミングには基本的に HTML/CSS/Javascript が必要です。この中でも意外に面倒なのが CSS です。この記事ではなぜ CSS が面倒なのか考えてみました。HTML と Javascript は意外にシンプルHTML と Javascript の方が、学習することは多いのはあきらかで。 しかし、HTML の場合は、記述が誤っていると目で見てわかりまし、間違いの箇所は比較的簡単に特定できます。Javascript の場合は、少し事情が変わってきます。 Javascript の問題は、大きく二つあります。＊ Javascript の記述上の誤り（文法のエラー）＊ プログラムの論理的な誤り（バグ） Javascript の記述上の誤りは、その箇所を実行した場合はエラーメッセージがコンソールに表示されるので間違いの場所の特定は簡単です。 プログラムの論理的な誤り（バグ）の場合は、場所の特定は少し難しくなります。しかし、デバッガーなどを使って、データの中身を見たりして工夫することで、バグを見つけることができます。いずれにしても、プログラミング言語でプログラミングをする場合、バグを見つけて修正するのはプログラミング開発の一部です。CSS は何が違う？CSS が特別というわけではありませんが、CSS の場合、問題の箇所を見つけるのが意外に難しいという事情があります。 HTML と同様に目に見えるという点では、想定通りに動作しない場合は、思ったような表示になりません。そいう点では簡単に問題が見つかりそうです。しかし、実際は表示が思うようにされないけれ
0
Webプログラミングの学習は大変か？
Webプログラミングの学習は大変か？Web プログラミングをするには、Javascript の他に、HTML や CSS の知識が必要になります。Javascript のプログラミングの学習だけでも大変なのに、さらに HTML や CSS というのは大変に見えます。この記事では、その辺について考えてみました。他の言語の場合は？他のプログラミング言語の場合はどうでしょうか？ 全ての言語はカバーできませんが、よく利用されるプログラミング言語である、Java と Python の場合を考えてみると状況は似ています。Java の場合は、ユーザーインターフェースを作るためのライブラリ（swing など）を学習する必要があります。Java のライブラリなので Java で書かれていますが、やっていることは、HTML と殆ど同じような事をやっています。例えば、Java の場合は、ボタンのクラスのオブジェクトを作成してレイアウトするようなプログラムが必要になります。 Python の場合は、Django のようにバックエンドのアプリケーションとして利用する場合には、同じように HTML・CSS を使ったテンプレートを利用する場合が多いので、基本的な違いはありません。デスクトップアプリを使う場合は、ユーザーインターフェースは Python の Tk ライブラリを使う場合が多いかと思いますが、これも Java の Swing のライブラリと似ていて、ボタンのオブジェクトを作成するような感じで使うので大きな差はありません。データの処理は殆ど同じ殆どのデータの処理は、パターンがあって基本的なアルゴリズ
0
見えない物は難しい！
見えない物は難しい！Web プログラミングは大きく二つの部分に分かれます。一つは、UI の為のプログラム、もう一つはデータ処理のためのプログラムがあります。UI は目に見えるので、上達も早いのですが、データ処理は時間がかかります。２種類のプログラミングWeb プログラミングは、Web ブラウザ上の UI を担当する部分と、入力したデータなどを処理する部分に分かれます。UI の部分は、動作が目に見えやすいので何が起きているかもわかりやすいので、比較的習得もしやすく、デバッグも基本的には楽です。 加えて、React や Vue などのフレームワークも利用できますし、ある程度パターンも固定されているので参考にできるサンプルコードも多く初心者でも、コツを掴むのが簡単です。一方で、データ処理の方は、動作が見えにくく、アプリケーションによって扱うデータも異なるので UI に比べると難易度が高くなります。見えないと難しい理由は？見えないと難しい理由は、何が起きているか外側からはなかなかわからないからです。 わからないものは、何か問題が合った場合には、まずは何が起きているかを見極めないと対策が取れません。 いうならば、推理小説で言うところの密室殺人事件のようなもので、密室の中でないが起こっているのかを見つける必要があります。プログラミングの場合は、密室というわけではなく、中に入れば何が起きているのかを見ることができる点が違います。 これを助けてくれるのが、デバッガーです。デバッガはデータの様子、データがどのように変わって行くのかを覗く事ができるツールです。これを利用すると、見えないデータの動き
0
【技術者向け】Chromeの拡張機能を作ってみませんか？
Chromeの拡張機能って知っていますか？Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6
0
Raspberry Piをデスクトップコンピュータとして使う！
Raspberry PiをデスクトップRaspberry Piをデスクトップコンピュータとして使う！として使う！Raspberry Pi の一番シンプルな利用方法として、PC 代わりに利用する事ができます。この記事では、Web 開発で Raspberry Pi を利用する場合の例を紹介します。Web 開発に Raspberry Pi を利用するRaspberry Pi で Linux 系の OS が動作するので、デスクトップ PC として、Web 開発などに利用する事ができます。 既に、Ubuntu のデスクトップ版の OS（21.04 64-bit ARM64）をインストールしているので、さらに開発に必要なパッケージをインストールすれば、開発用の PC 代わりに利用できます。既に開発用の PC を持っている場合には、あまり魅力的ではないかもしれません。しかし、Raspberry Pi ならば OS を完全に入れ替えるのもそれほど大変ではないので、実験用やお試し用で利用しても便利です。Web 開発で必要なパッケージは、プログラムの入力に必要なエディタ、インターネットで公開されている各種パッケージを取り込んだりするのに利用するパッケージ管理アプリがあれば基本的な開発が可能です。今回インストールするのは、＊ VSCODE (エディタ)＊ Node .js(パッケージ管理アプリの npm も含まれています) 今回の例で利用している OS は、Ubuntu デスクトップ （21.04 64-bit ARM64）です。VSCODE のインストールプログラムなどの入力に利用するエディタはマ
0
ご存知IPアドレス？
ご存知IPアドレス？Raspberry Pi に限らずネットワークの設定をする場合にはほぼ必ず出てくる設定の一つに IP アドレスがあります。この記事では IP アドレスとは何かをまとめてみました。IP アドレスの正体簡単に言うと IP アドレスはネットワーク上の住所です。ネットワークを経由して情報を届ける際に届け先や送り主が必要なのでそのための情報と言う事になります。「アドレス（＝住所）」が含まれているので、ここまでは何となく知っていると言う方が多いと思います。ところが、この「アドレス」が着く別の物も存在します。「Mac アドレス」と呼ばれる物です。こちらも、ネットワークを利用する際には必要な情報なのですが、この二つのアドレスの区別は意外にご存知ない方が実は多いと思います。 Mac アドレスは、ネットワーク機器に割り当てられたアドレスです。厳密に言うとこの Mac アドレスがネットワークのデータをやり取りする際に実際にデータをやり取りする際に利用されるアドレスです。でも、「どうして二つのアドレスがあるの？」と思うと思います。この記事ではこの二つのアドレスの違いと役割について簡単に説明しています。家と住人の関係と似ています！実は、この IP アドレスと Mac アドレスの関係は、家とその家に住む住人の関係に似ています。郵便物を届ける事を考えてみて下さい。郵便物には差出人と差出人の住所、さらに届け先の名前と住所を書くのが普通ですよね？これと似ているのが、ネットワークでデータをやり取りする場合には、送り主の IP アドレス、Mac アドレスと届け先の IP アドレス、Mac アドレ
0
あなたも記事を書いてみませんか？
多くの人へ情報発信が簡単にできます。
ブログを投稿する
多くの人へ情報発信が簡単にできます。