投稿者: カシムラ

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

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

1.Webエンジニアとは Webエンジニアは、プログラミング言語を使ってWebシステム、W 

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

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

ことの発端は以下のツイートです。「入社前にSQLはどれくらい理解しておけば良いか分からない 

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

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

こんにちは、Reactエンジニアのかしむらです。

この記事では

・DBやSQLを学習中の方
・DBの環境構築手順を知りたい方
・DBやSQLの基礎知識を得たい方

という方へ向けて

「MAMPを使用した『DB環境構築』『テーブル作成』『データ抽出』などデータベース操作を一通りおこなう方法」を解説します。

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

1.そもそもDBとは?SQLとは?

SQLは、データベース上のデータを操作する言語です。そのため、「データ」「データベース」とはそれぞれ何なのかを知っておかないといけません。

基礎はもう大丈夫!という方は読み飛ばしてください。では簡単に解説します。

1−1.データとは?

例えば、データベースではこのようなデータを扱います。SQLはこのようなデータを抽出したり、テーブルへデータを登録したり、データを削除したりを行うことができる言語です。

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

1−2.DB(データベース)とは?

データを集めて整理しておくことができる、表のイメージのようなものです。エンジニアは略して「DB」と呼んでいる人がほとんどです。

1−3.SQLとは?

SQL ••• Structured Query Languageの略。データベースを操作することができる言語です。「非手続き型言語」と訳します。

SQLは「DML」「DDL」「DCL」と3つ種類があります。この記事ではテーブル作成やデータ抽出に必要なSQLだけを紹介します。

■DML

データ操作言語。

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

■DDL

データ定義言語。

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

■DCL

データ制御言語。

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

2.DB環境構築

DBの実行環境構築には様々な方法があります。この記事では僕が比較的簡単だと感じた「MAMP」を使ったDB環境構築の手順を解説します。

2−1.MAMPをインストールする

Windowsの方は「XAMPP」をインストールしてください。MAMPとXAMPPは操作方法が多少異なりますが、できることはほぼ同じです。

2−1−1.公式サイトからダウンロードする

MAMPはWindowsと違って2種類あるので注意しましょう。「MAMP」と「MAMP Pro」がありますが、「MAMP Pro」は有料なので、無料版の「MAMP」をダウンロードしてください。

https://www.mamp.info/en/mamp/

2−1−2.「Free Download」をクリックして「MAMP & MAMP PRO」をダウンロードする

2−1−3.ダウンロードされたインストーラを起動してインストールする

ダウンロードしたpkgファイルをダブルクリックしてインストールを実行します。

インストールが完了したら、「閉じる」クリックで完了となります。

2−2.MAMPを起動する

Windowsの方はXAMPPを起動してください。MAMPとXAMPPは操作方法が多少異なりますが、できることはほぼ同じです。

MAMPはWindowsと違って2種類あるので注意しましょう。「MAMP」と「MAMP Pro」がありますが、「MAMP Pro」は有料なので、無料版の「MAMP」を起動してください。

2−2−1.アプリケーション→「MAMP」をダブルクリックする

2−2−2.丸いグレーアイコンをクリックして起動する

2−2−3.右上の「Start」アイコンをクリックする

MAMPのコントロールパネルが起動したら、右上の「Start」アイコンをクリックします。

以下のように「Start」アイコンが「Stop」アイコンに切り替わればMAMPが起動したことになります。

これでDBに接続するための準備が完了しました。DB環境構築は完了です。

3.DB環境構築後にできること

3−0.準備としてターミナルからDB接続する

この記事では、ターミナルというツールを使用して、DBへ接続したり、SQLを実行したりする方法を解説します。

(1)ターミナルを起動します。Windowsの方はコマンドプロンプトでOKです。

ターミナルにコマンドを入力することで、「DB接続」や「SQL実行」はもちろん、普段マウス操作で行なっている「フォルダ作成」や「ファイルコピー」(Linuxコマンド)もマウスを使わずにできます!

(2)以下のコマンドを入力して「Enter」キーを押下します。

cd /Applications/MAMP/Library/bin/

【コマンドの意味】

cd = Change Directory

「/Applications/MAMP/Library/bin/」へディレクトリチェンジ

(3)MySQLのユーザー名とパスワードを入力して「Enter」キーを押下します。

  • ユーザー名:root
  • パスワード:root

ユーザ名:./mysql -u root -p

パスワード:root

※パスワードは表示されません

(4)このような表示になればMySQLへの接続が完了したことになります。

最後に表示されたテキストが「mysql>」ではなく「MariaDB>」となっていても問題ありません。
MariaDBは、MySQL派生のDB管理ソフトです。

3−1.データベースを作成する

■データベースを作成する

データベース「db_Main」を作成する

create database db_Main default charset utf8;

