すべてのカテゴリ

上級者必見！Windows で Linux を活用する！Windows 上で Web 開発に必要なアプリは基本的に全て利用する事ができます。しかし、Linux を使う事ができると便利な場合も沢山あります。Windows も拡張機能として、Windows10 の最近のバージョンは効率的に Linux を動かす仕組みをサポートしています。この記事では、Windows で Linux を利用する方法を紹介します。仮想マシーンを使って Linux を動かす最近よく耳にする言葉に「仮想マシーン（VM:Viertual Machine）」という言葉があります。 VM Ware や Virtual Box などと言った仮想環境を提供する仕組みを利用すると、一つのハードウエアの上で複数の OS を動作させる事ができます。企業などで利用する本格的なものから、個人で利用できる無料バージョンまでいろいろな種類の仮想環境が提供されています。個人で無料で利用できるものは、普通の OS 上、Windows や Linux 上にインストールして、その上で別の OS を動作させるような形で利用する様になっています。この仕組みを利用すれば、Windows 上で Linux を動かしたり、Linux 上で Windows を動かしたりする事ができます。＊　VirtualBox＊　VMWare - Workstation Player　上記のパッケージをダウンロードしてインストールすれば、Windows (Linux)上で別の OS を利用できます。Windows10 は OS の拡張機能としてサポートWindow

足し算以外もできるようにする穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。演算子を選べるように変更する足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。これには、HTML の記述を変更してフォームを変更する必要があります。<label>+</label>　を以下のように変更します。<select onchange="operatorChanged(event)">  <option>+</option>  <option>-</option>  <option>*</option>  <option>/</option></select>　HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。演算子の変更を反映するプログラム側でやることは三つです。＊　初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする）＊　演算子の変更を検出して、現在選択されている選択肢を更新する＊　「Calcullate」ボタンがクリックされたら必要な

Chromeの拡張機能って知っていますか？Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6

フリーランスのプログラマプログラミングを学習してそれを仕事とする場合の選択肢は二つあります。一つは、会社でプログラミングの仕事をする事です。もう一つはフリーランスとしてプログラミングの仕事を受注して稼ぐ方法があります。この記事ではその違いについて紹介します。プログラムを書く事が仕事？プログラミングを学習して、プログラムを開発することで収入を得るわけですから、プログラムを描くのが仕事である事は間違いありません。 プログラムが書けるというのは、プログラムで稼ぐためには、必須です。ところが、会社でプログラム開発の仕事をする場合と、フリーランスでプログラム開発をする場合ではやらなければいけない仕事は大きく変わってきます。理由は簡単で、会社の場合は、プログラム開発の仕事は会社が用意して提供してくれます。しかし、フリーランスの場合には、プログラム開発の仕事を見つけることも仕事の一つです。どちらがお得？では、会社でプログラム開発をするのと、フリーランスで活動するのはどちらがお得でしょうか？結構難しい質問ですよね？ 会社の場合は、プログラム開発によって得られる利益をその開発の関わる人で分けるという仕組みです。 従って、プログラム開発の仕事で得られる利益の総額は大きくても、沢山の人が仕事に関わるので、各担当が得られる収入は少なくなります。一方でフリーランスの場合、仕事の受注から開発して納品するまで一人でやることも多いので、開発で得られる利益は全てフリーランスの人に入る事になります。勿論、一人で全ての仕事をするため、プログラミング以外の仕事もするわけですから、大変な分収入も多いと考えがちです。 し

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>これが、呼び出し元（親）のコードです。特に新しい点は

今回はクラスページの生徒情報に関するページについて紹介したいと思います。ここのページで生徒の連絡先などがわかるようになっています。今回から各ページのビジュアルとワークフローを載せていきたいと思います。【緊急連絡のときにすぐに情報が引き出せるように】写真のように生徒の氏名、住所などがわかるようになっています。名前をクリックすると⬇︎情報の変更・削除ができるようになっています。最初はこちらから情報登録をします⬇︎【バリデーションつきの登録フォーム】⬇︎【確認ページ】⬇︎【登録完了ページ】⬇︎【反映された生徒ページ】⬇︎教員の仕事は多く煩雑な印象があるので、できるだけシンプルに目的を絞ったページ展開意識しました。次回はクラス予定のページを紹介します！

