WEBフロントエンドはじめにシンプルに覚える事 （NodeJS)


# 関連技術とポイント
## とりあえずGitHub
なんでもOSSな時代、gitで人のソースをとにかく読んで書き方を参考にするべし。   
シンプルどころで言えば、こちらを参考としてみるのも有りかもしれない[Underscore日本語リファレンス](http://www.elder-flower.com/underscore_js.html)   
データを扱う参考になるし、いたってシンプルな書き方をしている。

## フレームワーク
なくても動かせるようだが、基本使うもの   
- [Express](https://expressjs.com/ja/)   
シンプルなよく使われるフレームワーク   
他にも有名どころとして、「Meteor」や「Sails」などが挙げられる。

## 基本や関連（フロントサイド多め）
### 非同期処理   
ちょっと理解が難しいですが、ある関数が返す結果が欲しいんだけど、書き方によっては結果が返ってくるのを待たずに次の処理に移る状態。   
多分DB連携とか、データをどこかから取得してくる時にぶつかる壁だろう。asyncとかpromiseとかコールバックとかネストとか書き方がそれぞれあるけど、最初は読みやすいコードや、似ているコードのやつとかを書いてみると、理解を深めて行けると思う。   
※ 書き方が多いだけで正直そんなに難しい話しじゃない

### JSフレームワーク   
 JQuery,React,Angular,Vue等々あるが、   
 JQueryと後の3つはかなりの別物である。 基本的にJQueryは簡単に慣れると思うし使いやすいと感じる。　後の3つは概念を理解するのが少し大変であるが、使用できた場合の恩恵が強いと思う。（高速,再利用,コーディング量）
 vueなら比較的簡単に覚えられる気がするので、入り口に向いているかもしれない。

### コーディング   
#### JSの事   
まずECMAScript2015のこと。　ES5とES6について理解が必要。
簡単に言えば古いブラウザとかは新しい書き方すると動かないよって話し。※念の為頭の片隅にでも、できたらbabelとトランスパイルとかも、、   
基本的にはES6で書いていればいいと思う。  
**○ざっと簡単な所**   
- 変数宣言: `let` と `var` と `const`   
- アロー関数: `=>` 関数定義をシンプルに   
- テンプレート文字列? バッククォート ※これ便利   

```js
const URL = 'https://hogehoge'
const HOGA_URL = `${URL}/hogahoga/`
```

#### コーディングのこと   
 書くことが慣れてきたら、eslintで書き方を統一させてみる。


### デザイン  
cssフレームワークを導入することにより、ある程度のデザインをおまかせしよう。   
BootstrapやSemanticUIなど有名どころでアイコンやボタンなどは簡単にそれらしく出来る。

### パッケージマネージャ（yarn・npm）   
パッケージマネージャーは、npmだけでは無い。（だよね）   
yarnの方が早いよって事だけ知っていれば大丈夫。

### ビルドやwebpack babelのこと   
 古いブラウザで使ってもらうためトランスパイルや、早く表示するために圧縮したりをbabelやwebpack使ってやるよって話し。※なんとなく単語だけ知っていればいいかなって感じです

### CDN(コンテンツ・デリバリ・ネットワーク）   
 ソースとか画像とかを、見てる人の近くのCDNサーバから取ってこよって技術。   
 JQueryとかBootstrapとかこんな感じにHTMLに記述すれば、読み込めるよって事。   
 ※ちなみにCDN市場最大の会社は *アカマイ（akamai）*

 ```html
 <!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrapの基本テンプレート</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<h1>Bootstrapの基本テンプレート</h1>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	</body>
</html>
 ```

### サーバーレス（クラウド）   
もはやNodeJS関係ないが、マイクロサービスやRestAPIの事は抑えておく必要がある。   
簡単な説明だと、フロントに静的webサイト等を設け、バックエンドにサーバーレス構成を挟むような形を取る。そうする事でセキュリティ・コスト・運用を最適化する事が出来るようだ。
  - 静的webサイトホスティング・・・AWS/S3, gitHub, Firebase   
  - サーバーレス・・・AWS/lambda, IBM/Functions   
   ※このサーバーレスにNode,jsがよく使われたりする。

### テスト   
jestやmochaを使ってテストをしよう。   
どうやらjestがいいらしい。。

## 基本や便利npmモジュール
- request   
どこかのRestAPI叩きたい時に使う

- async   
非同期処理をシンプル化

- moment   
時間や日付系

- body-parser   
リクエストのbodyをパースする（POSTでJSONとかを送りたい場合に使った気がする）

- Underscore   
関数や配列、オブジェクトを扱う際に発生する処理をシンプル化   

- dotenv   
環境変数 .envとか

- helmet   
アプリケーション保護

- passport   
認証ライブラリ

- forever   
デーモン化

- fs   
ファイル読み込みとか出力とか

- データベース接続系   
mysql,mongodb...etc


## ツール
- VSコード(Visual Studio Code )   
協力コードエディタ、Gitやdockerなど連携が容易でかなり軽い。 最強だと思っている。

- GitLab
無料だし。 静的Webサイトをホスト出来る。

# さいごに
覚える事が多い世界だが、複雑で面白いと思う。   
クラウドが出てきて、確実に昔の世代より簡単にモノが作れるようになっていると思う。   
そんな時代に何か新しいサービスを発信したいですね。