SQL実行が成功すると「Query OK」と表示されます!

データベースを選択する

使用するデータベースに「db_Main」を選択する

use db_Main;

3−2.テーブルを作成する

■テーブルを作成する

テーブル「member_info」を作成する
・テーブル「member_info」はメンバー情報を管理するテーブル
・カラムは「会員ID」「名前」「年齢」

`名前` varchar(40) NOT NULL, `年齢` int(3) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

varchar型は「文字列」型、int型は「数値」型ということを宣言しています!

3−3.データを登録する

上記3−2で作成したテーブルには、まだデータがありません。

■データを登録するSQL 「INSERT文」

INSERT INTO [テーブル名] ( カラム1, カラム2, … ) VALUES ( 値1, 値2, … );

例えば、以下のデータをテーブル「member_info」へ登録する場合は、このようなSQLになります。

データ:

会員ID名前年齢
00005かしむら42
00002テストユーザ123
00003テストユーザ236

SQL:

INSERT INTO member_info (会員ID, 名前, 年齢) VALUES (‘00001’, ‘かしむら’, 42);
INSERT INTO member_info (会員ID, 名前, 年齢) VALUES (‘00002’, ‘テストユーザ1’, 23);
INSERT INTO member_info (会員ID, 名前, 年齢) VALUES (‘00003’, ‘テストユーザ2’, 36);

上記でもいいのですが、INSERT文を3回実行することになってしまうので、まとめた方が良いです。

SQL:

INSERT INTO member_info (会員ID, 名前, 年齢) VALUES
(‘00001’, ‘かしむら’, 42),
(‘00002’, ‘テストユーザ1’, 23),
(‘00003’, ‘テストユーザ2’, 36);

上記SQLを実行するとデータを登録することができます。

ここまで、3−1で「データベースを作成」して、3−2で「テーブルを作成」して、3−3でテーブルに「データを登録」しました。3−4ではデータをターミナル上に表示させてみます。

3−4.データを抽出する

上記3−3で登録したデータを表示してみましょう。

■データを抽出するSQL 「SELECT文」

SELECT カラム1, カラム2, … FROM [テーブル名];

テーブル「member_info」の全データ・全カラムを取得するSQLはこちらです。

SQL:

SELECT * FROM member_info;

抽出結果:

次は抽出条件を指定する方法を解説します。

■データを抽出するSQL 「SELECT文」

SELECT カラム1, カラム2, …
FROM [テーブル名]
WHERE [抽出条件];

テーブル「member_info」のデータのうち、「年齢が30以上」を満たすデータのカラム「名前」を抽出するSQLはこちらです。

SQL:

SELECT 名前 FROM member_info WHERE 年齢 >= 30;

抽出結果:

MAMPを使用すると簡単にDB接続を行ない、テーブル作成やデータ抽出ができることを知っていただけたと思います!

作業終了後は以下を忘れずに行ないましょう!

  • ターミナルに「exit」もしくは「quit」と入力し、Enterキー押下
  • MAMPの電源アイコンをOFFにする(Stop→SrartとなればOK)

最後まで読んでいただきありがとうございました。

Dockerコマンドの備忘録

Dockerコマンドの備忘録

こんにちは、エンジニアのかしむらです。 今回は、Dockerコマンドを備忘録として記事に残 

Mac版DockerDesktopのバージョン確認/設定/動作確認方法

Mac版DockerDesktopのバージョン確認/設定/動作確認方法

こんにちは、エンジニアのかしむらです。 今回は、Mac版DockerDesktopの設定と 

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

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

こんにちは、Reactエンジニアのかしむらです。

この記事では

・React、Go言語を開発言語としている企業や案件で働きたい
・React、Go言語を学習しようとしている

という方へ向けて

「React+Goの開発現場へ常駐して2日経って感じたことや学んだこと」をまとめてみました。

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

最初に「React」と「Go」について解説しておきます。

「React」はJavaScriptのフレームワークです。「コンポーネント(部品)」という考え方でHTML要素を組み立てることができます。

「Go」はGoogleが開発したプログラミング言語です。「Golang」「Go言語」という愛称で呼ばれることもあります。シンプルで高速な処理が可能と言われています。

今回どちらも実務未経験でしたが、ご縁があって案件に参画させていただくことができました。

1.参画している案件について

参画している案件の基本情報はこのようになっています。

業務内容主にフロントはReact、バックはGoを用いてWebサービスの機能実装を行う。
開発メンバーエンジニア4名(自分含む)
開発言語Go、TypeScript、JavaScript、HTML、CSS
フレームワークReact
OSLinux
その他Docker、Git、VSCODE、ubuntu、Slack、Node.js

職場は都内のWeb自社開発企業になります。

