Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

フロントエンド開発の技術スタックのキャッチアップ

Last updated at Posted at 2018-07-07

概要

更新中です。
この記事は、専らサーバーサイドを担当しているエンジニアが、フロントエンド開発の(なるべく最新の)動向をキャッチアップするために作成しました。

ECMAScript

version Language Specification
ES5.1 [ECMAScript® Language Specification] (https://www.ecma-international.org/ecma-262/5.1/)
ES6 / ES2015 [ECMAScript® 2015 Language Specification] (https://www.ecma-international.org/ecma-262/6.0/)
ES2016 [ECMAScript® 2016 Language Specification] (https://www.ecma-international.org/ecma-262/7.0/)
ES2017 [ECMAScript® 2017 Language Specification] (https://www.ecma-international.org/ecma-262/8.0/)

[lukehoban/es6features] (https://github.com/lukehoban/es6features)

Overview of ECMAScript 6 features

ブラウザのサポート状況 (2018/05現在)

[ECMAScript x compatibility table] (http://kangax.github.io/compat-table/es6/)というサイトで確認しました。

Version Chrome 67 Firefox 60 Edge 42
ES5.1 100% 100% 100%
ES6 98% 98% 96%
ES2016+ 96% 78% 52%

[Node.js] (https://nodejs.org/en/)

ECMAScriptのサポート状況 (2018/05現在)

[Node.js ES2015/ES6, ES2016 and ES2017 support] (https://node.green/)というサイトで確認しました。

Version Node 6.14.2 Node 8.9.4 Node 10.3.0
ES6 99% 99% 99%
ES2016 100% 100% 100%
ES2017 23% 73% 100%

サーバーレス環境のサポート状況 (2018/05現在)

AWS Lambda

AWS Lambda は次のランタイムバージョンをサポートします。

  • Node.js – v8.10、4.3.2 および 6.10.3

[Lambda 実行環境と利用できるライブラリ] (https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/current-supported-versions.html)

Google Cloud Functions

Supported Runtime & Runtime Updates

Cloud Functions offers Node.js runtime, currently in version v6.14.0. Where possible, we will follow the "LTS" release cycle of Node and will update minor and patch versions of the runtime as soon as or shortly after they become available.

[Cloud Functions Execution Environment] (https://cloud.google.com/functions/docs/concepts/exec?hl=ja)

スタイルガイド (Style Guide)

Airbnb JavaScript Style Guide

Google JavaScript Style Guide

JavaScript Standard Style

https://standardjs.com/
https://github.com/standard/standard

Node.js Style Guide

パッケージ管理 (Package Management)

npm

Node.jsにもバンドルされています。(バージョンは2018年5月現在)
[Previous Releases] (https://nodejs.org/en/download/releases/)

Node.js npm
6.14.2 3.10.10
8.11.2 5.6.0
10.3.0 6.1.0

package.json

package-lock.json

npm5より導入された機能

Scoped packages

[npm-scope] (https://docs.npmjs.com/misc/scope)

@(アットマーク)から始まるパッケージはスコープを持つ

@somescope/somepackagename
 ^^^^^^^^^ ^^^^^^^^^^^^^^^
   |         |
   |         package
   scope

Yarn

https://yarnpkg.com/ja/
https://github.com/yarnpkg

ライブラリ / フレームワーク (Library / Framework)

2018年3月16日に公開された「[ReactJS vs Angular5 vs Vue.js — What to choose in 2018?] (https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d)」というサイトによれば、Angular、React、Vue.jsの中で、Reactが最も認知度が高く次いでAngular、Vue.jsの順ということです。

GitHubのStar数で言えば、2018年5月30日時点で下記のようになっています。

[facebook/react] (https://github.com/facebook/react/) [vuejs/vue] (https://github.com/vuejs/vue) [angular/angular] (https://github.com/angular/angular)
Star 97,079 95,867 36,690

[Angular] (https://angular.io/)

Angular

One framework.
Mobile & desktop.

[AngularJS] (https://angularjs.org/)

https://angularjs.org/はAngularJS (version 1.x)のサイトです。
AngularJS version 1.xは、2016年9月にリリースされたAngular version 2.xとは互換性はありません。(version 2.xからフレームワーク名もAngularJSからAngularへ変わっています)

[React] (https://reactjs.org/)

React

A JavaScript library for building user interfaces

open sourced by Facebook in 2013

[Next.js] (https://nextjs.org/)

Next.js

React Applications Made Simple

[React Native] (https://facebook.github.io/react-native/)

React Native

Build native mobile apps using JavaScript and React

[React Native Web] (https://github.com/necolas/react-native-web)

React Native for Web

[Flutter] (https://flutter.io/)

開発言語はDartです

Flutter

Build beautiful native apps in record time

[Vue.js] (https://jp.vuejs.org/)

Vue.js

The Progressive JavaScript Framework

launched in 2013

[Nuxt.js] (https://nuxtjs.org/)

Nuxt.js

Universal Vue.js Applications

モジュールバンドラー (Module Bundler)

webpack

https://webpack.js.org/
https://github.com/webpack

Browserify

http://browserify.org/
https://github.com/browserify

rollup

https://rollupjs.org/guide/en
https://github.com/rollup

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

Comments

No comments

Let's comment your feelings that are more than good

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address