Linux を使ってスキルアップ！Windows の PC を持っている方は Windows を利用するのが普通です。しかし、少し古くなった PC を活用する際には Linux を利用するのも一つの選択肢です。Linux は多くのサーバーでも利用されていて、Linux の知識はサーバー側の開発を行う際に大いに役に立ちます。古い PC で Linux を使って、あなたのスキルアップを目指しませんか？バックエンドの開発にはサーバーの知識が重要Web ブラウザで動作するフロントエンドの開発は、PC と Web ブラウザがあれば簡単にできます。 バックエンドの開発も、PC 上で「Web サーバ（HTTP サーバー）」を動作させれば、基本的には特に問題なく開発可能です。従って、特別なサーバーの知識がなくてもある程度開発を進める事に大きな問題はありません。シンプルな開発の場合は、あまり問題が起きることも少なく大きな問題ではありません。しかし、実際には、開発中の PC 上でテストしていた場合には問題がなかった場合でも、実際にインターネット上で稼働させようとすると、思うように動かない場合が結構あります。これは、開発環境で利用している Web サーバー（HTTP サーバ）と実際のサーバーの設定が微妙に違ったりしているのが原因になっています。世の中の Web サーバーは、Linux を利用しているものが多く、 Linux の知識があると、こうした設定時のトラブルの対処時にも役に立ちます。開発用の設定と大きく違ってくるのは、ネットワーク関連の設定が必要になる場合が多く、開発環境と実際の設定で違いが出

手持ちのPCでWeb開発を行うWeb 開発を行う場合、現状では PC が必要になります。では、どんな PC を使うか疑問に思うことも多いと思います。今週は、Web 開発に使う PC について考えてみることにしました。現在所有している PC で開発する！Web 開発を始める場合には、最初の選択肢としては手持ちの PC を活用するのが一般的です。 この記事では、最初の選択肢として現在手持ちの PC を活用する場合について考えみます。Web 開発をする場合には高性能の PC が必要なイメージがありますが実際には、一般的な PC でも殆どのケースでは十分に開発できます。Web 開発には幾つかの作業がありますが、まずは必要な作業を考えてみます。主な作業は：＊　ドキュメントの作成＊　プログラムを書く（プログラムの入力）＊　プログラムのコンパイルやビルド＊　プログラムの実行　という事になります。これらの作業を詳しく見て行きます。高性能の PC は必要ない！プログラム開発の一番最初の部分は、プログラムを書く事になります。 プログラムの学習をする際にも、一般的にはプログラムを書くことは必要です。実は、プログラムを書く（入力する）事は殆ど PC の性能は関係があります。簡単に言えば、ワープロで文章を入力するのと同程度の性能があれば問題になりません。従って、この作業はメールを書いたり、ワープロで文章を入力したりしている PC をお持ちならば問題なく作業をすることができます。必要なアプリもプログラムを書く（入力する）のに必要なアプリはテキストエディタがあれば十分です。他の作業も殆どの場合大きな問題では

フレームワークの選び方は？Web アプリや Web サービスを作成するためのフレームワークは何を選んだら良いか迷う場合も多いと思います。この記事では、一つの考え方をまとめてみました。以前、React と Vue のどちらを選ぶかと言う趣旨で記事を書いたことがありますが、今日の話題は、さらに範囲を広げて、いろいろあるフレームワークを検討する際に考えることを中心に紹介します。もちろん、全てのフレームワークやプログラミング言語をカバーできるわけではありませんので、あくまで「ガイドライン」の一つとして検討の際に考えてみることを中心にまとめみました。一番手軽な方法は何か？最初に考えるのは、一番手軽で簡単な方法です。 とにかく、「早く」サービスを立ち上げたい場合には、フロントエンド中心の実装が一番です。実装コストも安く済みますし、基本的に運用コストも安くできるのが 1 番の魅力です。「Web サイト」と言う要素が強い場合は、一番広く利用されている WordPress などで作成するのが一番です。制作側の学習コストも低くて済みますし、情報もたくさんあります。また、Web ホスティングも殆どのサービスが利用できるので、最初に手がけるのには一番入りやすいと思います。実際に、制作依頼も沢山あります。しかし、Web アプリや Web サービスなどのように、プログラミングの要素が大きくなってくると、話が少し変わってきます。その場合は、フロントエンドのフレームワークと Javascript を利用したプログラミングが初心者でも扱いやすく制作も HTML と CSS、Javascript で対応が可能です

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

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

ベナオと申します。ココナラさんでは主に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アプリ作成のチュ

