TAFS Advent Calendar

はじめに フロントエンド開発が、正直苦手でした。 でも今回のプロジェクトでReactを触ることになり、「せっかくなら苦手意識を克服したい」と一念発起。 開発は終わりましたが、学習は継続しています。 Reactには多くの要素がありますが、今回はルーティングに絞ります。 バージョンの違いで書き方が変わり対応に戸惑ったこともあり、基本から振り返りつつ理解していった流れを記事にしたいと思います。 そもそもルーティングって何のために必要なの？ まず基礎の基礎になりますが、URL、ブラウザ、SPAの観点から振り返ります。 URLとは？ Uniform Resource Locator（統一資源位置指定子）の略語で、要するに「 インターネット上のモノの住所 」です。 https://example.com/products.html このようなURLの場合、ブラウザは、 URLを見る→( products.html というファイルが欲しいのだと解釈) サーバーにリクエストを送る HTMLファイル( products.html )をダウンロードして表示する つまり、URLは「どのファイルを取得するか」を指定する住所のようなものです。 ブラウザはURLで何をしているのか？ ブラウザにとってURLは「ページの識別子」です。 ブラウザは、URLをキーにして、いろんな機能を実現しています。      1. 履歴管理           URLが変わるたびに履歴に記録           「戻る」ボタンを押すと、履歴から1つ前のURLを取り出して、そのページに戻る           「進む」ボタンも同じ仕組み      2. ブックマーク           URLを保存することで、「このページ」を記憶           後でそのURLを開けば、同じページが表示される       3. URL共有...

はじめに 今年も懲りずにデータ関連の記事を書こうと思います。 と言っても、どちらかというとデータを「利用」する側を取り上げます。 今回、社内のデータ利活用で、簡単な参照アプリ的なものはできないかなと考えました。 自分はアプリ屋さんではないので、 そんな人でも利用できるサービス(ツール)をどうするかを考えるわけですが、 選定ポイントは以下の3つとしました ノーコードで作成可能 低コスト 社内データ連携性 上記を満たしそうなものとして、GoogleのAppSheetが良さそうであったので触ってみることにしました。 自社で契約している Google Workspace のエディションにも含まれているのでコレだなと。 Google AppSheet とは ChatGPT先生によると（あえてGemini先生には聞かず） Google AppSheet は、コードを書かずに業務アプリを作成できるノーコード開発プラットフォームです。 Google スプレッドシート、Excel、BigQuery などのデータを元に、フォーム、ダッシュボード、ワークフロー自動化などを備えたアプリを素早く構築できます。 だ、そうです。 やりたいこと とりあえずAppSheetを使ってやりたいことを挙げます。 ひとまずデータの集約がしたい よく使う集計（例えば合計とか）された値をすぐ参照したい アプリ作成と設定 では早速アプリを作ってみましょう。 1. AppSheetのホーム画面にログイン、[ Create ] から [ Start with existing data ] を選択 2. アプリ名を入力し [ Choose your data ] を選択 3. [ Google Sheets ] を選択、今回ダミー用として作成したスプレッドシートを指定 できました。 はいもうで...

  こんにちは。 調子こいてTafs Adventカレンダー2023に2日目の投稿のMPPAです。 今日は開発によく必要とされるモックサーバーを準備しようという記事です。 👹 お品書き 👺 1.　本日のゴール 2.　モックサーバーってなに？ 3.　環境準備 4.　WireMockを用意して起動してみよう 5.　WireMockに準備したAPIを呼んでみる 6.　さいごに 1.本日のゴール 本日のゴールはモックサーバーWireMockを起動して、設定を行ったAPIをコールしてみます。 2.モックサーバーってなに？ モックサーバーとは。。「スタブ(Stub)」っていうとしっくりくる人もいるでしょうか。色々調べてみましたがREST APIの値を疑似的に返すサーバーという定義でよさそうです。 やろうと思えば 普通にHTMLも返却できます。Apacheで設定ファイルいじってパスを再現するよりも私は楽かなと考えますが、これもきっと慣れでどっちでもOKかと。 自分なりにモックサーバーの使い道考えてみました。 開発している自APIが他サーバーのAPIをコールしてる時のスタブとして。 WebUI開発時にサーバーサイドAPIのスタブとして。 要件定義～基本設計にてユーザーに見せるためのWebUIの紙芝居をあたかも 動作しているかのように見せるためのスタブとして。 開発が遅い○○プロジェクトで、ダミーを返すインターフェースすら作られていない状況でのスタブとして （これは実現できないでしょう） 一番最初に書いた使い道がメインです。 3.環境準備（要リンク埋め込み） 今回も 第一弾 に引き続き、AWSを使って試してみます。 Dockerコンテナを利用するのが実用的ではありますが、 今回サーバーは。。。 第一弾「RD Gatewayを使ってかっこよくクラウド上のWindowsVMに接続する」 で作成したVMをそのまま使ってみます。 不安点とすれば今回題材とするWireMockがJavaベースなので、t2.microでちゃんと動いてくれるのかってところですが😓 正直、コンテナだろうがVMだろうが動けばいいと思います。 4.WireMockを用意して起動してみよう まずは WireMock公式サイト からWireMockを入手。 Maven、Gradle、Dockerなど様々なテンプ...

 どうも、ysです。 Flutter がずっと気になっていたので、今日は Flutter に触れてみるため、公式ドキュメントの Get started をやってみようと思います。 モバイルアプリ、デスクトップ、Webアプリを作れますが、今回はモバイルアプリ（Android）の画面を立ち上げるところまでやります。 開発環境のOSは Windows 10 です。 それでは早速始めていきます。 まずは、公式ドキュメントに沿ってセットアップしていきます。 https://docs.flutter.dev/get-started/install Flutter SDK をダウンロードして以下に展開します。 展開先：C:\_work 環境変数の「Path」に、展開したファイル内にあるbinディレクトリを登録します。 登録したPath：C:\_work\flutter_windows_3.16.0-stable\flutter\bin コマンドプロンプトで flutter を実行できるか確認してみます。 Dart も実行できるか確認してみます。 問題なさそうですね。 では、Flutter の Doctor コマンドで、環境が整っているか確認してみます。 「Android toolchain」、「Visual Studio」、「Android Studio」が無いって表示されましたね。 今回はデスクトップアプリ作りませんし、エディターは VSCode 使うので、「Visual Studio」はいらないですね。 というわけで、他の２つの環境を整えていきます。 まずは 「Android Studio」をダウンロード＆インストールします。 https://developer.android.com/studio?hl=ja ※インストーラは全てデフォルト値でインストール。 一回起動する必要があるそうなので、起動して空のプロジェクトを適当に作って開きます。 Flutter の Doctor コマンドをもう一回実行すると。。 「Android Studio」は完了ですね。「Android toolchain」がまだ無い状況です。 「Android toolchain」については、２つやらないといけないことがあるようです。 まずは sdkmanager のコマンドラインツールを使える...