シリコンバレースーパーウエア

Silicon Valley Super Ware 2020年6月25日 Webサービスのテスト 品質の話の最後は、Webサービスのテストについて書いてみました。 実はこのテスト、とても奥が深くてプログラミング言語を勉強するよりも 　大変な場合が多いです。 フリーランスなどは人でも時間も限られているので何をどこまでやるかがポイントです。 理想的な話をしてしまえば、「全部」をテストすればよいわけですが、 全部と言っても範囲を決めるのも難しいのでプログラムの「バグ」が 全部取れないという永遠の課題です。 多くの場合範囲を決められない！ まず最初に問題を言ってしまうと、ある程度の規模のWebサービスになると 「全てをテストする」のは現実的にはできない場合が多いという事です。 Webサービスの場合は、「人」が操作をするわけで、操作の対象となる物も テキストの入力、ファイルの読み込み、ボタンやメニューの選択など かなりの数になります。 しかも、どの順番でどのタイミングで操作するという事まで考えると その組み合わせは事実上全てを検証する事は不可能に近いといえます。 そこで、小さな部品に分けて範囲を限定してテストをするというやり方が 良く使われます。 小さなモジュールに分けてテストすれば、組み合わせを減らせるので テストできる範囲も限定できるのでテストはやりやすくなります。 これを行うだけでも、相当数の問題を見つけて修正する事は可能です。 しかし、組み合わせる事によって起きる問題も多くあるので、 単にモジュールレベルのテストを行うだけでは問題は解決できません。 そこで今日の話は、テストを完璧にやる話ではなくて、最低限やらなければ 行けないテストについて考えるという話です。 まずは、「機能のテスト」です

Silicon Valley Super Ware 2020年6月24日 早く作るより大切な事 今週は「品質」の話をお届けしています。 仕事でWebサービスを作る場合「納期」はとても大事な物です。 しかし、何度もお伝えしている通り「品質」はそれよりも重要な物です。 納期に間に合っても、品質が悪ければそれを直す作業が必要になります。 結局、手直しが多いと、依頼された仕事を期限前に納入しても実際の運用は 後ろにずれこんでしまいます。依頼主にとってそれは、納期を守れなかったのと同じです。 品質を作る別の方法 前回は、「Typescript」を引き合いに出して、厳格に型をチェックできる仕様の プログラミング言語を使う事でコードの品質を上げる事ができる事を紹介しました。 手間はかかりますが、長い目で見れば検討する価値のある方向です。 前回の投稿で触れていますが、その本質は、Typescriptを使う事ではなく、 型に対する意識をきちんと持てばJavaScriptでも品質を上げて行く事は不可能ではありません。 一番大切なのは、品質の高いコードを書くという「意識」です。 今日の投稿は 今すぐ始められる品質の高いコードを書く「秘訣」 です もちろん、その秘訣もいろいろありますが、今日紹介するのは 「ハードコーディング」を避けるという事です。 ハードコーディングというのはご存じですか？ これは、コードの中に 直接「値」を書く スタイルのコーディングです。 例えば、数値や文字列「"xxxxxx"」みたいな書き方です。 ハードコーディングはどうして「問題」か？ 大きく２つの理由があります コードが読みにくくなる 修正が大変な場合が多くなる これが、大きな理由です。 特に数字の場合は、プログラムを書いている場合は良い