Webプログラミングの学習は大変か？Web プログラミングをするには、Javascript の他に、HTML や CSS の知識が必要になります。Javascript のプログラミングの学習だけでも大変なのに、さらに HTML や CSS というのは大変に見えます。この記事では、その辺について考えてみました。他の言語の場合は？他のプログラミング言語の場合はどうでしょうか？ 全ての言語はカバーできませんが、よく利用されるプログラミング言語である、Java と Python の場合を考えてみると状況は似ています。Java の場合は、ユーザーインターフェースを作るためのライブラリ（swing など）を学習する必要があります。Java のライブラリなので Java で書かれていますが、やっていることは、HTML と殆ど同じような事をやっています。例えば、Java の場合は、ボタンのクラスのオブジェクトを作成してレイアウトするようなプログラムが必要になります。 Python の場合は、Django のようにバックエンドのアプリケーションとして利用する場合には、同じように HTML・CSS を使ったテンプレートを利用する場合が多いので、基本的な違いはありません。デスクトップアプリを使う場合は、ユーザーインターフェースは Python の Tk ライブラリを使う場合が多いかと思いますが、これも Java の Swing のライブラリと似ていて、ボタンのオブジェクトを作成するような感じで使うので大きな差はありません。データの処理は殆ど同じ殆どのデータの処理は、パターンがあって基本的なアルゴリズ

ユーザーインターフェースの設計前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。HTML でデザインこれまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。　HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。<!DOCTYPE html><html>  <head>    <title>Calculator</title>  </head>  <body>    <div class="calc">      <div>        <input class="display" type="text" />   

ブログを開いていただきありがとうございます。フリーランスエンジニアのベナオと申します。ココナラさんでは主に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サービスの開発に使わ

面倒なCSS!？Web プログラミングには基本的に HTML/CSS/Javascript が必要です。この中でも意外に面倒なのが CSS です。この記事ではなぜ CSS が面倒なのか考えてみました。HTML と Javascript は意外にシンプルHTML と Javascript の方が、学習することは多いのはあきらかで。 しかし、HTML の場合は、記述が誤っていると目で見てわかりまし、間違いの箇所は比較的簡単に特定できます。Javascript の場合は、少し事情が変わってきます。 Javascript の問題は、大きく二つあります。＊　Javascript の記述上の誤り（文法のエラー）＊　プログラムの論理的な誤り（バグ）　Javascript の記述上の誤りは、その箇所を実行した場合はエラーメッセージがコンソールに表示されるので間違いの場所の特定は簡単です。 プログラムの論理的な誤り（バグ）の場合は、場所の特定は少し難しくなります。しかし、デバッガーなどを使って、データの中身を見たりして工夫することで、バグを見つけることができます。いずれにしても、プログラミング言語でプログラミングをする場合、バグを見つけて修正するのはプログラミング開発の一部です。CSS は何が違う？CSS が特別というわけではありませんが、CSS の場合、問題の箇所を見つけるのが意外に難しいという事情があります。 HTML と同様に目に見えるという点では、想定通りに動作しない場合は、思ったような表示になりません。そいう点では簡単に問題が見つかりそうです。しかし、実際は表示が思うようにされないけれ

見えない物は難しい！Web プログラミングは大きく二つの部分に分かれます。一つは、UI の為のプログラム、もう一つはデータ処理のためのプログラムがあります。UI は目に見えるので、上達も早いのですが、データ処理は時間がかかります。２種類のプログラミングWeb プログラミングは、Web ブラウザ上の UI を担当する部分と、入力したデータなどを処理する部分に分かれます。UI の部分は、動作が目に見えやすいので何が起きているかもわかりやすいので、比較的習得もしやすく、デバッグも基本的には楽です。 加えて、React や Vue などのフレームワークも利用できますし、ある程度パターンも固定されているので参考にできるサンプルコードも多く初心者でも、コツを掴むのが簡単です。一方で、データ処理の方は、動作が見えにくく、アプリケーションによって扱うデータも異なるので UI に比べると難易度が高くなります。見えないと難しい理由は？見えないと難しい理由は、何が起きているか外側からはなかなかわからないからです。 わからないものは、何か問題が合った場合には、まずは何が起きているかを見極めないと対策が取れません。 いうならば、推理小説で言うところの密室殺人事件のようなもので、密室の中でないが起こっているのかを見つける必要があります。プログラミングの場合は、密室というわけではなく、中に入れば何が起きているのかを見ることができる点が違います。 これを助けてくれるのが、デバッガーです。デバッガはデータの様子、データがどのように変わって行くのかを覗く事ができるツールです。これを利用すると、見えないデータの動き