2ヶ月ほど前、Reactの経験が全く無い状態から参画できるReactの案件を探していました。「1年以内に”未経験OK”の案件に参画できればいいな」と考えながら毎日学習をしていました。そしたら1ヶ月前に仕事の話をいただく事ができて、7月から『React』『Go』の現場へ入ることができました。

これまでは比較的レガシーな技術で、「Web開発」「システム開発」をしていました。今回の案件を機に、これからはモダンな技術で開発するエンジニアへ移行していきたいと考えています。

2.2日経験して感じたことは?

この案件に参画してまだ2日しか経過していませんが、これまで経験してきた現場と違うころが多々ありました。それらをご紹介していきます。

2−1.会社の雰囲気について

今回入る事になった現場は、都内のWeb自社開発企業です。正社員が10名ほどの会社で、正社員でない方も合わせると、20名ほどの人数になります。僕がこれまでに入った現場は5社ありますが、今回の現場はこれまでと色々違う部分があって新鮮な気持ちで仕事に臨めています。

これまでに経験した現場は、従業員が100名を超えているところがほとんどでした。今回の現場は初めての10人未満の規模です。

2−2.開発について

主に「React」「Go」を用いてのWebサービス開発になります。ただ他にも、「TypeScript」「JavaScript」「HTML」「CSS」「Docker」「Git」「ubuntu」の知見は必要だと感じました。僕はこれまでに開発を5年ほど経験していましたが、「TypeScript」「Docker」「Git」「ubuntu」の経験はありませんでした。ソース管理は「Git」ではなく「SVN(SubVersion)」や「VSS(Visual SourceSafe) 」を使用してきました。ここらへんの新しく使うことになったツールは毎日業務で触れば徐々に慣れていくと思いました。

「設計 → コーディング → テスト → リリース」という開発工程がありますが、僕はその中で「コーディング」を担当しています。正直、未経験でコードを触らせてもらえるのはありがたいです。実務を経験すると日々の学習も方向性がある程度定まるので良きです。

3.React/Go案件に入る前にこれらを学習しておくべき

まだ2日しか業務に携わっていませんが、早くもこれらは学習しておくべきだというものを挙げてみました。

3−1.マークアップ言語(HTML / CSS)

Web開発を行う上でマークアップ言語の知識は必須です。Webサービスの見た目部分を作っているのは「HTML」と「CSS」になるので、これらは学習必須です。学べる教材は世の中に沢山あるので、無料のもので事足りると思います。

3−2.JavaScript

よく勘違いされますが「JavaScript」は「Java」とは全く違う言語なので注意です。

開発でReactを用いる場合、JavaScriptは基礎知識を身に付けておくことは必須で、あとは以下で紹介する関数(メソッド)もチェックしておいてください。実際の現場で登場した関数(メソッド)で、僕が勉強不足だったものをアウトプットがてら挙げてみました。

3−2−1.fetch(フェッチ)メソッド

「fetch」とは、和訳すると取ってくる、呼び出す、引き出すという意味になります。「非同期通信でリクエストを発行、そのレスポンスを取得(非同期通信という方法で、サーバ上になる欲しいデータを取得)」する事ができる関数です。

「非同期通信」とは

ブラウザとサーバ間の通信では、リクエストとレスポンスのやり取りが発生するのですが、通常の場合これは「同期通信」になります。「同期通信」は、レスポンスが返ってくるまで待ち続けないと他の処理を行う事ができません。

「非同期通信」はレスポンスが返ってくる前に他の処理を行うことができます。

コード記述方法

fetch("URL");

意味:URLへ非同期通信でリクエストを発行してレスポンスを取得する

3−2−2.論理演算子(&&、||)

論理演算子は一般的には、&&(かつ)、||(または)という意味で使用されます。

サンプルコード

// 一般的な使用方法
const flag1 = true;
const flag2 = false;

if (flag1 || flag2) {
    console.log("1または2はtrueです");
}
if (flag1 && flag2) {
    console.log("1かつ2はtrueです");
}

ですが、「React」の開発に携わる場合、以下のような使われ方もあることを知っておいた方が良いです。

サンプルコード

const num = null;
const fee = num || "金額未設定";
console.log(fee);

// ||は左側がfalseの場合右を返す
// ||は左側がtrueの場合左を返す


const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);

// &&は左側がtrueの場合右を返す
// &&は左側がfalseの場合左を返す

現場のReactには以下のようなコードがあります。「aa === true」を満たす場合、「JSX」を表示するという意味です。

(aa === true) && (JSX)

「JSX」とは

JSXとは、Reactの用語で、JavaScriptの中にHTMLを記述することをいいます。上記の場合、「aa === true」が成立する場合「JSX」を返す、つまりHTML要素を画面に表示するといういみになります。また、「aa === true」が成立しない場合「aa === true」を返す、つまり画面へ何も表示しないという意味になります。