Silicon Valley Super Ware 2020年6月23日 Typescriptは必要？ 前回は、「品質」の話に触れましたが、「品質を作る」一つの方法は コードの品質を上げるというのは一つの方法です。 最近は、 「Typescript」 が話題に上る事も多くなりましたが、 Typescriptを使うと、コードの品質は上がります。 理由は簡単で、型のチェックが厳しくなる分、コーディングのエラーが減らせるからです では、「Typescript」は必要かという事を今日は考えてみました。 必要な人は？ 絶対に必要な人は、会社などのプロジェクトで「Typescript」で開発する場合は 有無を言わせずに必要です！ 当たり前ですよね！しかし、現在「勉強中」の人や「これから勉強を始める人」はどうでしょう？ 一言で言うと、JavaScriptに比べるとTypescriptは面倒です。 この辺りが判断のポイントになるかと思います。 まだ、JavaScriptの勉強を始めていない人は、最初からTypescriptを勉強するのも 悪くない選択だと思います。要は最初からTypescriptに慣れてしまえば「面倒」とは 思わないものです。どうせ将来勉強するならば、最初からやってしまうというのは 賢明な選択かもしれません。 逆に、既にある程度JavaScriptを勉強されている方は、Typescriptを始めると 殆どの場合、面倒と感じると思います。そう考えると、まずは、「作る事」を 優先して、必要がなければ、先に延ばしても良いかと思います。 なぜ面倒なのか？ JavaScriptは、比較的「型」の扱いが緩いプログラミング言語です。 一方で、Typescriptは「型」を厳密にチェックする事を特徴とするプログラミング言語です。 つまり、変数などを使

Silicon Valley Super Ware 2020年6月22日 品質を作る！　～あなたに依頼する大きな理由になります！ ここ何回かは、Webサービスの技術的な事から離れて、「ビジネス寄りの話」として クラウドソーシングの紹介を投稿させて頂きました。 Webサービスを作るための「技術的」なこと以外にも、プログラミングで「稼ぐ」には やる事は沢山あるという事です。 作った後もとても大切です！ 今日は、作った後の話です。 作った後に何をしますか？ Webサービスでも、プログラミングでも同じですが、作った後はとても大切です。 あなたは、 「作った後」 に何をしていますか？ 一つは、作った後に「売る（販売）」というのがやる事の一つです。 何回か投稿で書いた通り、「売らないと利益はできません！」 もう一つとても大切な事は「テスト」をするという事です！ 作るのに手いっぱいで作った後の事はおろそかになりがちですが、 作った後にやる一番大切な事は作った物を「テスト」する事です。 プログラミングに「バグ」はつきものです。 慎重に書いたはずのプログラムでも完璧な物が最初から出来る事は まずありません。従って、作ったもののテストをして設計通りの動作をするか どうかを確かめる作業がとても重要になります。 基本的な動作は動く場合が殆ど！ このテストの仕方は意外に厄介です。プログラムの殆どは、基本的な動作は大抵思った通りに 動く場合が多いからです。理由は簡単で「基本動作が動くように作っているから」です。 当たり前ですよね。問題は「ちょっと基本動作から外れた場合の動作」です。 作った人が想定していない動作の多くはきちんと動かない場合が多いのです！ 良く耳にする「想定外」の出来事です。 想定していないので、プログラ

Silicon Valley Super Ware 2020年6月21日 クラウドソーシングは一つのステップ！ クラウドソーシングは「集客（マーケティング）」や「セールス」に必要な時間を大きく節約できます。 忙しいフリーランスの方には特に、時間を有効に使う意味で「お勧めできる第一歩」です。 良く聞く、クラウドソーシングはブラックとか報酬が低いというのは、ある意味なくはないと思います。 しかし、それが「続く」のではなく、一時的ならば「一つのステップ」と考える事もできます。 クラウドソーシングで関係を築く事は十分に可能です クラウドソーシングを足掛かりに次のステップを目指すのであれば、 ビジネス立ち上げで忙しい時は、それは「経費」と思って受け入れるのも一つの考え方です。 ビジネスで大切なのは信頼関係！ ビジネスで大切なのはお互いの信頼関係です。これは短時間で簡単に作れるものではありません。 特に、ビジネスを立ち上げる最初の段階では、そうした関係がない人も多いのが現実です。 以前は、クラウドソーシングのような仕組みがなかったので、前職の関係などを足掛かりに ビジネスを展開する事も沢山あったかと思いますが、今はインターネットのおかげで そうした場を作る事も簡単になりました。 それがクラウドソーシングというわけです！ 仕事を発注したい人と、仕事を受注したい人のマッチングサービスという事です。 特に、プログラミングを勉強して稼ごうという方の場合、勉強の時間が必要です 集客や営業活動ばかりというわけにはいきません。 そうした事を考えれば、仕事が沢山リストされているクラウドソーシングは 宝の山と考える事ができます。 どうやって受注するのか？ クラウドソーシングは競争が激しく受注が大変というのも事実です。 しかし、競争があるのは、何もクラウドソーシングだけではありま

