Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Wse6575320403(S J)

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

Last updated at Posted at 2022-10-27

いつも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

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

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
  1. body-parser
    npm install body-parser

BackEnd側のファイル作成

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

ここまでのディレクトリ

[project name]
├README
.
.
.
├oss
├BackEnd
   └app.js
├views
   └index.ejs

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テンプレート

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

読み込めたパターン
Screen Shot 2022-11-02 at 14.19.15.png

・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
Screen Shot 2022-11-02 at 14.37.14.png

★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フラグ)
一致する全ての文字を置換する
　これを指定しないと最初にヒットした文字だけ置換される

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?