槇　広隆

Webデベロッパーとして只今、活動中です。 主に、Python3, Django得意と…

槇　広隆

Webデベロッパーとして只今、活動中です。 主に、Python3, Django得意として、バック、フロントどちらも担当しています。

React Hooks + TypeScriptによるAPIデータ取得(axios + fetch):id

はじめにReact Hooks + TypeScriptによるAPIデータ取得(axios + fetch):idのアウトプットになります。 特定のidに紐づいたデータの取得をします。 前回はReact Hooks + TypeScriptによるAPIデータ取得(axios + fetch)の使い方を学習し、その続きになります。 学習に使用した教材・参考資料 ゴール以下のようにテキストボックスに数字を入れてボタンを押すとidに紐づいたテキストを取得して表示できるようにしま

槇　広隆

    • Ruby 3.1.1をインストールするだけどエラーが、、、

      はじめに久しぶりにRubyをおさらいしようと思って、以前インストールしたRuby2.5.3からRuby 3.1.1 の安定版があったのでそれをインストールしようとbrew update をしたところ、エラーが出現した。 Dockerを利用してもよかったのだが、直ぐに立ち上げて実行できるiTerm2で使用したかったので今回のようになった。 Error: homebrew-core is a shallow clone. homebrew-cask is a shallo

      槇　広隆

      • SQL・SELECT文の基本

        はじめにSQLのアウトプットです。 今回はSELECT文の基本をおさらいします。 ※RDBMSの説明や、テーブルの説明は省略させていただきます。 学習に使用した教材・参考資料 学習手順SQLとは SELECT文とは SELECT文の基本 WHERE句の使い方 COUNT関数の使い方 ORDER BY句の使い方 GROUP BY句の使い方 HAVING句の使い方 INNER JOINの使い方 LIKEの使い方 BETWEENの使い方 INの使い方 C

        槇　広隆

        • React Hooks + TypeScriptによるAPIデータ取得(axios + fetch)

          はじめにReact Hooks + TypeScriptによるAPIデータ取得(axios + fetch)のアウトプットになります。 ReactでのAPIにアクセスする方法の学習です。 バックエンドのAPIにアクセスしDBのCRUD処理などをする為に必要。 接続にaxios(サードパーティー)やfetch(JavaScript)を使用して、jsonオブジェクトをfetchしてブラウザに表示してみます。 前回はReact Hooks + TypeScriptによるUseEff

          槇　広隆

        React Hooks + TypeScriptによるAPIデータ取得(axios + fetch):id

        槇　広隆

          React Hooks + TypeScriptによるUseEffect(Cleanup)の使い方

          はじめにReact Hooks + TypeScriptによる基礎学習の UseEffect(Cleanup) のアウトプットになります。 タイマー、カウント、リセットなどの機能を実装する。 前回学習したReact Hooks + TypeScriptによるUseEffect(条件付き)の続きからになります。 学習に使用した教材・参考資料 ゴール以下のようにカウントが実行され、ボタンを押すとリセットされ、再度ボタンを押すとカウントが開始される仕組みを作る。 学習手順ファ

          槇　広隆

          React Hooks + TypeScriptによるUseEffect(Cleanup)の使い方

          槇　広隆

          React Hooks + TypeScriptによるUseEffect(条件付き)の使い方

          はじめにReact Hooks + TypeScriptによる基礎学習の UseEffect(条件付き) のアウトプットになります。 UseEffect の使い方を書き留めます。 前回学習したReact Hooks + TypeScriptによるUseEffectの続きからになります。 学習に使用した教材・参考資料 ゴール同じボタンをクリック、テキストを入力しても、useEffectの設定条件により処理が異なることを確認。 以下のように、ボタンをクリックするとコンソール

          槇　広隆

          React Hooks + TypeScriptによるUseEffect(条件付き)の使い方

          槇　広隆

          React Hooks + TypeScriptによるUseEffectの使い方

          はじめにReact Hooks + TypeScriptによる基礎学習の UseEffect のアウトプットになります。 UseEffect の使い方を書き留めます。 前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（配列）の続きからになります。 学習に使用した教材・参考資料 useeffect とは コンポーネントが読み込まれた時に最初の１回だけ実行したい場合や、あるステートが変化した際に処理を実行したい場合に使われることが

          槇　広隆

          React Hooks + TypeScriptによるUseEffectの使い方

          槇　広隆

          Python3をDockerでrequirements.txtを使用した環境構築

          この記事はPython3をDockerによる環境構築をする為の備忘録記事です。pipパッケージやバージョンの決め打ちなどで、requirements.txtを使用した方法をアウトプットします。 ※ docker-compose は使用しません。 事前準備・環境 既にDocker Desktop がインストールされていること、私はMacを使用しており、Intel CPUでOSは macOS Monterey 12.2.1　、エディタはPyCharmProfessionalで

          槇　広隆

          Python3をDockerでrequirements.txtを使用した環境構築

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（配列）

          はじめにReact Hooks + TypeScriptによるUseStateの基礎学習（配列）のアウトプットになります。 配列に対してuseStateをどのように使うか？の学習です。 前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（object）の続きからになります。 学習に使用した教材・参考資料 ゴール以下のように入力したボタンをクリックするとリストがブラウザに動的に反映させるようにします。 学習手順ファイル構造 #

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（配列）

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（object）

          はじめにReact Hooks + TypeScriptによるUseStateの基礎学習（object）のアウトプットになります。 objectに対してuseStateをどのように使うか？の学習です。 前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（2）の続きからになります。 学習に使用した教材・参考資料 ゴール以下のように入力したテキストをブラウザに動的に反映させるようにします。 学習手順1. useStateのobjec

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（object）

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（2）

          はじめにReact Hooks + TypeScriptによるUseStateの基礎学習（2）のアウトプットになります。 前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（1）の続きからになります。 React Hooks + TypeScriptによるUseStateの基礎学習（1） 学習に使用した教材・参考資料 ゴール以下の映像のようにボタンをクリックすると数字が2づつ増えていきます。 学習手順useStateの注意点

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（2）

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（1）

          はじめにReact Hooks + TypeScriptによるUseStateの基礎学習（前編）のアウトプットです。 前回学習したReact Hooks + TypeScriptによるイベントハンドラーの基礎学習から続きになってます。 React Hooks + TypeScriptによるイベントハンドラーの基礎学習 学習に使用した教材・参考サイト ゴール 以下の映像のようにボタンをクリックすると、ボタン内の数字がカウントされるようになります。 学習手順⒈ useS

          槇　広隆

          React Hooks + TypeScriptによるUseStateの基礎学習（1）

          槇　広隆

          React Hooks + TypeScriptによるイベントハンドラーの基礎学習

          はじめにReact Hooks + TypeScriptによるイベントハンドラーの基礎学習のアウトプットです。 本章で使用しているプロジェクトは前回のReact Hooks + TypeScriptによるPropsの基礎学習 の続きになります。 React Hooks + TypeScriptによるPropsの基礎学習 学習に使用した教材・参考サイト ゴール以下の動画のようにボタンをクリックすると、コンソールにクリックされた回数だけカウントされていく仕組みです。 学習

          槇　広隆

          React Hooks + TypeScriptによるイベントハンドラーの基礎学習

          槇　広隆

          React Hooks + TypeScriptによるPropsの基礎学習

          はじめにReact HooksとTypeScriptによるPropsの使い方を簡単に学習しました。 前回の function component の続きになります。 使用するプロジェクトは前回と同じものを使用するので詳細な解説は本章ではしてません。 確認する場合は以下のReact Hooks + TypeScriptによるFunction componentの基礎学習で解説しています。 function component の学習内容は以下のページで解説しています。 学習

          槇　広隆

          React Hooks + TypeScriptによるPropsの基礎学習

          槇　広隆

          React Hooks + TypeScriptによるFunction componentの基礎学習

          はじめにReact Hooks では、class component を使用せず、function componentを使用するのでその理解を深める為の私の基礎学習備忘録です。 開発環境はdocker-composeでReactとTypeScriptの環境を準備してエディタはvscodeを使用しました。 最終的にDjango REST Frameworkの開発につなげていきます。 開発環境の構築方法は以下のページで簡単に解説しています。 ・DockerでReactとTyp

          槇　広隆

          React Hooks + TypeScriptによるFunction componentの基礎学習

          槇　広隆

          DockerでReactとTypeScriptの開発環境構築の仕方

          はじめにこの解説では既にローカル環境にてDocker DesktopがインストールされていてDockerをある程度理解している、操作できる前提で進めます。 エディターは使い慣れているもので良いと思います。私はvscodeで構築してみました。 Reactと相性抜群のTypeScriptで構築します。 参考にしたサイト 以下のサイトを参考にさせていただきました。 ・Docker, React, TypeScriptを使用したプロジェクト作成 ・Reactの開発環境をDocke

          槇　広隆

          DockerでReactとTypeScriptの開発環境構築の仕方

          槇　広隆