フロントエンドのプログラミングの最初によくやること

いつもGitHubで自分がやることをメモに残してみた。(いつも部分的に忘れるから...)

# この記事でやること

- GitHubでリモートリポジトリを作成
    
- ローカル環境にローカルリポジトリを作成

- BackEnd用のフォルダとファイルを作成
    - 必要なnpm pakageをインストール
        express
        ejs
        axios
        mysql

    - Node.js
        - app.js
            myslqを読み込み
            expressを読み込み
        - index.ejs

    - ossを読み込み(CDN)
        Bootstrap
        jsファイル
        cssファイル
        Fontawesome

- FrontEnd用のフォルダとファイルを作成

## GitHubでリモートリポジトリを作成する

Githubにて、新規リポジトリを作成する。
![1.new button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602730/a0dffb4d-8a56-445b-b4b3-f25582ba693d.png)

## ローカルリポジトリを作成する

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
```
<font color="Red">git add . コマンドの実行場所を間違えるとwarningとかでる。
[Repository name]のディレクトリでgit add .を実行する。</font>

## フォルダとファイルを作成する

・ディレクトリ構成

[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
```
6. body-parser
npm install body-parser

# BackEnd側のファイル作成

サーバ作成&接続
下記のようなディレクトリ構成になるように<font color="Red">赤字</font>のディレクトリとファイルを作成する。

ここまでのディレクトリ

[project name]
├README
.
.
.
├oss
├<font color="Red">BackEnd</font>
&nbsp;&nbsp;&nbsp;└<font color="Red">app.js</font>
├<font color="Red">views</font>
&nbsp;&nbsp;&nbsp;└<font color="Red">index.ejs</font>

```app.js
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);
```

```index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

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>
```

<font color="Red">実行場所注意！！！</font>
Terminalで<font color="Red">app.jsがあるディレクトリで</font>下記を実行する。
```
node app.js
``` 
ブラウザのURLに「localhost:8080」を入れてEnterすると、「Hello World」がブラウザに表示される。

## index.ejsにoss(CDN)を読み込んでいく

### ・Bootstrapをheaderで読み込む
```HTML
    <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が読み込めてるか確認する方法
```HTML
<body>
    <button type="button" class="btn btn-primary">Primary</button>
</body>
```

読み込めたパターン
![Screen Shot 2022-11-02 at 14.19.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602730/f4d8da60-0356-e3b6-c4fa-1a02db4d1dd2.png)

### ・jQueryをheaderで読み込む
```HTML
<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で読み込む

```HTML
<link rel="stylesheet" href="/BackEnd/main.css">
```

↓必要であれば読み込む
### jsファイルをheaderで読み込む
```HTML
<script src="./index.js"></script>
```
```<link rel>```だとエラーになるので注意

### ・Backbone.jsをheaderで読み込む
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
```
### Backbone.js localstrageをheaderで読み込む
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
```

### ・Underscore.jsをheaderで読み込む
```html
<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する。 
```React
import ReactDOM from 'react-dom';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
```

   HTMLにFontawesomeのタグを追加するだけ
```HTML
<FontAwesomeIcon icon={xxxxxxxx} />
```
例)
```HTML
<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
![Screen Shot 2022-11-02 at 14.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602730/cbb40d0e-e998-3aff-c2e5-681b8e235ee4.png)

★vscode vimのキーバインドの変え方！
Vscode拡張機能のvim→GitHubに飛ぶ→vim.PendingModeを下記に変える。

vim.normalModeKeyBindings



vim.operatorPemdingModeKeyBindings
vim.normalModeKeyBindingsに変える
あと、［””l,”l”］に変えたほうがいい

■ 正規表現のフラグ

iフラグ(IgnoreCaseフラグ)
```javascript
function getCount(str) {
  return (str.match(/[aeiou]/ig)||[]).length;
}
```

gフラグ(Globalフラグ)
一致する全ての文字を置換する
　これを指定しないと最初にヒットした文字だけ置換される




-------------------------------------------------------------