Silicon Valley Super Ware 2020年6月18日 効率よく稼ぐための第一歩！ 前回は、稼ぐためには「売る」ステップが必要という話を書きました。 実は売るのはやってみると思っている以上に難しい物です。 今日の話は「売る」為の実践方法についてです。 一番易しいのが「欲しい人に売る」事です。 欲しい人を見つけてきて、その人に欲しい物を提供できれば売れる可能性は 高くなります。 勉強で忙しくありませんか？ ところが、問題は「これからWebサービスで稼ごう！」と言う人の殆どは 勉強で手一杯というのが大きな問題です。 つまり、販売の為の時間はなかなか取れないというのが多くの方の壁です。 もう一つ、就職の為にプログラミングやWebサービスの作り方を学んでいる人は 「売る」のは関係ないと思って、勉強に集中している方も多いかと思います。 でも、よく考えて見てください「就職」はある意味「あなた自身を売る事」です！ つまり、あなたの「実力」をアピールする事は、就職活動でも大きな武器になります。 いろいろな会社を受けるのも一つの積み重ねですが、勉強した成果を試す意味でも 売る事を経験できると、プログラミングに対する取り組み方も変わってきます。 そこで忙しい中でも比較的売りやすい方法を利用して販売の練習をする方法を紹介します。 これが、以前少しブログで取り上げていた「クラウドソーシング」です クラウドソーシングはブラックか？ 以前クラウドソーシングに関する投稿をしたときに頂いたコメントに 「ブラック」「報酬が低い」というご指摘を頂きました。 実際にそういう面もあるかと思いますが、必ずしも悪い事だけではありません。 市場調査（マーケティング）や集客の手間は最小限ですみます！ クラウドソーシングは仕事を頼みたい人

Silicon Valley Super Ware 2020年6月17日 Webサービスで稼ぐには？ 今年度は「Webサービスで稼ぐ」がテーマです。4月からWebサービスの実装の仕方を 中心に連載をお届けしています。 4月と5月はお問合せフォームの作り方を中心に、今月はREST APIをテーマとして お届けしています。 技術的にはWebサービスを作るための基本は一通りカバーしています UIのフレームワーク（Vue.jsを中心に） バックエンドのサービス（認証とデータベース、Firebase） REST API（Webサービスの融合） Webサービスのホスティング 基本的な要素は一通りやってきたので簡単なサービスは作れるはずです。 「知っている」から「できる」へ！ この連載では「あなた自信で作ってみる」を大切にしています。 勉強は「知るため」の努力で、実際に作る事が「できるため」の努力です。 勉強するだけの場合、知識は広がっていきますが多くの場合 作れるようにはなりません。 作れるようになるには「練習＝実際に作る事」が必須です！ 「学ぶ」＝＞「使う（作る）」＝＞「学ぶ」。。。。 のサイクルを繰り返すと「できる」ようになて、実力がついていきます。 作れるものの幅も広がって、Webサービスで稼ぐための種になります。 しかし、種だけでは余り価値がありません。種をまいてそれを育てて 収穫してようやく「大きな価値」となります。 稼ぐには「作った物を売る」必要がある！ ここからが今日の本当のポイントです。 稼ぐためには、「売る」必要があります。 どんなに素晴らしいい物を作っても売らないと収益は上がりません。 稼ぐために大切な事は「売る」事です。 売る事ができれば「稼げます」！ 当たり前の話ですが、一連の「やる

