React+Node.js(express)+MySQLの環境を整えてReactとNode.jsの自己学習に取り組んでみた

本投稿は TECOTEC Advent Calendar 2021 の23日目の記事です。

こんにちは、次世代デジタル基盤開発事業部の渡邊です。

今回の記事では、自己学習を目的として「React+Node.js+MySQL」の組み合わせで「マンガ管理アプリ」を作ってみた時に取り組んだことを備忘録として残していきます。

なお、今回の取り組みでは「予めMySQLに登録されたマンガ情報をReactで構築した検索画面から検索して表示させる」ことを目標としています。

イメージとしては以下のようなものを作ります。(かなりシンプルです・・・)

f:id:teco_watanabe_y:20211215171834p:plain

今回の記事は長い記事となりますので、先に構成をご紹介します。

目次

  • 目次
    • 環境
    • 環境構築
      • 1.WSL/Ubuntu/Node.js/npmのインストール
      • 2.MySQLのインストール
    • 接続確認
      • 1.React+Node.js
      • 2.Node.js+MySQL
      • 3.React+Node.js+MySQL
    • UIの実装
      • 1.Headerコンポーネントの実装
      • 2.Formコンポーネントの実装
      • 3.Listコンポーネントの実装
    • useStateの利用
    • POST通信の実装
      • 1.React側の修正
      • 2.Node.js側の修正
    • コンポーネントの表示/非表示切り替え
      • 1.Appコンポーネントの修正
      • 2.Formコンポーネントの修正
      • 3.Listコンポーネントの修正
    • まとめ
続きを読む

データ可視化ツール-Googleデータポータルを使ってみよう

本投稿は TECOTEC Advent Calendar 2021 の22日目の記事です。

はじめに

こんにちは!決済認証システム開発事業部の金城と申します。初投稿で緊張しておりますが、よろしくお願いいたします。

あらゆるデータが取得可能になったこの時代、溜めたデータを的確に分析し、活用することが益々重要になってきています。 しかし、膨大なデータの整理し、多くの人にとって理解しやすいように、デザインを工夫しながら可視化するのは容易なことではありません。

そんな時、Googleが無料で提供しているダッシュボード作成ツール「Googleデータポータル」を使えば、見やすいグラフを誰でも簡単に作成することができます!

今回は、Googleデータポータルの基礎的な使い方について紹介していきます。

目次

  • はじめに
  • 目次
  • 使ってみよう
    • データの準備
    • レポートの新規作成
    • データのインポート
    • グラフの作成
    • グラフの表示
    • データをさらに追加する
    • グラフを共有する
  • おわりに
続きを読む

GASで定期実行しているスクリプトのエラー通知をLINEに飛ばすようにしてみた

本投稿は TECOTEC Advent Calendar 2021 の21日目の記事です。

こんにちは。次世代デジタル基盤開発事業部の近藤です。

Google Apps Script(以下GAS)で毎日定期実行しているスクリプト(某暗号資産取引所のAPIを呼んでいる)があるのですが、極稀にエラーが発生してしまいます。

エラー発生時は元々GASからメール通知が来るようになってはいるのですが、即座に気がつくことが難しいです。

そこで、LINEに通知を飛ばしたいと思いました。実際やってみると予想以上に簡単だったので、やり方を紹介したいと思います。

続きを読む

【Laravel】APIを使って天気予報を取得してみた

本投稿は TECOTEC Advent Calendar 2021 の20日目の記事です。

はじめに

こんにちは。決済認証システム開発事業部の阿部です。
2021年4月に新卒で入社し、サーバーサイドエンジニアをしています。

業務の中でAPIを触ることが多いため、今回はOpenWeatherAPI(天気予報)を例にとってAPIの使い方を紹介しようと思います。

準備

アカウント登録

まずは、こちらからアカウント登録を行います。
アカウント登録後、API Keyが発行されます。ページ上部の[My API Keys]をクリックします。
f:id:teco_abe:20211216111827p:plain

発行されたAPI Keyを一覧できるページが開きます。このページの中のKey欄にある文字列をテキストファイルなどに保存しておきます。 f:id:teco_abe:20211216113142p:plain

APIの使い方の確認

プログラムを書く前にAPIの使い方の確認をします。

続きを読む

OAuth、OpenID Connectについて改めて調べてみた

本投稿は TECOTEC Advent Calendar 2021 の19日目の記事です。

はじめに

2021年9月に入社した決済認証システム事業部の田中です。
これまでバックエンドの開発・設計などを担当してきて、今はある案件のPMをやっています。

ふとAPIの認可/認証周りについてなんとなくの理解になっているなと思い、アドベンドカレンダーの記事執筆を機に改めて調べてみました。
すごく簡単ではありますが、OAuthとOpenID Connectについて触れていきます。

続きを読む

AWS Workshopsで学ぼう

本投稿は TECOTEC Advent Calendar 2021 の18日目の記事です。

はじめに

こんにちは、証券フロンティア事業部の内田と申します。
AWSでは様々なサービスが用意されています。
が、触ってみたいと思ってドキュメントを開いてもいまいちわからなかったり、料金が気になって諦めてしまうこともあると思います。
そこで、今回はAWS Workshopsについて紹介させていただこうと思います。

目次

  • はじめに
  • 目次
  • AWS Workshopsとは
  • やってみた
  • 感想

AWS Workshopsとは

様々なAWSサービスの使い方を学ぶことができるワークショップです。
AWSが公式で用意してくれているのは素晴らしいですね。

workshops.aws

続きを読む

dockerはufwに穴を空ける。

本投稿は TECOTEC Advent Calendar 2021 の17日目の記事です。

決済認証システム事業部の下江です。 今年の夏ごろ、ふとサービスを作りたいなと思い、仮想レース配当サービスを個人で作っていた時に起きたDB情報を全部抜かれた話をしていこうと思います。

<2021.12.17 追記>
※本記事はあくまで個人開発上で起きた問題であり、弊社開発ではセキュリティ専門の部隊がこの要な事態が発生しないよう対応しています。

構成

OS: Ubuntu 20.04.2 LTS
フレームワーク:Laravel
フロント : blade
デザイン : TailwindCSS

DB情報が抜かれるまでの流れ

サーバの初期設定を行い、動作確認のためBasic認証を掛けて知り合い内共有して、 いくつか細かい問題の修正を行いとりあえず動作するところまで終わらせた後就寝しました。

翌日、知り合いから「500出てるよ」と連絡があり調査を行ったところ、サーバのエラーログにUnknow Database の文字列がずらり。
dbを確認しに行くと、メインのデータベースが消されており正体不明のReadmeデータベースが作成されていました。 中身には要約すると、データ取ったから返して欲しかったらここに振り込んでねと書いてありました。
f:id:teco_shimoe:20211215132952p:plain
ひえ…

続きを読む