いつもGitHubで自分がやることをメモに残してみた。(いつも部分的に忘れるから...)
この記事でやること
-
GitHubでリモートリポジトリを作成
-
ローカル環境にローカルリポジトリを作成
-
BackEnd用のフォルダとファイルを作成
-
必要なnpm pakageをインストール
express
ejs
axios
mysql -
Node.js
- app.js
myslqを読み込み
expressを読み込み - index.ejs
- app.js
-
ossを読み込み(CDN)
Bootstrap
jsファイル
cssファイル
Fontawesome
-
-
FrontEnd用のフォルダとファイルを作成
GitHubでリモートリポジトリを作成する
Githubにて、新規リポジトリを作成する。
ローカルリポジトリを作成する
1 . ローカルディレクトリを作成する。
mkdir [file name]
cd [file name]
git init
2 . 作成したリモートリポジトリをcloneする。
git clone [URL]
↓これはやらなくてもOK
3 . ローカルリポジトリとリモートリポジトリを紐づける
実行場所: [作成したブランチ]
git remote add origin https://github.com/xxxxx/xxx.git
4 . READMEを編集
5 . READMEをリモートリポジトリにpushする。
git add [file name]
git commit -m "comments"
git push origin main
//2020年からデフォルトのmasterを指定しなくなった
//git push origin master
git add . コマンドの実行場所を間違えるとwarningとかでる。
[Repository name]のディレクトリでgit add .を実行する。
フォルダとファイルを作成する
・ディレクトリ構成
[Repository name]
├ README
├ index.html
├ src
└ css
└ HTML
└ js
├ oss
↓この手順は飛ばしてOK。今のところmasterにこだわりがないのでデフォルトをmainのままでいい
6 . GitHubのデフォルトブランチをmasterにする
setting > Branchesにある矢印マークをクリックしてmasterに切り替える > Update
7 . HTMLをブラウザにみれるようにする設定
setting > Pages > Branch を「main」にして「save」
8 . ローカルリポジトリに権限を付与しておく
chmod -R 755 [directory name]
npm packagesを準備
ossフォルダで下記の1~5を実行する。(これは個人的なやり方)
※3~5を手動で一つずつ打つのがめんどい時は下記のコマンドだけ実行すればOK
npm install axios ; npm install mysql
↓飛ばす。あとで追加するapp.jsがあるディレクトリで実行しないとうまくいかない。
1 . Express.js(Node.jsのFramework)をインストール
npm install express
↓飛ばす。あとで追加するapp.jsがあるディレクトリで実行しないとうまくいかない。
2 . EJSをインストール
npm install ejs
3 . Axiosをインストール
npm install axios
4 . mysqlをインストール
npm install mysql
5 . nodemonをインストール
npm install nodemon
- body-parser
npm install body-parser
BackEnd側のファイル作成
サーバ作成&接続
下記のようなディレクトリ構成になるように赤字のディレクトリとファイルを作成する。
ここまでのディレクトリ
[project name]
├README
.
.
.
├oss
├BackEnd
└app.js
├views
└index.ejs
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.render('index.ejs');
});
// Paste the code to start the server
app.listen(8080);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
htmlテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<script src="/views/js/1.practice.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
実行場所注意！！！
Terminalでapp.jsがあるディレクトリで下記を実行する。
node app.js
ブラウザのURLに「localhost:8080」を入れてEnterすると、「Hello World」がブラウザに表示される。
index.ejsにoss(CDN)を読み込んでいく
・Bootstrapをheaderで読み込む
<link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css>
<link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js>
・Bootstrapが読み込めてるか確認する方法
<body>
<button type="button" class="btn btn-primary">Primary</button>
</body>
読み込めたパターン
・jQueryをheaderで読み込む
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
</head>
・jQueryをheaderで読み込めてるか確認する方法
Dev toolのコンソールで下記のコマンドを実行して、バージョンが帰ってくればOK
$.fn.jquery;
・作成したCSSをheaderで読み込む
<link rel="stylesheet" href="/BackEnd/main.css">
↓必要であれば読み込む
jsファイルをheaderで読み込む
<script src="./index.js"></script>
<link rel>だとエラーになるので注意
・Backbone.jsをheaderで読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
Backbone.js localstrageをheaderで読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
・Underscore.jsをheaderで読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
・FontAwesomeをheaderでHTMLに読み込む(CDN)
・FontAwesomeをHTMLに読み込みできてるか確認する方法
・FontAwesome npm installとheaderで読み込み
CSS作成
index.ejsに適用するcssファイルを作成する
js作成
最後に
ここまでできたら、あとはフロントとバックエンドを作っていけばOK
メモ-------------------------------------------------------------
STEP1
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
STEP2
Reactに下記を importする。
import ReactDOM from 'react-dom';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
HTMLにFontawesomeのタグを追加するだけ
<FontAwesomeIcon icon={xxxxxxxx} />
例)
<FontAwesomeIcon icon={faCoffee} />
■いろんなPakageのバージョンをTarminalで見る方法
EJS
Express
Bootstrap
jQuery
インストール済みのnpmパッケージ確認
npm ls
バージョン確認
npm view --version
ejs
express
mysql
axios
ターミナル表示非表示
ctrl+j
vscodeで複数行編集する
v
複数行選択
shift+i
入力
vscodeのターミナル終了できない問題
setting jsonでctrl+cを無効にしてたから
ソースコードを移動、削除、追加した時に起こること
html編
読み込んでいた下記のリソースが読み込めなくなる
cssファイル
jsファイル
imageファイル
hrefのリンク切れ
oss関連
jquery
node.jsのfsでindex.htmlを取得したが、htmlのボタンが機能しなかった事件
fsは静的ファイル読み込みであり、ファイルサーバにindex.htmlを取得しただけだったので、cssやjsファイルが読み込めなかった。
index.htmlだけ取得するだけでなく、projectフォルダごと取得しないと無理っぽいし、そもそもそんなかできるかわからない。
Node.jsでconsole.log確認する場所を間違ってた件
Node.jsの場合は、terminal上にconsole.logの結果が返ってくる。
nodeコマンドでファイル内容を実行しているから。
■ vscodeのディレクトリ見にくい問題
⚙マーク > settings > Tree Indent
★vscode vimのキーバインドの変え方！
Vscode拡張機能のvim→GitHubに飛ぶ→vim.PendingModeを下記に変える。
vim.normalModeKeyBindings
vim.operatorPemdingModeKeyBindings
vim.normalModeKeyBindingsに変える
あと、［””l,”l”］に変えたほうがいい
■ 正規表現のフラグ
iフラグ(IgnoreCaseフラグ)
function getCount(str) {
return (str.match(/[aeiou]/ig)||[]).length;
}
gフラグ(Globalフラグ)
一致する全ての文字を置換する
これを指定しないと最初にヒットした文字だけ置換される