Silicon Valley Super Ware 2020年6月16日 Firebaseのホスティングサービス Firebaseのサービスの一つにホスティングサービスがあります。 前回は作成したサービスを公開しようという事でFirebaseのホスティングサービスを 取り上げました。 今日はもう少し詳しい話です。 FirebaseでWebサイトを作れる！ Firebaseを利用するとWebサイトを作る事ができます。 しかも、アクセス数や利用要領が制限に達しない場合は無料で利用できる サービスです！ 何故利用者が少ないのか？ 多くのWebサイトのホスティングサービスで広告が入らないものはほぼ有料です。 Firebaseのホスティングサービスは、広告なしでしかも無料から始められます。 しかも、ドメインをお持ちの方は自分のドメインで運用する事もできます。 いい事ばかりですよね！しかし、利用者は意外に多くありません。 その大きな理由は WordPressは使えないからです！ WordPressはWebサイトを作るには非常に便利で魅力的なプラットフォームです。 実際現在のWebサイトのシェアを考えると「主流」と言えます。 WordPressを使うには、サーバー側でSQLのデータベースと、バックエンドサービスに PHPが必要なのでFirebaseの場合は使えません。 Firebaseのサポートするデータベースと、Node.jsという事になるので、 プログラミングをしない人には少しハードルが高くなります。 プログラミングをする人には便利な方法！ しかし、プログラミングをする人がWebサービスを公開するには もってこいのプラットフォームと言えます。 単にWebサービスをフロントエンドで作って公開するだけでなく

Silicon Valley Super Ware 2020年6月15日 Webサービスを公開しよう！ 4月から幾つかのWebサービスの作成をブログで連載してきました。 どれくらいの読者の方が実際に制作されたでしょうか？ Webサービスはインターネットを通じて提供するサービスです！ そのためには、作成したサービスをインターネットに公開してみる事も大切です。 今日は、作成したWebサービスをインターネットで公開する意義について書いてみました！ 開発と公開は違う！ Webサービスを作る場合の多くは、開発段階では開発用のＰＣで作って デバッグした後で、実際に運用するホストに置くのが普通です。 実は、この開発用の環境（設定）と実際の運用は同じではありません。 HTML/CSSやJavaScriptなどの部分部分は同じですが、サーバー側の 設定やホスティングのやり方は同じではありません。 開発用の環境では動くけれども、運用の為のサーバーでは動作が違う事はよくある事です。 Webサービスの開発で大切な事は、どんなものを作るかの企画だんかいから 実際にインターネットのサーバーでサービスを提供するまでを一通りやってみる事です。 シリコンバレースーパーウエアではこのような一連の過程を 「サイクルを回す」 と呼んでいます。 毎回この企画から実際の運用までのサイクルを回す事で 「開発の流れ」を理解、体験して課題、問題点などを 実際に自分自身で実感する事が「仕事ができる」ために絶対に必要です。 4月・5月は公開しなかった人も今月はやってみましょう！ ということで、今月はサービスを実際にインターネットで公開するところまで 是非やってみてください！ Vueで制作したUIはVUE CLIで開発する場合、開発用の設定では ファイルを変更するたびに再

Silicon Valley Super Ware 2020年6月14日 Webサービスの処理の分け方！ Webサービスを作る上で必要な処理にはどんな物があるか考えた事ありますか？ これを良く考えて、作り方を考えると将来「管理しやすい」作り方にする事が できます。 Vue.jsを軸にWebサービスを作る場合、UIとデーター処理に大きく分ける事ができます。 UIはユーザーインターフェース、すなわち利用者の「操作」に関連した処理と データ処理は扱うデータをどのように「扱う」かの処理です。 なぜUIとデータ処理を分けるのか？ 一番簡単な方法は全てを一緒に実装してしまう事です。 利用者の操作に伴うデータ処理を全て一緒にJavaScriptで書いてしまうという事です。 多くの方が、フレームワーク（ライブラリ）を利用してサービスを作るという場合に こうした作り方をしています。 4月、5月に作ったお問合せフォームのようなサービスはこの作り方でも余り問題がありません。 理由は簡単で、データの処理自体が余りないからです。 仮に全部作り直したとしてもたいした労力にはならないからです。 複雑なサービスになると事情が変わります。作り直すのは大きな作業になるからです。 そこで、UIは、利用者の操作の処理までにして、実際の処理は「データ処理」を 呼び出すような構成にして、別の部分でデータ処理をするような作り方が有利になります。 こうすると、利用者の要望でUIを変更しても実際のデータ処理は余り手を加える必要性は 大きく減ります。同様に、データ処理の性能を改善する場合も、利用者の操作の処理部分に は触れる必要がなくなるため、完全に独立にプログラムを管理できるようになります。 問題が起きた場合のデバッグも、問題は操作の処理にあるのか、データの処理にあるのかを 切り分け安くなるため、原因を特定しやす

