現状：
エンジニアへの未経験転職。
就職先も決まり、2月からひよこエンジニアに。
2025年は頑張ろうということで、2025年学習記録13日目。
昨日は引っ越しのためのお役所周りや新しい就職先での必要事項やらなんやらかんやら。
内容は常に書き散らしのメモです、あしからず。
当面の目標：LPIC101,102合格
データベースの基本的な操作方法（MySQL）
データベース操作
-
MySQLサーバーへの接続:
mysql -u root -p接続時にパスワードを入力します[4][5]。
-
データベース一覧の表示:
SHOW DATABASES; -
新しいデータベースの作成:
CREATE DATABASE データベース名 DEFAULT CHARACTER SET utf8; -
データベースの選択:
USE データベース名; -
データベースの削除:
DROP DATABASE データベース名;
テーブル操作
-
テーブルの作成:
CREATE TABLE テーブル名 ( id INT(5), name VARCHAR(31), age INT(3), address VARCHAR(51), created_at DATETIME ); -
データの追加 (INSERT):
INSERT INTO テーブル名 (id, name, age, address, created_at) VALUES (1, '山田太郎', 25, '東京都〜', NOW()); -
データの取得 (SELECT):
SELECT id, name, age FROM テーブル名 WHERE age > 30; -
データの更新 (UPDATE):
UPDATE テーブル名 SET address = '新しい住所' WHERE id = 1; -
データの削除 (DELETE):
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
テーブル内データの確認方法
操作方法
-
使用するデータベースを選択:
USE データベース名; -
SELECT文を使用し、テーブルの中身を表示:SELECT * FROM テーブル名;*によって、テーブル内の全てのカラムと全ての行を指定し表示[1]。 -
特定のカラムのみを表示したい場合:
SELECT カラム名1, カラム名2 FROM テーブル名; -
条件を指定してデータを絞り込むことも可能:
SELECT * FROM テーブル名 WHERE 条件;
例
「user」テーブルで名前が「山田」で始まるデータのみを表示する場合:
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アプリケーションの立上方法
-
プロジェクトの作成:
npm create vite@latest my-react-app --template react # または npm create vite@latestこのコマンドでは、
my-react-appの部分を任意のプロジェクト名に変更できます[3][5]。 -
プロジェクトディレクトリへの移動:
cd my-react-app -
依存関係のインストール:
npm install -
開発サーバーの起動:
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を読み込む。
例
<!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"の記述によって使用できる。