フロントエンド言語の概要

最近よくフロント言語を触ることが多いので、ここで自分の知識を共有したいと思います。



まず、Javascriptには色々なフレームワークがあり、開発用途によって使用するフレームワークが違っていること。




#そもそもフレームワークって何？


　一言でいうとアプリケーションの骨格。

　JavascriptでWedサービスやアプリを開発する上で、サーバーとの連携、ルーティング、データの送受信など、全体的な処理の構造化をしたものみたいです。


　イメージすると車の骨組みがJavascriptでそれに基づいて色々な種類の車を作って行く過程がフレームワークと解釈しても良いと思います。



話を下に戻すと、会社は目的に応じてフレームワークを使い分けているとのこと
(以前は業務でReactを使用していました)


そこで一旦、その一般的なフレームワークやライブラリーの特徴について簡単に述べようと思います




#React
 　ユーザーインターフェースを構築するためのライブラリーで、MVCのViewに特化しており、状態を保持するUIコンポーネントを簡単に作成可能。Reactは仮想DOMを実装した最初のライブラリーで、メモリ内の構造とページとの差異を演算することで、ページを効率的に更新できるようです。

###長所
・効率がいい
・高速、柔軟性が高い
・シンプルなコンポーネントモデル
・ドキュメントとオンラインリソースが充実している。
・サーバーサイドでの描画も可能
・現在人気が高く、急成長している

個人的にはかなり使いやすい感じがします。

###短所
・新たな考え方と構文を学ぶ必要がある
・ビルドツールが必要不可欠
・モデルとコントローラーを提供するほかのライブラリーやフレームワークが必要
・DOMを操作するコードやほかのライブラリーと共存できない可能性がある



#Angular.js

AngularはHTMLを双方向データバインディングによって拡張し、DOM操作をアプリケーションロジックから分離しています。
フロント言語で個人的にAngularが好きです笑

※データバインディングとは
→データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのこと

種類は1.Xと2.x(現在は4.x)と時が経つにつれ使用する用途が広くなっているみたいです。


###AngularJS 1.x：長所
・大企業が採用している人気のフレームワーク
・AngularのみでモダンなWedアプリケーションが作成可能
・「標準の」MEANスタック（MongoDB、Express.JS、AngularJS、NodeJS）の一部なので、数多くの記事やチュートリアルが存在





###AngularJS 1.x：短所
・他の選択肢に比べて学習コストが高い
　→所感として言語仕様が複雑な感じです
・コードベースが大きい
・Angular 2.xにアップグレードできない







#AngularJS 2.x ※現在4.xです
2016年９月にリリースされました。完全に書き直され、コンポーネントをベースにしたモジュール方式を導入しています。TypeScript（JavaScriptにコンパイルされる）で作られています。　バージョン1とは根本的に違うことから互換性なし。




###AngularJS 2.x：長所
・モダンWebアプリケーションを構築できる
・Angular 2+のチュートリアルの数は（前のバージョンと比べて）少ないが、
それでもMEANスタックの一部である

###AngularJS 2.x：短所
・競合する選択肢に比べて学習コストが高い
・コードベースが大きい
・Angular 1.xからアップグレードできない
・Angular 2.xは1.xに比べて普及速度が遅い



#TypeScript
JavaScript超進化版の言語で静的型付けのクラスベースオブジェクト指向言語
C#やJavaなどの静的型付け言語に詳しい開発者に利益をもたらす

最近はかなりホットな言語ですね

#Vue.js
ユーザーインターフェースを作るための軽量で先進的なフレームワークです。Reactのような仮想DOMを使ったView層がフレームワークの核で、他のライブラリーとの結合が可能。シングルページアプリケーションを作ることができます。


追加ツールを使えば、ルーティング、状態管理、アニメーションを実装できます。

###長所
・急速に普及中で人気も上がっている
・導入が簡単で、レベルの高い開発者にも満足度が高い
・依存オブジェクトが少なく、高性能

###短所：
・比較的新しいプロジェクトのため、リスクは大きい
・他の選択肢と比べて、リソースが少ない

#Backbone.js
　サーバーサイドにフレームワークのMVC構造を、クライアントサイドで利用できるようにしたフレームワーク
　同じ開発者によって作られたUnderscore.jsが唯一の依存オブジェクトです

※Backbone.jsは他のプロジェクトと統合できるため、位置付けはライブラリーみたいです

###長所
・小さく、軽量で、比較的単純
・HTMLにロジックを追加しない
・Trello、WordPress.com、LinkedIn、Grouponなど数多くのアプリケーションで採用

###短所
・AngularJSなどの競合する選択肢と比べて、抽象化のレベルが低い（利点にもなる）
・データバインディングなどの機能を実装するためにはコンポーネントを追加する必要がある
・新しいフレームワークはMVCアーキテクチャーではない別の手法に移行している

他にも多くのライブラリーやフレームワークがあるみたいなので調べてみたらよいかもしれません


#そもそもなぜJavascriptの需要が高いの？

主に理由は３つあるみたいです


1.Wed系のフロント開発において世界最高基準のポジションにあること
→JavaScriptを利用したWebサイトやWebサービスは現代のトレンドとなっている

2.あらゆるWedアプリに活用されているため
→JavaScriptはWebアプリケーション開発において、フロントとサーバーサイド双方に活用できる汎用性の高い言語です
　Ruby、PHP、Javaといった他の言語と組み合わせての開発も可能で、JavaScriptのみでもWebアプリケーションのサーバーサイドを開発することができるためです

3.開発環境も充実している


この前置きを踏まえて、今回新たに学んだ事を書こうと思います。

#新しいJavascriptのフレームワークMa_gician

どういうもの？
→新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク

どこで見られるの？
→ソースコードと正式名称は未公開です。

キャッチコピー
→世界中のフロントエンダーの残業時間を減らす

当初は世界中のフロントエンダーを jQuery の記法から解放することが目的で作成されたみたいです
(僕もあまりjQueryは好きではないので少し賛成)

つまり.....
・コンポーネントを作ると、コード料が減る
・コード料が減れば、バグの可能性も減る
→作業時間の短縮
・作業時間が減れば、残業時間も減る！


##最後にJavaScript関数型プログラミングをよんだ感想
次は以下の本を読んだかん感想でした。

・思ったより良書であり実戦向きとなっている。
・初心者向けではなく中級者向けの本です。

個人的には良い本だと思います。(結構難しかったです....)

本の名前は「JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ」
ぜひ、読んでみてください

##結論
まとめてみて思ったことは、Javascriptはかなり奥が深いです。

頑張って僕も時間をかけて学習します。