以前WordPressの大幅改竄（かいざん）事件が発生した頃の話です。レンタルサーバー会社の問題と思いきや、全然別の理由でサイトの乗っ取り被害に遭った方がいました。原因はパスワードの脆弱性とバックアップ運用でした。WordPressの大規模改竄事件（2013年）数百個のPHPファイルに対して暗号化されたスクリプトが仕込まれていて、その除去対応をしました。当時ロリポップのレンタルサーバーの脆弱性が問題となりました。⇒「ロリポップ WordPress」で検索数字が公表されてるだけでも8000件以上。当時海外のハッカーがWordPressサイトの乗っ取りコンテストを開催しており、改竄されたサイトにはヘッダ部分に目印が書き込まれてました。ご丁寧に改竄結果ランキングまで集計されていて、数万件の被害サイトがリスト化されてたと思います。違う原因ところが、私に依頼があった件は原因が別でした。3万円程でエステ系・美容系サイト向けにホームページを制作している会社さんがありまして、見た目はまあまあのものですが、セキュリティがガバガバでした。管理者のパスワードが1234その会社さんの制作実績の中から数件選んで見てみたところ、いずれも改竄されていました。ロリポップのサーバーではありません。私に依頼して来た方のWordPressの管理画面パスワードは「1234」でした。恐らく他のお客さんもそれに近いチープなパスワードだった可能性があります。※今のWordPressは反省して、そこまで脆弱なパスワードを許可してないと思います。バックアップが無い一般人向けにサイト制作しながら、維持保守について何もコントロール

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 で表示する文字に色をつける！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_」をインポートし

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

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 のサンプルプロジェクト（テン

Web 開発のための Windows PC の設定Windows の PC は、製造しているメーカーも多く、Mac に比べると比較的安価でハードウエアを購入できるために予算などが限られている場合などには有利です。この記事では、Windows の PC で Web 開発を行うのに最低限必要な設定について紹介します。  Web 開発に必要な性能は？既に、紹介していますが、一般的な Web 開発を行うのに高性能で高価な PC は特に必要はありません。多少古い PC でも十分に対応できます。従って、現在手持ちの PC がある場合にはその活用をお勧めします。私の場合、ノート型の PC は昨年末までは、古い PC を活用していました。４〜５年くらい前の PC でも多少遅く感じることはありますが、大きな問題なく利用できていました。目安としては、他に利用するアプリにもよりますが、Web 開発のみならば、メモリ容量は標準的な８ GB で十分ですし、ディスクドライブ（HDD/SSD）の容量は１００ GB もあれば OS とアプリを入れても十分な作業エリアが確保できます。古い PC でディスクドライブが HDD の場合、SSD に取り替えるだけで、実用上の体感性能が上がります。ただし、この作業は、OS の再インストールかコピーが必要なので、自分で OS のインストールができない場合はちょっと難しくなります。CPU は過去４〜５年以内のものであれば性能的にはとりあえず問題はありません。実際に、手持ちの PC で開発してみて問題になった時に買い替えを検討すれば良いかと思います。新規に購入するならば、ノー

育ちが違う Windows!Web 開発の OS として、Mac、Windows、Linux でほぼ同じ環境で開発できることは既に別の記事で紹介した通りです。しかし、Windows はちょっと「育ち」が違います。この記事では、Web 開発の OS の観点から見た Windows について紹介します。ソフトウエアの開発の元祖は UNIXUNIX という OS を聞いたことがありますある方もいらっしゃるとおもいます。実は、ソフトウエアの開発で広く使われていた OS が UNIX です。最近では、PC の性能が向上して、殆どのソフトウエアの開発は、PC を利用するのが普通になっていますが、ちょっと昔は、UNIX 系の OS が動作する、ワークステーションなどと呼ばれる PC の上位のコンピュータで開発するのが主流でした。もちろん、開発用のパッケージも市販されていましたが、多くのオープンソース系のツールなどの開発に広く利用されていました。ただ、一般の利用には価格が非常に高かったため個人の開発者などが手軽に利用するのは難しいという問題がありました。そうした、問題を解決するために、UNIX を模倣して作られた OS が Linux というわけです。開発者の名前と UNIX をくっつけて Linux になったようです。一方で、Mac OS の元祖も UNIX です。UNIX には二つの大きな流れがあって、その一つの BSD 系の UNIX（アメリカの UC バークレーが中止になって開発された UNIX）を元に開発された OS です。つまり、Linux と Mac OS は、UNIX の流れを

