関連技術とポイント
とりあえずGitHub
なんでもOSSな時代、gitで人のソースをとにかく読んで書き方を参考にするべし。
シンプルどころで言えば、こちらを参考としてみるのも有りかもしれないUnderscore日本語リファレンス
データを扱う参考になるし、いたってシンプルな書き方をしている。
フレームワーク
なくても動かせるようだが、基本使うもの
- Express
シンプルなよく使われるフレームワーク
他にも有名どころとして、「Meteor」や「Sails」などが挙げられる。
基本や関連（フロントサイド多め）
非同期処理
ちょっと理解が難しいですが、ある関数が返す結果が欲しいんだけど、書き方によっては結果が返ってくるのを待たずに次の処理に移る状態。
多分DB連携とか、データをどこかから取得してくる時にぶつかる壁だろう。asyncとかpromiseとかコールバックとかネストとか書き方がそれぞれあるけど、最初は読みやすいコードや、似ているコードのやつとかを書いてみると、理解を深めて行けると思う。
※ 書き方が多いだけで正直そんなに難しい話しじゃない
JSフレームワーク
JQuery,React,Angular,Vue等々あるが、
JQueryと後の3つはかなりの別物である。 基本的にJQueryは簡単に慣れると思うし使いやすいと感じる。 後の3つは概念を理解するのが少し大変であるが、使用できた場合の恩恵が強いと思う。（高速,再利用,コーディング量）
vueなら比較的簡単に覚えられる気がするので、入り口に向いているかもしれない。
コーディング
JSの事
まずECMAScript2015のこと。 ES5とES6について理解が必要。
簡単に言えば古いブラウザとかは新しい書き方すると動かないよって話し。※念の為頭の片隅にでも、できたらbabelとトランスパイルとかも、、
基本的にはES6で書いていればいいと思う。
○ざっと簡単な所
- 変数宣言: let と var と const
- アロー関数: => 関数定義をシンプルに
- テンプレート文字列? バッククォート ※これ便利
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）
<!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サイトをホスト出来る。
さいごに
覚える事が多い世界だが、複雑で面白いと思う。
クラウドが出てきて、確実に昔の世代より簡単にモノが作れるようになっていると思う。
そんな時代に何か新しいサービスを発信したいですね。