Silicon Valley Super Ware 2020年6月11日 サーバー側でREST APIを使うのは難しいのか？ 前回は、外部のWebサービスを取り込みには、サーバー側で REST APIの処理をする必要がある場合が多いという話でした。 実際にサーバー側での実装はもう少し先に取り上げる事を考えています。 しかし、前回の記事に対する質問を沢山いただきましたのでもう少し掘り下げてみようと 思います。 結論から言ってしまうと、それほど難しいものではありません。 違いは、REST APIをブラウザーから使うか、サーバーから使うかの違いだけです！ サーバー側から動かすとは？ 最初に考える事は「サーバー側」から動かすという事はどういう事かという事です。 サーバーが外部のサービスに対して、REST APIでデータを取得するという事です。 これがどういう事かというと、取得したデータはサーバーに取り込まれるという事になります。 つまり、そのままでは、ブラウザーでは見られない！（使えない！） という事になります。 それでは、意味がないじゃないか！と思われるかもしれませんが、 仕組みは同じで、ブラウザーとあなたのWebサービスのホスティングをするサーバーとの間で 別の「API」を決める必要があります。 つまり、サーバーに「データーをもらってきて！」と頼むという事です。 サーバーはもらってきたデーターをブラウザーに転送するという仕組みでデータを扱う事が できます。 ここで「あれ！？」っと思いませんか？外部サービスの情報のセキュリティの為に サーバー側で処理をするのに、ブラウザーがデータを取れたら同じことじゃないのか！ という疑問がわいてきます！ サーバーは情報の選別をする！ もちろん、外部のWebサービスと全く同じデータ

Silicon Valley Super Ware 2020年6月10日 オンライン決済のWebサービスを組み込むには？ 前回までに「REST API」の実装の基本的な所は網羅してきました！ 後は、「DELETE」「PATCH」「UPDATE」などHTTPの違うメソッドが残っていますが、 実装のやり方自体はPOSTとほぼ同じです。 同じ要領で実際にやってみてください！ デモサイトの方は、ブログの投稿のお休みを頂いている週末に更新しようと思っています。 ブログの連載の方は次のステップに行こうかと思っています。 実際の外部サービスの「REST API」は少し実装方法が違います！ 今日は、実装の話から少し離れて実際のサービスについて解説します。 JSON Placehoderは、セキュリティを考える必要がない！ 一番大きな違いは、「JSON Placeholder」はREST APIのテストのためのサービスです。 デモサイトをご覧になった方はお分かりかとおもいますが、全ては「仮のデータ」です。 内容も余り意味があるものではなく、誰が見ても殆どの場合は全く問題はありません。 では、実際のサービスはどうでしょうか？ 読者の皆様は、どんな外部のWebサービスをあなたのサービスに組み込んでみたいか考えた 事はありますか？ 例えば「オンライン決済」のサービスはよい実用例です。 あなたの、Webサイトを通してオンラインで何かを販売したい場合、 あなたのサイトでオンライン決済ができて、プログラムや教材をダウンロードできたら 便利ですよね？ オンライン決済ができないと、フォームやメールで注文を受けて、 メールのやり取りで決済したり、銀行振込をしたりして決済をする必要が出てきます。 手間もかかって、あなただけでなく、お客様にも「面倒」な作業になります。 そうすると、折

