投稿者: カシムラ

Axiosを使ってReact+TypeScriptからHTTPリクエスト(GET/POST/PUT/DELETE)を送信する

Axiosを使ってReact+TypeScriptからHTTPリクエスト(GET/POST/PUT/DELETE)を送信する

今回はそんな疑問に回答します。 内容はこちらのQiita記事と全く同じです。 https: 

【Peachフリーランス】2021年フリーランスエンジニアのエージェントとしてお世話になったので紹介記事を書いてみた

【Peachフリーランス】2021年フリーランスエンジニアのエージェントとしてお世話になったので紹介記事を書いてみた

今回はそんな疑問に回答します。 結論から言うと… ※エージェントとは、フリーラ 

Dockerを使用せずにReact(Next.js)+TypeScriptの環境を構築する手順

Dockerを使用せずにReact(Next.js)+TypeScriptの環境を構築する手順

Dockerを使用せずにNext.js,TypeScriptの環境を構築したいけど手順がわからない。

環境構築の手順を解説してほしい。

今回はそんな疑問に回答します。

内容はこちらのQiita記事と全く同じです。

https://qiita.com/kashimuuuuu/items/fbbf9c1553ac41698f76

なぜこの記事を書いたのか

React(Next.js)とTypeScriptは相性が良いといわれており、この二つを組み合わせて開発する人も多いため、環境構築する方法を記事としてまとめておきたかったからです。

環境構築完了(ゴール)の確認

この記事のゴールは以下のようにReact(Next.js)のページが起動すること。

環境構築の手順

1.React(Next.js)アプリ作成

まずはターミナルを起動してプロジェクトフォルダを作成したいディレクトリへ移動する。

今回は「next-ts-redux」という名前のフォルダを作成し、その直下に「app1」という名前のプロジェクトフォルダを作成することにする。

以下のコマンドを実行する。

npx create-next-app app1

コマンドを実行すると以下のような構成でフォルダが作成される。

コマンド実行したディレクトリ
 └ app1
     └┬ next.config.js
      ┝ node_modules
      ┝ package-lock.json
      ┝ package.json
      ┝ public
      ┝ README.md
      ┝ pages
      |   └┬ _app.js
      |    ┝ index.js
      |    └ api
      |        └ hello.js
      └ styles
          ┝ globals.css
          └ Home.module.css

2.アプリを実行する

ディレクトリを「app1」へ移動して、以下のコマンドを実行するとローカルサーバが立ち上がる。

npm run dev

この実行コマンド”npm run dev”や”npm start”はpackage.jsonが存在するディレクトリで実行する必要がある。
理由はこのコマンドはpackage.jsonのscriptの内容を実行しているため。

上記のコマンドを実行したらブラウザで「 http://localhost:3000 」を起動してみよう。

いったん実行中のターミナルで「Control」+「C」キーを同時押しして、実行をキャンセルする。

3.Reactコンポーネントを格納するフォルダの変更

ターミナルにて以下のコマンドを実行して、Reactコンポーネントを格納するpagesフォルダをsrc直下へ移動する。

mkdir src && mv pages src

4.TypeScriptを導入する

以下のコマンドを実行してTypeScriptを導入する。

npm install --save-dev typescript @types/react @types/react-dom

5.TypeScript用のファイル名に変更

以下のファイル名の拡張子をJavaScriptからTypeScript用に変更する。

・src/pages/_app.js → src/pages/_app.tsx

・src/pages/index.js → src/pages/index.tsx

・src/pages/api/hello.ts → src/pages/api/hello.ts

それぞれのtsxファイルをVSCODEで開いて、以下の箇所を修正する。

これはもともとJavaScriptで書かれていたプログラムをTypeScriptで動くように変更する作業なので必須。

_app.tsx

// 先頭行に以下を追加
import React from 'react'
import {AppProps} from 'next/app';

// 3行目
// 修正前
import '../styles/globals.css'
// 修正後
import '../../styles/globals.css'