Web 開発に Mac は必要か？前回の記事では、Web 開発は手持ちの PC でも十分対応できるという話を紹介しました。 Web サービスの場合、プログラムを実行するのは、普通の人が使っている普通の PC です。逆に特別な高性能の PC でないと実行できないようなプログラムだと、実用にならない場合が多くなります。プログラムを書く（入力する）のは、ワープロで文章を入力するのと大差はありません。そう考えると、普段普通に支えている PC を持っていれば十分に対応できるというわけです。一方で、プログラム開発をする人の多くは Mac を使っているというイメージがあるのも確かです。 カフェに行くと Mac を使って作業している人も多く、絵になるというイメーがあります。この記事では、Web 開発に Mac が必要かを考えてみました。Mac でなくても大丈夫！今日はいきなり結論から書いてしまいます！ Web サービスや Web アプリの開発という観点で考えた場合、Mac でなくても全く問題はありません。 開発作業そのものは、大差はありません。実は、Web 開発で利用する主なアプリは、Mac でも Windows でも Linux でも殆ど同じアプリで対応できます。 もちろん、使い勝手や好みで利用するアプリは同じではありませんが、概ね同じようなアプリを利用可能です。プログラムの入力に利用するエディタは、VSCODE や ATOM などを利用する人が多いと思いますが、このエディタは、Mac OS でも Weindows でも Linux でも動作しますし、操作方法もほぼ同じです。Web サイトの

Firebase のログイン機能だけを使う！前回の記事で、Web サイトのアクセス権限を細かく設定するには、ユーザー認証機能（ログイン機能）が必要だということを投稿しました。アクセスする利用者を区別するためには、ユーザー認証などによる利用者の特定が必要不可欠ですが、それ以外にもユーザー認証のイベントの検出やセッションの管理など必要な事はたくさんあります。他の部分は、SQL などのデータベースを利用するなどする場合でも、こうしたユーザー認証（ログイン機能）に関連して必要な実装には手間も時間もかかります。Firebase を使うというと全てのバックエンドに関連した機能を Firebase で実装するように考えがちですが、一部の機能だけを利用するというのもありです！ユーザー認証はログインだけではない！ユーザー認証の中心的な機能はログイン機能です。ユーザ名とパスワードを入力して「本人を特定する」というのは機能の中心であることに間違いはありません。このユーザー名とパスワードでの認証自体は、自分で作成してもそれほど複雑ではありません。基本的にユーザーのデータベースとパスワードの一致をチェックする機能があれば実現できるので実装としては比較的簡単です。しかし、セキュリティを考えるとパスワードをそのままの形でデータベースに保存するのは問題があるので、通常は暗号化（ハッシュ化）して保存するのが普通です。さらに、パスワードを忘れた場合のリカバリーの処理や、パスワードの変更などの処理が必要になります。さらに、ログインの状態が変化するイベントの検出も重要です。ログアウトした場合は、特定の利用者のみに限定

Web サイトのアクセス権限Web サイトなどを運営する場合、サイトのアクセス権限をきちんと設定することが重要です。例えば、サイトの情報を勝手に書き換えられてしまうのは問題ですよね？従って、サイトの書き込みや更新の権限はサイトの管理者に限定するというような処置が必要です。サイトのアクセス権限に必要な事まず最初に必要な事は、サイトのアクセス権限を設定するのに必要な事を考えます。サイトの権限とは、「誰」が、「（サイトの）どの情報」に、「何ができるか」です。従って権限の設定には、＊　誰＊　どこ（どの情報）＊　権限（何ができるか）　を特定する必要があります。「誰」とは、例えば、「管理者」とか「一般ユーザー」などです。 「どこ」とは、どの情報とか、どのページにアクセスできるかというアクセスの対象を示します。 「権限」は、アクセスの対象に対して何ができるかです。例えば、「読み込み」「書き込み」などです。 さらに細分化すれば、データの新規作成、更新、削除、読み込みなどと必要に応じていろいろな権限が考えられます。どうやって「誰」を特定するか？どうやって、アクセスしている人が「誰」かを特定するには、「ユーザー認証（ログイン）」を利用して、アクセスしている人を特定する場合が殆どです。ログインする事で、アクセスしようとしている利用者が誰かを判別する事が可能になります。会員制のサイトの場合には、会員はログインすることで、会員限定の情報やページにアクセスできるようになるという仕組みです。ログインしていない場合は、会員でないとみなしてアクセスを制限するという形でアクセスの権限を管理する事ができます。一般の