Silicon Valley Super Ware 2020年6月9日 前回までのサンプル実装を公開中です！ 少し急ぎ足でREST APIを使ったWebサービスの実装方針を説明してきました。 JSON Placeholderを仮想Webサービスと見立ててWebサービスに取り込むというのが 今月のテーマです。 Webサービス立ち上げ時にデータを読み取って表示するところから始めて、 前回は「仮想ログイン機能」、「仮想投稿機能」までの実装方針を説明してきました。 読者の皆様はご自分で作っていらっしゃるでしょうか？ 今日は、実際に実装したWebサービスを並行してデモ用に公開していますのでその紹介です。 実装方法の一例です！あなたの実装の参考にしてください！ サンプルのURLは以下のボタンをクリックすればご覧頂けます！ サンプルサイトはこちら！ サンプルサイトの簡単な説明！ 上記のボタンからサイトに行くと、仮のホームページになります。 まずは、上部のメニューから「投稿」を選ぶと、投稿の一覧と投稿者が表示されます。 標準では全投稿が表示されます 特定の投稿者を選ぶと投稿者ごとに表示が可能です 投稿のタイトルをクリックすると個別の投稿と、その投稿に対するコメントが表示されます 個別の投稿表示から「Back」ボタンを押すと一覧表示に戻ります というのが基本的な表示機能になります。 表示機能はブログでは取り上げていませんが、 アルバム一覧、ユーザー一覧、タスク管理も実装しています！ アルバム一覧は、アルバムのタイトルと、最初の写真（実際はカラーブロックだけ）を 表示します。アルバムをクリックすると、アルバム内の写真（カラーブロック）の一覧を表示します。 タスク管理は、担当者ごと、全てタスク、完了したタスク、作業中のタスクの表示ができるように なっています。 おまけで、先

Silicon Valley Super Ware 2020年6月8日 本当の投稿の様にサービスを作ってみる！ 前回は、JSON Placeholderから取得したデータの表示部分の実装の話でした。 次は、REST APIを使ってデータを操作する部分になります。 データの操作とは、データの新規作成（追加）、既存データの更新、既存データの削除です。 データの操作にはサーバーにデータを送る必要があります。 新規作成の場合は、新規に作成するデーター、既存データの更新の場合は、更新するデータに 加えて、どのデータかを特定する情報、削除の場合は削除のデータを特定する情報が必要です。 どうやって情報を送るかは、REST APIで決められています。 JSON Placeholderの場合 JSON Placeholderの投稿の場合、新規作成の場合は title body userId を送ります。送り方はJSON(JavaScript Object Nortation)で、title, body, userIdのタグを つけて送る事になります。 これを、HTTP POSTメソッドで送れば良い事になります。 これも、先日の「axios」を使うと、データ取得の際の送り方に似た書き方で 簡単に送る事ができます。 現実のサービスを考えると、userIdをどうやって取得するか？ ただ作るだけならば、フィールドを作ってuserIdを入力してもらって送ればＯＫです。 ただ、現実のサービスではそのような作り方はしません！ 殆どの場合、ユーザーＩＤは数字か、ハッシュ化された文字列で、タイプして入力すると 間違えやすい情報の一つになります。そうした情報を利用者にしてもらうと間違える事が 多くなります。実際のサービスではどうしているかというと、投稿する場合は「ログイン」 してもらい、そのユーザー情報から自動的にそ

Silicon Valley Super Ware 2020年6月7日 まずは、データの表示から！ 先週は、Webサービスの起動時にJSON Placeholderから投稿、コメント、ユーザーの データを取得する部分の概要を投稿しました。 これで、表示に使う基本データは準備できた事になります。 データはVUEXのstoreに保存されているので、どのモジュール（ページ）からも アクセスできるので、データの受け渡しを余り気にする必要はないので UI(ユーザーインターフェース)を作るのがシンプルになります。 まずは、データの操作の前にこのデータを表示する部分を作ってみます。 表示のスタイルを決めてHTMLを作る！ これは、特に新しい事ではありません。 表示させるスタイルを決めてHTMLの記述を書いて あとは、HTMLにデータを埋め込むためのコード（JavaScript）を書くだけです。 やる事は、先月のお問合せフォームのWebサービスで作った管理ページと大差はありません。 お問合せフォームの場合は、お問合せの一覧を表示させて、メッセージが選択されたら そのメッセージを表示するという物でした。 基本的には同じような事をやれば良いわけです。 複数のデータを利用して見やすく表示！ 先月と違う所はもう少し「便利」な表示をやろう！という所です。 どういうことかというと、REST APIの"GET posts"でえられるデータは id userId title body の４つのフィールドです。タイトルとボディは利用者が見て「意味のある情報」ですが idやuserIdは単なる番号でそのまま見ても余り意味のある情報ではありません。 表示する場合は、「意味のある情報」を提供するのが大切！ そこで、もう少し見やすい情報に「加工」して表示する方が親切です。 投稿の本文である「bo

