2025/1/15 学習記録


## 現状：

エンジニアへの未経験転職。
就職先も決まり、2月からひよこエンジニアに。

2025年は頑張ろうということで、2025年学習記録13日目。
昨日は引っ越しのためのお役所周りや新しい就職先での必要事項やらなんやらかんやら。

内容は常に書き散らしのメモです、あしからず。

当面の目標：LPIC101,102合格


## データベースの基本的な操作方法（`MySQL`）

### データベース操作

1. MySQLサーバーへの接続:
    
    ```bash
    mysql -u root -p
    ```
    
    接続時にパスワードを入力します[4][5]。
    
2. データベース一覧の表示:
    
    ```sql
    SHOW DATABASES;
    ```
    
3. 新しいデータベースの作成:
    
    ```sql
    CREATE DATABASE データベース名 DEFAULT CHARACTER SET utf8;
    ```
    
4. データベースの選択:
    
    ```sql
    USE データベース名;
    ```
    
5. データベースの削除:
    
    ```sql
    DROP DATABASE データベース名;
    ```
    

### テーブル操作

1. テーブルの作成:
    
    ```sql
    CREATE TABLE テーブル名 (
      id INT(5),
      name VARCHAR(31),
      age INT(3),
      address VARCHAR(51),
      created_at DATETIME
    );
    ```
    
2. データの追加 (INSERT):
    
    ```sql
    INSERT INTO テーブル名 (id, name, age, address, created_at)
    VALUES (1, '山田太郎', 25, '東京都〜', NOW());
    ```
    
3. データの取得 (SELECT):
    
    ```sql
    SELECT id, name, age FROM テーブル名 WHERE age > 30;
    ```
    
4. データの更新 (UPDATE):
    
    ```sql
    UPDATE テーブル名 SET address = '新しい住所' WHERE id = 1;
    ```
    
5. データの削除 (DELETE):
    
    ```sql
    DELETE FROM テーブル名 WHERE id = 1;
    ```
    

### Citations:

[1] https://www.javadrive.jp/mysql/
[2] https://qiita.com/knife0125/items/bb095a85d1a5d3c8f706
[3] https://snome.jp/database/db-intro-3/
[4] https://qiita.com/ab-boy_ringo/items/2fd8a57fa4b7d1fd6e23
[5] https://liginc.co.jp/643688
[6] https://dev.mysql.com/doc/refman/8.0/ja/database-use.html

### テーブル内データの確認方法

### 操作方法

1. 使用するデータベースを選択:
    
    ```sql
    USE データベース名;
    ```
    
2. `SELECT`文を使用し、テーブルの中身を表示:
    
    ```sql
    SELECT * FROM テーブル名;
    ```
    
    `*`によって、テーブル内の全てのカラムと全ての行を指定し表示[1]。
    
3. 特定のカラムのみを表示したい場合:
    
    ```sql
    SELECT カラム名1, カラム名2 FROM テーブル名;
    ```
    
4. 条件を指定してデータを絞り込むことも可能:
    
    ```sql
    SELECT * FROM テーブル名 WHERE 条件;
    ```
    

### 例

「user」テーブルで名前が「山田」で始まるデータのみを表示する場合:

```sql
SELECT name, age FROM user WHERE name LIKE '山田%';
```

この例では、「name」と「age」カラムのみが表示され、「山田」で始まる名前のデータのみが取得されます[1]。

### Citations:

[1] https://style.potepan.com/articles/25221.html
[2] https://qiita.com/maruyama42/items/a692edac9f5aa4b64786






# React

## プロジェクトの作成方法（`vite`）
- 今は`vita`でのアプリ作成が推奨らしい。

### `Vite`を使用したReactアプリケーションの立上方法

1. プロジェクトの作成:
    
    ```bash
    npm create vite@latest my-react-app --template react
    # または
    npm create vite@latest
    ```
    
    このコマンドでは、`my-react-app`の部分を任意のプロジェクト名に変更できます[3][5]。
    
2. プロジェクトディレクトリへの移動:
    
    ```bash
    cd my-react-app
    ```
    
3. 依存関係のインストール:
    
    ```bash
    npm install
    ```
    
4. 開発サーバーの起動:
    
    ```bash
    npm run dev
    ```
    
    このコマンドを実行すると、通常`http://localhost:5173`でアプリケーションにアクセスできます[3]。
    

### 補足情報

- Viteは高速なビルドが可能で、create-react-appよりも効率的です[1][5]。
- プロジェクト作成時に、JavaScriptかTypeScriptかを選択できます[2]。
- 2025年1月現在、React公式ドキュメントでもcreate-react-appの代わりにViteが推奨されています。

### Citations:

[1] https://zenn.dev/shohei_1010/articles/1e1ceb008e4963
[2] https://roa-run-dev.com/react-vite-environment-construction/
[3] https://qiita.com/mshr1-create/items/7246cdb56e72e0ab0caa
[4] https://qiita.com/k_sapphire/items/5885a1ca6c63c5eedd90
[5] https://zenn.dev/longbridge/articles/93f63e0423785b
[6] https://www.webcreatorbox.com/blog/vite-react
[7] https://www.zenryoku-kun.com/new-post/vite
[8] https://ja.vite.dev/guide/

## `package.json`ファイルの内容について

プロジェクトの設定、依存関係、スクリプトを定義しており、Node.jsとnpmを使用してプロジェクトを管理するために使用される。

### 基本情報

- `"name"`: プロジェクト名（"test_app"）
- `"private"`: このパッケージを非公開に設定（true）
- `"version"`: プロジェクトのバージョン（"0.0.0"）
- `"type"`: モジュールタイプ（"module"はES modulesを使用）

### スクリプト

`"scripts"`: npm run コマンドで実行できるスクリプト

- `"dev"`: 開発サーバーを起動（Viteを使用）
- `"build"`: プロダクションビルドを作成
- `"lint"`: ESLintでコードを検証
- `"preview"`: ビルドしたプロジェクトをプレビュー

### 依存関係

`"dependencies"`: プロジェクトの実行に必要なパッケージ

- `"react"`: Reactライブラリ
- `"react-dom"`: ReactのDOM関連機能

### 開発依存関係

`"devDependencies"`: 開発時のみ必要なパッケージ

- `"@eslint/js"`, `"eslint"`: JavaScript用のリンター
- `"@types/react"`, `"@types/react-dom"`: React用の型定義
- `"@vitejs/plugin-react"`: ViteのReactプラグイン
- `"eslint-plugin-react"`, `"eslint-plugin-react-hooks"`, `"eslint-plugin-react-refresh"`: React用のESLintプラグイン
- `"globals"`: グローバル変数の定義
- `"vite"`: 高速な開発サーバーとビルドツール

## 使用方法

- HTMLの`<head></head>` 内に、`script` を読み込む。

例

```jsx
<!DOCTYPE html>
<html>
  <head>
    <script src="../libs/react.development.js"></script>
    <script src="../libs/react-dom.development.js"></script>
    <script src="../libs/babel-standalone.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render(<h1>こんにちは</h1>);
      // varsion18以降の記述方法;
    </script>
  </body>
</html>
```

- `root.render();` の（）内に記載した`JSX構文` が、`babel-standalone` というソフトによって`HTML` に変換され、`id="app"` のappに挿入され、画面に表示される。
- `babel-standalone` は、scriptタグの`type="text/babel"` の記述によって使用できる。




































### 今日はここまで！