ソフトウエア技術者からは、少し難しいシステムレベルの視点システムレベルの視点とは、単にソフトウエア（プログラム）だけではなく、プログラムを実行するのに必要な環境を含めた「全体」をみる事です。この視点は、ハードウエアや OS などを含む幅広い知識と経験が要求されるので、中々気をつけていてもポイントを見つけるのが難しい分野です。 この記事では、Web 開発をする場合に絞って、どのような事を考えると良いかのヒントをまとめてみました。Web アプリ・Web サービスの特徴当たり前ですが、Web アプリや Web サービスはネットワーク（インターネットなど）が前提になっているサービスです。 従来のデスクトップアプリなどは、利用する PC の中で完結する場合が多く、この分野の視点の範囲は限定的でした。しかし、Web アプリの場合、Web ブラウザを動かす端末（PC やスマホなど）に加えて、Web サイトをホスティングするサーバー、これらを接続するネットワーク、オンライン上（インターネット上）にデータを保持するための、データベースやストレージなどサービスを実現するための要素が広範囲に渡るようになっています。プログラムの実行も、Web ブラウザーが動作する端末（PC やスマホ）に加えて、Web サイトをホスティングするサーバーでも行われます。多くの場合、端末側のプログラム（フロントエンドと呼ばれています）とサーバー側のプログラム（バックエンドと呼ばれています）のように複数の別々のプログラムを開発する必要があります。これらのプログラムは、勝手に動くわけではなく、お互いにコミュニケーションしながら

Web 開発はフリーランスや転職に向いた分野です。実際に、Web 開発を学習してフリーランスや転職を目指す方も多いと思いますが、それにはちゃんと理由があります。この記事ではその理由に迫ってみました。現在、Web 技術を学習中の方は参考にして頂ければ幸いです。たくさんあるソフトウエアの仕事実は、プログラミング技術というかソフトウエアを生かせる仕事は Web 開発意外にもたくさんあります。その中で、フリーランスや転職を目指す方が多いのには実はきちんとした理由があります。Web 技術は「体験」できるプログラミング技術一番の理由は、Web 技術は簡単に「体験」できるプログラミング技術だからです。 どういう事かと言うと、PC １台あれば、作ったものを誰でも「目で見られる形にできる」からです。しかも、殆どの場合、それほど高性能の PC も必要ありません。この「体験」できると言うのがとても大きな意味を持っています。実際に、フリーランスになったり、転職を成功させるためには、プログラミング技術を身につける必要があるのは当然ですよね？そのために必要なことは、学習を続けてプログラミング技術を確実に自分のものにする必要があります。Web 開発の場合、勉強を開始して覚えた簡単な事でも、「形」として見ることができます。実際に作った物が「形」になると「できた」という実感が得られる物です。出来ることが多くなると学習も楽しくなってきます。そうしたことが、学習を続けるモチベーションになっていって続けやすくなります。たくさんの情報がある二番目の理由は、たくさんの情報がある事です。よく、Web 学習で行われる「模写」

より良いシステムを開発するためにクライアント様にはぜひ目指していただきたいことがあります。- みんなが統一された手順で業務を運用する（例：見積書のフォーマットはみんなが統一のものを使う）- 計算で出てくる数字を直接修正して資料にする運用をしない（例：売上と仕入の金額が間違っているのに利益額を直接修正して資料にしない）- 自部署だけでなく他部署の業務の流れを知っておくシステム面と業務面の両面から検討することで、業務の効率化の効果が飛躍的に上がります。Hot Linux ではこのあたりのこともクライアント様と一緒に考えながらシステム開発を進めます。 https://coconala.com/users/2399401

少し簡単になった 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 で変数の更新を監視するには？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

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

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

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 =

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

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

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

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 アプリは作れないのかという疑問が出てくると思います。 結論から言うと、

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

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

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 の部分

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