// 5行目
// 修正前
function MyApp({ Component, pageProps }) {
// 修正後
const MyApp = ({Component, pageProps}: AppProps) => {

index.tsx

// 先頭行に以下を追加
import React, {FC} from 'react'

// 3行目
// 修正前
import styles from '../styles/Home.module.css'
// 修正後
import styles from '../../styles/Home.module.css'

// 5行目
// 修正前
export default function Home() {
// 修正後
const Home: FC = () => {

//最終行に以下を追加
export default Home;

6.アプリを実行する

ここでもう一度、ディレクトリを「app1」へ移動して、以下のコマンドを実行する。

npm run dev

上記のコマンドを実行してブラウザで「 http://localhost:3000 」を起動すると、以下のように確認できるはずだ。

ここでtsconfig.jsonが作成されているかを確認しよう。プロジェクトフォルダ「app1」直下にtsconfig.jsonが作成されているはずだ。

これでDockerなしのReact(Next.js)+TypeScriptの環境を構築する手順は以上となる。

DockerでReact+TypeScriptの環境を構築する手順

DockerでReact+TypeScriptの環境を構築する手順

今回はそんな疑問に回答します。 内容はこちらのQiita記事と全く同じです。 https: 

現役エンジニアが考えるWebエンジニアに必要なスキル

現役エンジニアが考えるWebエンジニアに必要なスキル

今回はそんな疑問に回答します。 結論から言うと… フロントエンド言語 バックエンド言語 コ 

WEB開発/システム開発の実務経験を踏まえて、SQLについて入社前に知っておくと良さそうなことをまとめてみた

WEB開発/システム開発の実務経験を踏まえて、SQLについて入社前に知っておくと良さそうなことをまとめてみた

入社後にSQLを使うんだけどなにを勉強していいかわからない。

SQLについて入社前に知っておくべきことを解説して欲しい。

今回はそんな疑問に回答します。

ことの発端は以下のツイートです。

「入社前にSQLはどれくらい理解しておけば良いか分からない」という方がいらっしゃるということが分かったので、これらを記事でさらに細かく解説しようと思いました。

SQLの基礎知識

SQLは、データベースに格納されたデータを操作したり、テーブルを作成することができる言語です。

SQLを学習する上でデータベースの理解は必須です。

DB(データベース)

データベースとは、データを集めて整理しておくことができる表のイメージのようなものです。

エンジニアは略して「DB」と呼んでいる人がほとんどです。

データベースでは以下のようなデータを取り扱います。SQLはこのようなデータを抽出したり、テーブルへデータの登録や削除をおこなうことができます。

  • 顧客情報 … お客さんの情報。年齢、住所、職業など
  • 商品情報 … 商品一つ一つの情報。商品コード、商品名、価格、商品画像など
  • 売上情報 … このお店でこの商品は何個売れたか、何時に売れたか、など

SQL

SQLはStructured Query Languageの略です。

データベースを操作することができる言語で「非手続き型言語」と訳します。

SQLは「DML」「DDL」「DCL」と3つ種類があります。
この記事では、それぞれで重要な部分を詳細に解説します。 
解説する用語は重要なので繰り返し学習しておきましょう。

DML(Data Manipulation Language):データ操作言語

SELECT(データ抽出)、INSERT(データ登録)、UPDATE(データ更新)、DELETE(データ削除)などがあります。

DDL(Data Definition Language):データ定義言語

CREATE TABLE(テーブル作成)、ALTER TABLE(テーブル情報変更)、DROP TABLE(テーブル削除)などがあります。

DCL(Data Control Langeage):データ制御言語

GRANT(権限付与)、COMMIT(コミット)、ROLLBACK(ロールバック)などがあります。

入社前に押さえておくべきこと

では入社前に押さえておきべきことを解説していきます。これまでの経験から、入社前にこれだけは押さえておいた方が良い業務でよく使う知識なので知っておくと役に立つことを挙げていきます。WEB開発、システム開発の企業へ入社される方は是非参考にしてください。

DML(Data Manipulation Language):データ操作言語

SQLといえばこれ。SELECT文、INSERT文、UPDATE文、DELETE文は「DML」っていいます。

SELECT文(データの抽出)

SQLで一番よく現場で使うのがこの「SELECT文」になります。テーブルから抽出したい列と抽出条件を指定します。

SELECT 列名1, 列名2, 列名3  FROM テーブル名  WHERE 抽出条件

押さえるべき!よく使う条件文

これらはSELECT文と組み合わせて使用することで、抽出条件を絞ることができます。現場でもよく使うので、これくらいは覚えてしまった方がいいです。

条件文意味
WHEREグループ化する前の抽出条件
ORDER BYソート順
GROUP BYグループ化
HAVINGグループ化した後の抽出条件
副問合せ問合せの中に問合せ
UNION重複を含めずに結合
UNION ALL重複を含めて結合
LIKEあいまい検索
EXISTS存在するか
OUTER JOIN外部結合
INNER JOIN内部結合
BETWEEN範囲指定

INSERT文(データの登録)

これも現場でよく使うSQLになります。テーブルへデータを登録するときにINSERT文を実行します。

INSERT INTO テーブル名 ( 列名1, 列名2, 列名3 ) VALUES ( 値1, 値2, 値3 )

UPDATE文(データの更新)

これも現場でよく使うSQLになります。テーブルの中で更新したいデータの条件を指定して、更新処理を行うことができます。「WHERE」句を指定しないと全データを対象に更新処理を行ってトラブルを起こしかねないので注意しましょう。

押さえるべき!基本的な形

UPDATE テーブル名  SET 列名1 = 値1, 列名2 = 値2  WHERE 更新条件

DELETE文(データの削除)

これも現場でよく使うSQLになります。テーブルの中で削除したいデータの条件を指定して、削除処理を行うことができます。「WHERE」句を指定しないと全データを対象に削除処理を行ってトラブルを起こしかねないので注意しましょう。

DELETE FROM テーブル名  WHERE 削除条件

DDL(Data Definition Language):データ定義言語

CREATE文(テーブル作成)

データを格納しておくためのテーブルは「CREATE文」を実行することで作成することができます。ここら辺はProgateに専用コースがないので、知らない方が大半だと思いますが、実務では必須レベルなので押さえておきましょう。

CREATE TABLE テーブル名 ( 列名1 型1, 列名2 型2, 列名3 型3 )

例文

テーブル:「商品情報_T」

列名サイズNOT NULL
商品IDvarcher4
商品名varchar30
単価int8
店舗IDvarchar5
登録日date

上記テーブルを作成するSQL

CREATE TABLE 商品情報_T { 
  `商品ID` varchar(4) NOT NULL ,
  `商品名` varchar(30) ,
  `単価` int(8) ,
  `店舗ID` varchar(5) ,
  `登録日` date
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

ALTER文(テーブル更新)

上記「CREATE文」で作成したテーブルは、「ALTER文」を実行することで列定義を変更することができます。これも実務では必須レベルなので押さえておきましょう。

押さえるべき!基本的な形

// テーブル名変更
ALTER TABLE 変更前テーブル名 RENAME TO 変更後テーブル名 
// テーブル列名変更
ALTER TABLE テーブル名 RENAME 変更前列名 TO 変更後列名

例文

テーブル:「商品情報_T」

列名サイズNOT NULL
商品IDvarcher4
商品名varchar30
単価int8
店舗IDvarchar5
登録日date

上記テーブル名「商品情報_T」を「商品NEW_T」へ変更するSQL

ALTER TABLE 商品情報_T RENAME TO 商品NEW_T

上記テーブルの列名「登録日」を「登録日時」へ変更するSQL

ALTER TABLE 商品情報_T RENAME 登録日 TO 登録日時

DROP文(テーブル削除)

上記「CREATE文」で作成したテーブルは、「DROP文」を実行することで削除することができます。これも実務では使用することがあるので押さえておきましょう。

DROP TABLE テーブル名

TRUNCATE文(テーブルデータの削除)

「TRUNCATE文」を実行することでテーブルの全レコード削除することができます。これも実務では使用することがあるので押さえておきましょう。

TRUNCATE TABLE テーブル名

PL/SQL:手続き型言語

PL/SQLとは、「Procedure Language/Structed Query Language」の略で、「手続き型言語」と訳します。

SQL(非手続き型言語)は一つの命令をおこなうのに対し、PL/SQLは複数の命令を一度の実行でおこなうことができます。PL/SQLは、SQLを拡張した言語になります。

SQLはどの開発現場でも使用します。しかし、PL/SQLは使用されていない現場も多いです。経験上、大量のデータを取り扱う大規模な現場で使用されることが多いと感じます。

そのため、PL/SQLは学習必須ではないと個人的に思います。余裕があれば触れておくと良いでしょう。

MAMPでDB環境構築、テーブル作成、データ抽出などを行う手順

MAMPでDB環境構築、テーブル作成、データ抽出などを行う手順

SQL実行環境やを構築する際はぜひ参考にしながら同じようにやってみてください。 そもそもD 

ReactとGo言語の実務を2日経験して感じたことをまとめてみた

ReactとGo言語の実務を2日経験して感じたことをまとめてみた

少しでも多くの方に読んでいただけるよう、用語の解説は適宜行います。 最初に「React」と