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

6460 ワード

初心者フロントエンド JavaScript Node.js JavaScript テキストリンク

関連技術とポイント

とりあえず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サイトをホスト出来る。

さいごに

覚える事が多い世界だが、複雑で面白いと思う。

クラウドが出てきて、確実に昔の世代より簡単にモノが作れるようになっていると思う。

そんな時代に何か新しいサービスを発信したいですね。

Author And Source

この問題について(WEBフロントエンドはじめにシンプルに覚える事（NodeJS)), 我々は、より多くの情報をここで見つけました https://qiita.com/kashih/items/44788bbe245e293f6eed

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

python 3出力辞書の特定のkeyを印刷する方法の例

Debian 8+Flask+Nginx+uWSDi+uWSDi Emperor基本プロファイルの注意事項

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