ご存知IPアドレス？Raspberry Pi に限らずネットワークの設定をする場合にはほぼ必ず出てくる設定の一つに IP アドレスがあります。この記事では IP アドレスとは何かをまとめてみました。IP アドレスの正体簡単に言うと IP アドレスはネットワーク上の住所です。ネットワークを経由して情報を届ける際に届け先や送り主が必要なのでそのための情報と言う事になります。「アドレス（＝住所）」が含まれているので、ここまでは何となく知っていると言う方が多いと思います。ところが、この「アドレス」が着く別の物も存在します。「Mac アドレス」と呼ばれる物です。こちらも、ネットワークを利用する際には必要な情報なのですが、この二つのアドレスの区別は意外にご存知ない方が実は多いと思います。 Mac アドレスは、ネットワーク機器に割り当てられたアドレスです。厳密に言うとこの Mac アドレスがネットワークのデータをやり取りする際に実際にデータをやり取りする際に利用されるアドレスです。でも、「どうして二つのアドレスがあるの？」と思うと思います。この記事ではこの二つのアドレスの違いと役割について簡単に説明しています。家と住人の関係と似ています！実は、この IP アドレスと Mac アドレスの関係は、家とその家に住む住人の関係に似ています。郵便物を届ける事を考えてみて下さい。郵便物には差出人と差出人の住所、さらに届け先の名前と住所を書くのが普通ですよね？これと似ているのが、ネットワークでデータをやり取りする場合には、送り主の IP アドレス、Mac アドレスと届け先の IP アドレス、Mac アドレ

短期間で Web アプリを作れるようになるには？プログラミングの学習を始めてどれくらいで Web アプリが作れるようになるかという質問をよく頂きます。どんな Web アプリを作るかにもよりますが、シンプルな Web アプリならば 1 ヶ月の勉強でも十分に可能です。この記事では、プログラミングの学習を始めて 1 ヶ月で Web アプリを作るための方針について考えてみました。（＊）この記事は、Windows10 で開発を行うことを想定して書いています。Mac や Linux でも基本的には同じですが、利用するコマンドや、ダウンロードするファイルなどが若干異なります。シンプルにする事が重要1 ヶ月という限られた時間で Web アプリを作るには、シンプルにする事がとても重要です。 ここで言う Web アプリは、商品として販売するようなアプリではなく、機能を優先したアプリという前提にします。 商品としてお金を頂いて提供する場合には、見かけも重要ですし、十分なテストも必要です。勿論、これらを含めた上で 1 ヶ月で完成させることも可能ですが、まずは欲張らずにアプリの機能を実現して、最低限の見栄えのアプリを作る事にします。Web アプリのコーディングをするのに必要な物は：＊　HTML＊　CSS＊　Javascriptです。1 ヶ月で Web アプリを作るために、必要最低限の学習に集中する事が必要になります。そこで、最初は「CSS」は無視して考えます。 基本的に、CSS は HTML で記述された Web ページの体裁を整えたりするのに使用します。実際は、体裁以外にもいろいろできますが、最初は体

プログラム開発の終わりはどこか？プログラム開発をする上で開発の終わりはどこだかご存知ですか？この記事ではプログラム開発の終わりについて考えてみました。 前回の記事で書いた通り、フリーランスには決めることが沢山あると書きましたが、プログラム開発の終わりも決める事のひとつです。会社の場合は？最初に考えるのは会社でプログラム開発をする場合を考えてみます。 もちろん、会社にもよりますが、会社の場合は、プログラム開発の終わりを会社が決めています。 従って、普通は会社の従業員で給料をもらってプログラム開発をしている場合は、開発の終わりは自分で決める必要がありません。開発を終わりにする「基準」を作って開発の終わりを判断しているという場合が多くなっています。 決め方にはいろいろありますが、基本的には以下のような項目です。＊　プログラムのドキュメントが完成している＊　プログラムが求められている動作をする＊　プログラムのテスト（検証）が終了している　他にも細かい事が決められているかと思いますが、簡単に言うならば上の３つの項目を満たしているのを確認した上で終了になります。 その後は、別のプロジェクトを始めるという感じで仕事が続いていきます。会社の場合は、ドキュメントやプログラムの作成、テストを別の人が行う場合も多く、それぞれで更に「終わり」の条件を決めています。基本的に条件を満たせば終わりで、割り当てられた仕事が終わるというイメージです。フリーランスの場合は？ではフリーランスの場合はどうでしょうか？基本的に必要な事は同じなので、同じような基準を作って決めれば良いだけの話です。 例えば、プログラム（ア