説明が難しくて申し訳ありませんが、ひとまずJavaScriptの論理演算について抑えておいてください。

3−2−3.React(Hooks:フックス)

Reactの案件なのでReactの基礎知識は必須ですが、Hooks(フックス)も理解しておきましょう。

Hooks(フックス)とは、Reactのクラスコンポーネントでしか使えなかった「state」や「ライフサイクル」を関数コンポーネントでも使用できるようにしたものです。 以前までは、Hooksがなかったので、クラスコンポーネントを活用して、状態管理などをおこなっていました。

現場へ入る前にこれらの教材でReactを学習しましたが、実務でかなり役立ちましたのでおすすめです。

・Udemy「モダンJavaSciptの基礎から始める挫折しないためのReact入門 / じゃけぇ」
・Udemy「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 / じゃけぇ」

3−2−4.Go言語

Go言語はGoogleが開発したプログラミング言語です。シンプルで高速な処理が可能と言われています。「Go」「Go言語」「Golang」と呼ばれます。

Go言語未経験でも、他のサーバサイド言語の経験があれば、キャッチアップはそこまで難しくないと感じました。

では、実務で使用した知識を紹介していきます。

GORM

少々お待ちください…

3−2−5.TypeScript

TypeScriptは「型」を指定可能なJavaScriptといった感じです。略して「TS」ともいいます。

まだ読む程度しか触れていませんが、なんとなく読めるので問題ないと感じています。本格的に使用することになったら学習しようと考えています。

3−2−6.Git

Gitはプログラムソースの変更履歴を管理するバージョン管理システムです。

これは使用に慣れていた方が良いと感じました。基本的なGitコマンドは教材などで学習しておくべきです。

現場へ入る前にこれらの教材でGitを学習しましたが、実務でかなり役立ちましたのでおすすめです。

Udemy「GIt:はじめてのGitとGitHub/ 山浦清透」
Udemy「Git:もう怖くないGit!チーム開発で必要なGitを完全マスター / 山浦清透」

3−2−7.Docker

Dockerは非常に軽量なコンテナ型のアプリケーション実行環境です。

Gitと同様、これも学習必須だと感じました。基本的なDockerコマンドを使えるようにしておくといいでしょう。

現場へ入る前にこれらでDockerを学習しましたが、実務でかなり役立ちましたのでおすすめです。

・Udemy「ゼロからはじめる Dockerによるアプリケーション実行環境構築 / Kazuya Kojima」

3−2−8.JSON

JSONは「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」です。JavaScript、PHP、C++、Java、Pythonなど様々な言語でサポートされており、JSONを間に挟むことで各プログラミング言語間のデータの受け渡しが簡単にできます。

JSONは以下のように書かれます。このようなフォーマットで書かれるということくらいは知っておくといいでしょう。

[
  {"id" : "1", "name" : "Kashimura"},
  {"id" : "2", "name" : "Takahashi"}
]

3−2−9.サークルCI/CD

CI/CDは、作業 → テスト → 公開の流れを「自動化」する時に用います。

CIとは「Continuous Integration」の略で、「継続的インテグレーション」と訳します。「インテグレーション(=統合)」は、ソフトウェア開発の一連の工程(設計〜テスト)を表していて、これを継続的・正確・迅速に開発を進めることが可能になります。

一方CD とは「Continuous Delivery」の略で、「継続的デリバリー」と訳されています。一般的に「デリバリー」とは何かを届けることですが、今回は「配信」や「公開」の意味で使われます。何を「配信」するのかというと、開発テスト中のソフトウェアです。

CI/CDは、本案件でもこれから導入される可能性があるので、少しずつ学習しておこうと考えております。

3−2−10.コンピュータサイエンス基礎

コンピュータサイエンス基礎とは、コンピュータ周りの基礎知識です。現役エンジニアなら知っていた方がいい知識になるので、時間を見つけて学習することをおすすめします。おすすめの学習方法は、基本情報技術者試験のイラスト付き参考書です。こちらを一冊読むだけである程度は身に付けられます。

とりあえず今回はReactの実務を2日間経験して感じたことをブログ記事としてまとめてみました。もしこれからReactやGoの現場へ入ろうと考えている方の参考に少しでもなれば良いと思います。

最後まで読んでいただきありがとうございました。

エンジニアのリアルをブログで発信していくことにしました

エンジニアのリアルをブログで発信していくことにしました

かしむらのこれまでの実績は? こちらを参考にしてください。 https://kashibl 

フリーランスエンジニアがおすすめする読むべき書籍5選(2021年1~2月の部)

フリーランスエンジニアがおすすめする読むべき書籍5選(2021年1~2月の部)

おすすめ書籍5選 第1位 「嫌われる勇気」 第2位 「読んだら忘れない読書術 第3位 「将