Silicon Valley Super Ware 2020年6月5日 番外編　～　Reactで作ったらどうなる？ 普段は週末はブログの方はお休みを頂いているのですが、 今週はいろいろご質問を頂いたので番外編をお送りします。 今月は、「REST API」をWebサービスに組み込む事を体験するのがテーマです。 先月に続いてフロントエンドのUIをVue.jsを使って作っています。 その中で、前回はVUEXにデータ処理を集めて主なデータを一元管理する 所までやってみました！ Reactでやったらどうなるの？という質問を頂きましたので簡単に説明します！ Reactの場合は、データの一元管理をする場合、REDUXを使う場合が殆どです。 では、同じような事をREDUXで行うにはどんな感じになるかという話です！ REDUXはデータを一元管理するモジュール REDUXはReactだけでなく、もちろんVue.jsで使うことができます。 ただ、VUEXがあるので、Vue.jsを使う場合は殆どの方がVUEXを使っているという事です。 REDUXを使う場合にやる事は どんなデータを管理するか どんなデータ操作をするか を最初にある程度決めて方針を決める必要があります。そのうえで Reducerの作成（管理するデータとその処理をする所） Reducerの処理を呼び出す部分（Action） storeの作成 各モジュールでの設定 という感じで、通常は複数のファイルに分けてこうした部分を実装します。 Reactで使う場合は、Reactで使いやすいように「react-redux」を使う場合が殆どです そうすると、REDUX以外に幾つかモジュールをインストールする事が必要です。 もう一つ問題があって、Vue.jsの「mutation」と似たような理由で、 データ処理で呼び出す「action」の処理では、非同期処理を扱うことができません。 こ

Silicon Valley Super Ware 2020年6月4日 REST APIを使ったWebサービスの実装開始！ 大体概要は話したと思いますので、今日から実際にREST APIを使ったWebサービスを 実装していきます。 まずは、Vue.jsのプロジェクトを作ってください！ 或いは、5月に作成した「お問合せフォーム」のWebサービスに追加する方法でもＯＫです。 まず、最初に作るのは「投稿ページ」です。 基本的に、Ｗｅｂサービスを立ち上げた時に必要なデータを取得する方針なので サービスのトップレベルのモジュール「App.vue」で、REST APIを利用してデータを読み込んで しまう事にします。 モジュールが呼ばれた時に読み込みには 「created」 を使います。 App.vueのファイルの「script」のセクションに、「created」を追加して データを取り込みます。 実際の取り込みの処理はApp.vueでは行わずに、VUEX側で行うことで データ処理とUIを分離して作ります。 処理の流れは？ 大まかの処理の流れを勘が手見ます。Webサービスが呼ばれると、トップレベルである App.vueが呼ばれて、「created」の処理が呼ばれます。ここで、VUEXに処理をまかせます。 具体的には、storeにある処理を呼び出します。 VUE UIでVUEXをインストールすると基本設定に必要なファイルを自動的に作ってくれます。 便利ですよね！「store」のフォルダーの下に作られた「index.js」がVUEXのstoreの実体です。 「index.js」の中に「Store」のオブジェクトが作られていて、 state mutations actions modules のセクション（ブロック）が用意されています。 stateがVUEXで管理するデータを置く部分です