プログラムのテストのためのスキル開発したプログラムはテストをして問題がないか確認する必要があります。プログラムのテストをするにもスキルが必要です。この記事はプログラムのためのテストのスキルの話です。ホワイトボックステストとブラックボックステストプログラムのテストの方法として、ホワイトボックステストとブラックボックステストがよく利用されます。 ホワイトボックステストは、プログラムの中身を中心に全ての場所が実行されるようにして行うテストです。ブラックボックステストは、プログラムの中身ではなく、プログラムの中身を見ないで、プログラムの入力と出力（いわゆるインターフェース）に着目してテストを行う方法です。言葉での説明はこんな感じになりますが、何かわかりにくいですよね？この２つのテストを実行するのに必要なスキルは結構大きく違います。 ブラックボックステストはプログラムの知識がそれほどなくてもある程度実行することはできます。しかし、ホワイトボックステストは、プログラムの知識は必須になります。複雑なプログラムを作成するスキルを身につけるのに、テストから始めて高度なプログラムを学ぶというのは企業などでは人材育成の一部になっている場合もあります。ブラックボックステストとは？ブラックボックステストの定義は説明した通りです。もう少しわかりやすい例を挙げると、電化製品のテストに例えるとわかりやすくなります。例えば、テレビのテストをする場合を考えてみてください。ブラックボックステストは、利用者が操作できる部分を使って行うテストです。テレビの内側は、利用者はアクセスできないのでブラックボックステストでは触

Windows10 で Web 開発環境を整える！Web 開発に限らず、ソフトウエア開発を行うには開発で必要なアプリなどを PC にインストールするなど、開発に必要なツールを準備する必要があります。この記事では、Windows10 を使って、使いやすい Web 開発環境の例を紹介します。実際に利用するアプリなどは好みもあるので、全ての方にベストというわけには行きません。しかし、最近私自身が使ってみて良いと思った設定を紹介していこうと思っています。Web 開発のツールはオープンソースの物が多いこの連載でも何回か書いていますが、私自身は昨年末に Mac を購入して最近の主力の開発の PC は Mac に変わっています。合わせて、Linux と Windows の PC も使っています。 Mac に変える前は、Windows のラップトップを主力で使っていましたが、現在は開発のサブ機として Linux(Ubuntu）をインストールして利用しています。Web 開発で利用するツール（アプリ）は、オープンソースとして開発された物が多いため、Linux は開発する上では便利な OS です。しかし、開発以外で例えば Adobe の商用アプリを利用したい場合などは、Windows や Mac を使う必要があるため、複数の PC を利用できない場合は、少し不便な場合があります。デスクトップなどのように、メモリ容量などに余裕がある場合は、VMWare などを利用して仮想マシーン(VM/Virtual Machine)を利用するなどの方法もあります。一方で、ラップトップ PC の場合、メモリ容量が８

私は、Webの業界でたくさんの仕事をしてきましたので、デザインもできるのですが、GASの開発もできるんです！昨年からYouTubeのチャンネルを立ち上げ、GASで業務効率化する動画もあげてきました。こんなこともできますよ、というのをたくさんあげてきました。こっちはばっちり顔出し😁ぜひ、見ていただいて、作って欲しい！というものありましたらメッセージからでもOKですのでご連絡お待ちしています！こちらは視聴回数900回越えの動画。Googleフォームで問い合わせがきたことをLINEに通知するGASを紹介しています。商品はこちら

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 と同様によく使う表示のパターンを部品化して再利用する事ができます。この記事では 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 で入力フィールドの文字を表示するステップ５では入力フィールドに入力された文字を 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

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」の質問の

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

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 開発を行う場合のやり方に

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

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

Vue 公式チュートリアル　〜　処理したデータを表示に使うVue 公式チュートリアルのステップ８は、予め処理したデータを表示に使う方法を学習します。Javascript のプログラムで持っているデータは、「生」のデータの場合が多く、実際の表示をする際には、そのデータを「加工」して利用したい場合が、たくさんあります。そうした場合の処理の仕方を学習します。前回までのポイントは？一通り、Vue の「部品」の基本的な、書き方がわかったところで、前回のステップ７からは、プログラミング的な要素が増えてきました。前回の、チュートリアルのタイトルは、「データの一覧表示」がテーマでしたが、実際は、HTML や Javascript で新しい部分がたくさん出てきました。＊　配列（array）という同じ形のデータをまとめて扱うためのデータの型が出てきました。＊　「＠keyup.enter」は、リターンキーが押された場合の処理を HTML の部分に書くやり方です。＊　「v-for」は、配列（array）のデータの一覧を表示するための、繰り返しなるような表示の HTML の書き方です。＊　処理を行うメソッド（関数）に値を渡すやり方も出てきました。「filter()」というメソッド（関数）を使うと、配列（array）の要素を選ぶことができます。＊　「++」という「１を加える」という演算子が出てきました。＊　HTML の記述で「箇条書き」を行うやり方が出てきました。（「ul」と「li」のタグ）　と実際の内容では、新しく学習した項目が多いステップでした。この他にも、以前のステップで出てきた書き方が使われていた

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