Ryosuke's Blog
  • Programming
  • Productivity
  • Best App for Mac
  • English
Ryosuke's Blog
  • Programming
  • Productivity
  • Best App for Mac
  • English
IT NewsProgramming

【2019年】Web開発トレンド総まとめ – フロントエンド開発編

by Ryosuke 2019-01-13
written by Ryosuke 2019-01-13

 
こんにちは。Ryosuke(@ryosuke_mizuta)です。

現在フリーランスエンジニア/プログラミング講師として働いております。

今回は、2019年のWeb開発のトレンドをフロントエンド開発に焦点を絞ってご紹介します。

今回の記事は、この動画を日本語訳したものです。

 

この記事で意識していただきたいこと

  1. Web開発者になるために、この記事で紹介しているすべての技術トレンドを学ぶ必要はありません。
  2. この記事では様々な技術トレンドをシンプルなカテゴリーに分け、何をどのような順番で学べば良いか、計画を立てやすいようご紹介しています。
  3. この記事内でのアドバイスや提案は、あくまで私の経験と予測によるものです。

この記事はとっても長いので先に目次を確認し、全体像を確認していただくのがオススメです!

目次

  • Basic Front-End Web Developer – 若手フロントエンド開発者
    • Basic Software & Tools – Web開発のためのツール
    • HTML & CSS
    • Deployment – デプロイ
    • Sass
    • Vanilla JavaScript
  • To be more rigid web devlopper – 更に堅固なWeb開発者になるために
    • HTML/CSS フレームワーク
    • Git & Tooling
    • Front-End JS フレームワーク
    • State Management – バージョン管理
  • Full Fledged Front-End Web Developer – 最高のフロントエンド開発者になるために
  • まとめ

Basic Front-End Web Developer – 若手フロントエンド開発者

最初にフロントエンド開発者になるために必要な最低限の知識を見ていきます。

これらの知識は、基本的に全て身につける必要があります。

その知識を自由自在に使いこなせずとも、ドキュメントを自力で調べ、目的を達成する力を身に付けたいです。

 

Basic Software & Tools – Web開発のためのツール

最初にWeb開発のための基本的なツールをご紹介します。

 

テキストエディタ or IDE

ご紹介するテキストエディタは、全て私が使ってみた経験からオススメをご紹介しています。

 

VSCode

私がコーディングする際にメインで使用しているのがVSCodeです。

レスポンスが早く、直感的で、素晴らしい拡張機能があります。

私の周りの多くのWeb開発者が、VSCodeを使用しています。

コマンドラインが内蔵されているため、VSCodeさえけばアプリの開発を行うことができます。

 

Sublime Text

恐ろしく処理が速いエディタです。

とても滑らかでストレスフリーです。

私は執筆作業をする際に、Sublime Textを使用しています。

この記事もSublime Textで書いています。

機能がシンプルで、非常に使いやすいです。

コーディングもしっかりできるため、プログラミング初学者の方に1番オススメのエディタです。

 

Cloud9

IDE(統合開発環境)の中では、最もオススメできるのがCloud9です。

AWSのサービスの1つで、ドキュメントが充実しています。

ソフトウェア開発に必要なツールが全て揃っているので、多くのプログラミングスクールで使用されています。

こちらの記事でCloud9について詳しくまとめています。


画像が読み込めません。

【プログラミング未経験者向け】 AWS Cloud9 のインストール方法を丁寧に解説します。

 

Web Browser – Webブラウザ

 

Google Chrome

私がメインで使用しているブラウザです。

ブラウザの中で最も人気で、多くの人に利用されています。

何か1つブラウザをお勧めするのなら、間違いなくChromeです。

動作も快適で、優れたChrome拡張機能がたくさんあります。

今度私が愛用しているChrome拡張機能のまとめ記事を書きますね!

 

Firefox

Firefoxも非常に優れたブラウザの一つです。

私は主にChromeとFirefoxを使用しています。

Firefoxの特徴は、タブごとに処理を分離することで、読み込みの高速化と安定性の向上していることです。

個人的にFirefoxは使っていて快感です。

Firefoxはサブブラウザとしてすごくオススメです。

 

Design & Mockup – モックアップデザイン

デザインツールは開発者にとって必ずしも必要ではありません。

特にバックエンドの開発者にとっては使う機会は多くないと思います。

しかし、より良いサービスを作るためにデザインを学ぶことは大切です。

昨今のユーザフレンドリーなデザインを重視する傾向を無視する訳にはいきません。

こちらでは私がお勧めするデザインツールをご紹介します。

 

Adobe XD

最初にオススメしたいのがAdobe XDです。

非常にシンプルなインターフェースで、モックアップデザインを作成するのに適しています。

Photoshopよりも使い勝手は良いので、軽くデザインしたいという方にオススメです。

 

Photoshop

画像を加工するためのソフトウェアです。

高機能で、自由自在に画像を編集することができます。

しかし高機能な分、使いこなすには多少の慣れが必要です。

Photoshopのプロたちはこんなことができます。

 

Skitch

画像にコメントを入れたり、モザイクをかけるだけであればSkitchで十分です。

非常に使い勝手が良く、直感的に使用することができます。

無料なので、インストールしておいて損はないでしょう。

◼︎ Skitch 公式サイト

 

Figma

とにかく早くモックアップデザインを作りたい!という方にはFigmaがオススメです。

シンプルなUIで使い易いです。

◼︎ Figma 公式サイト

 

サードパーティ製のコマンドライン

サードパーティ製のコマンドラインは必要不可欠ではありません。

しかし、これらのコマンドラインには、デフォルトには無い優れた拡張機能やショートカットがあります。

上手く活用することができれば、より効率的な開発ができます。

特にWindowsのコマンドラインは、Web開発向けとは言えないので是非下記を参考にしてください。

 

Git Bash

Windowsユーザーに特にオススメなのが、Git Bashです。

Git Bashは、簡単にいうとGitの機能が搭載されたBashです。

UnixコマンドやLinuxコマンドを使用することができます。

 

iTerm2

私が使用しているのがこちらのiTerm2です。

Macユーザにオススメです。

カスタマイズ性が高く、自分好みのターミナルにすることができます。

 

Hyper

Hyperは、UbuntuやWindowsユーザにオススメのコマンドラインです。

HyperはテキストエディタのAtom同様、Electronで構築されています。

 


 

HTML & CSS

HTML/CSSは、Web開発の基本中の基本です。

Web開発の学習は、どんな場合もHTML/CSSの学習から始まります。

ブラウザは、基本的にHTML/CSSで書かれたものしか表示することができません。

どんなWebサイトもWebアプリも、ブラウザに表示するためのHTML/CSSで書かれたレイアウトを持っています。

下記のサイトでHTML/CSSの基礎知識を身につけるのがオススメです。

◼︎ HTML&CSS入門 Webデザインをイチから学ぼう

 

What to learn – 何を学べば良いか

 

HTML5 Elements – HTML5の要素

まずはHTMLの要素について学習をしましょう。

header要素やaタグはどのように使うのか。

それぞれの要素の基本的なユースケースは何か。

これらをまずしっかり抑えましょう。

 

Basic CSS – CSSの基礎

次はCSSです。

HTMLは、Webページ内の各要素の意味や情報構造を定義します。

CSSでは、それらをどのように装飾するかを指定します。

想い通りのデザインを表現するためには、CSSの知識は欠かせません。

 

Flexbox & CSS Grid

Flexbox、CSS Gridを使用することで、簡単に柔軟なWebページを実装することができます。

こちらの記事に詳しい解説が載っているので、是非参考にしてください。

◼︎ これからのCSSレイアウトはFlexboxで決まり!

 

CSS Variables

CSS Variablesとは、CSS内で変数を定義するということです。

「Custom Propaties/CSS変数」と呼ばれます。

何度も繰り返し利用する数値や、カラーコードなどにCSS変数を使用することで、より効率良くCSSを書くことが出来ます。

こちらの記事に詳しい解説が載っていますので、是非参考にしてください。

◼︎ CSSで変数(カスタムプロパティ)を使ってみよう

 

Browser Dev Tools – ブラウザ検証ツール

ほぼすべてのブラウザに検証ツールが内蔵されています。

検証ツールを使用することで下記のようなことができます。

  • デザインの微調整
  • 他のWebサイトのコードチェック
  • スマホやタブレットなどの複数サイズでの表示チェック

こちらの記事に詳しい解説が載っていますので、是非参考にしてください。

◼︎ 初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

 

Responsive Layout – レスポンシブデザイン

今までレスポンシブなレイアウトは、Webページにとって贅沢品でした。

しかし、2019年の時点でレスポンシブなレイアウトは、全てのWebページにとって必要不可欠です。

デスクトップでは最高にクールなデザインなのに、
スマートフォンやタブレットではデザインが崩れてしまうのは本当に勿体無い話です。

Web開発者には、ユーザーがどんな端末で見ても整ったデザインを提供する義務があります。

レスポンシブデザインを取り入れるのは難しくありません。

下記の知識を学び、レスポンシブデザインを使いこなしましょう。

 

Set viewport – veiwportの設定

簡単にいうとviewportとは「表示領域」のことです。

スマホやタブレットといったそれぞれの端末に、
Webページの最適な表示領域を自動で調整してくれます。

 

Media queris – メディアクエリ

メディアクエリは、 デバイスの解像度やウィンドウの幅、向きなどの指定条件に合わせて別々の CSSを適用できる機能のことです。

スマホやタブレット対応のWebデザインを行う際に、Viewportとともに必ずといっていいほど登場します。

Viewportとメディアクエリについては、こちらの記事に詳しい解説が載っています。

◼︎ コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて

 

Fluid widths – 柔軟な横幅

Fluidは、幅の全体をブラウザのウインドウに対して相対値(%)で指定する流動的なレイアウトです。

ユーザーが自由にサイズを変更してもレイアウトが崩れないのが特徴です。

 

rem over px – pxよりrem

CSSの基本単位として、pxではなくremを使いましょう。

remは完全に拡縮可能なレイアウトを作るのに役立ちます。

こちらの記事に詳しい解説が載っていますので、是非参考にしてください。

◼︎ CSSの基本単位としてremを使うと超絶便利

 


 

Deployment – デプロイ

次に、静的なWebサイトのデプロイの方法を学んでいきます。

デプロイとはインターネット上に公開することです。

HTML/CSSまで勉強し、Webサイトを作り上げたならそれをデプロイしてみましょう。

デプロイするためには、下記の知識が必要になります。

 

Register a domain name – ドメイン取得

まずWebサイトをデプロイするためには、ドメインが必要です。

ドメインは、インターネット上でのサイトの住所です。

住所がないサイトに、ユーザーは訪れることはできません。

まずドメインの取得方法を勉強する必要があります。

 

Google Domeins

Googleはドメインサービスも行なっています。

ドメインはWebサイトやWebアプリを運用する上で、非常に大切です。

なので大企業が運営していると安心感があります。

 

お名前.com

お名前.comは、日本最大級のドメイン公式登録サービスです。

GMOグループが運営しています。

このブログのドメインはお名前.comで取得しています。

 

Managed shared hosting or VPS – ホスティングサービス

ホスティングサービスとはサーバーの運営・管理を代行してくれるサービスです。

利用することで、サーバーの利用者自身がサーバーが落ちた際の対応などをする必要がなくなります。

VPS(Virtual Private Server)とは、仮想専用サーバーのことです。

こちらの記事のVPSについて詳しい解説がありますのでご参考ください。

◼︎ VPSとは?レンタルサーバーと何が違う?分かりやすく解説

 

Inmotion

特に北米で人気があるホスティングサービスです。

 

さくらインターネット

日本で非常に人気のあるホスティングサービスです。

専用サーバの稼動数は国内有数の規模であり、1万台以上の稼動実績があります。

また、レンタルサーバについても30万を超えるユーザが利用しています。

 

FTP, SFTP File Upload

まずWebサイトを公開するためには、手元にある文章や画像データなどを、Webサーバーに転送(実質的には複製)しなければなりません。

その際に使用されるのが下記でご紹介しているFTP(File Transfer Protocol)ソフトです。

少し複雑に思えるかもしれませんが、使ってみれば意外に簡単です。

画像や記事などを、インターネット上に公開している自分のWebサイトにアップロードする際などに使用されるツールのことです。

 

FileZilla

FTPソフトは、FileZillaさえインストールしておけば間違いないでしょう。

日本語の解説記事も多く、安心して使いこなすことができます。

FileZillaの詳しい解説記事はこちらです。

◼︎ 【FileZillaの使い方】WordPressでFTPソフトを使おう

 

Cyberduck

CyberduckもFileZilla同様、FTPソフトです。

操作がわかりやすく、動作も安定しています。

しかし、大量のデータを送受信する際にFileZillaよりも大幅に遅い、という記事をちらほら見つけたので、特別な理由がなければFileZillaをオススメします。

Cyberduckの解説記事はこちらです。

◼︎ 【初心者向け】Cyberduck(サイバーダック)の使い方

 

Static Hosting – 静的Webサイトホスティング(Gitの知識が必要)

 

Netlify

Netlifyは静的なサイトを超高速で提供できるWebサービスです。

使い方がシンプルで初めて利用した時は驚きました。

静的なサイトのホスティングであればもうNetlifyがあればいい、そう思えるほどの感動でした。

Netlifyの詳しい解説記事はこちらです。

◼︎ 高機能ホスティングサービスNetlifyについて調べて使ってみた

◼︎ Netlify – 公式サイト

 

Github Pages

GitHubが提供している静的サイトのホスティングサービスです。

HTML/CSS/JSを利用した静的サイトを簡単に公開することができます。

GitHubアカウントをお持ちの方であれば3分でサイトを公開できます。

3分です。

Github Pagesの詳しい解説記事はこちらです。

◼︎ 無料で使える!GitHub Pagesを使ってWebページを公開する方法

◼︎ Github Pages – 公式サイト

 


 

Sass

Sassは、シンプルにCSSの上位互換です。

必要不可欠ではありませんが、Sassの学習をオススメします。

CSSの基礎知識があれば、学習は簡単です。

下記の知識を抑えておくと効率良くSassを使用できます。

  • Structured CSS – 体系化されたCSS
  • Variables – CSS変数
  • Nested CSS – CSSのネスト
  • Mixins & Functions
  • Inheritance – CSSの継承

 


 

Vanilla JavaScript

あなたがフロントエンド開発者を目指して学習していれば、最初に触れるプログラミング言語はJavaScriptになると思います。

目標がPHP、Python、Go-lang、Ruby開発者であったとしても、JavaScriptの知識は必要です。

なぜならJavaScriptはブラウザ用の言語だからです。

Vanilla JavaScriptはジョークフレームワークです。

実はそんなものは存在しません。

ただのJavaScriptのことです。

フロンエンド、バックエンド、フルスタックのどの開発においてもJavaScriptの知識は欠かせません。

盤石の基礎を身に付けましょう。

 

JavaScriptの基礎

まずJavaScriptの基礎からです。

こちらのポイントを抑えましょう。

  • Data Types – データタイプ
  • Functions – 関数
  • Conditionals – 条件分岐
  • Loops – 繰り返し処理

こちらのサイトでJavaScriptの基礎を学習するのがオススメです。

◼︎ 詳解JavaScript 基礎文法編

 

DOM Manipulation & Events

JavaScriptを学習ではDOMの理解も非常に重要です。

DOM(Document Object Model)は、 HTMLやXMLのためのプログラミングインターフェイスです。

DOMが分からない状態では、簡単なボタンの装飾もできません。

DOMの学習は、こちらのサイトがオススメです。

◼︎ 詳解JavaScript DOM編

 

JSON

JSONの知識も必須でしょう。

JSONというのは「データを表現するための記法」です。

ほとんどのAPIはJSONでデータを返してくれます。

APIを上手く活用するためにもJSONの学習は大切です。

 

Fetch API

Fetch APIを利用すると、リクエストやレスポンスといったHTTP のパイプラインを構成する要素を操作できるようになります。

またfetch() メソッドを利用することで、非同期のネットワーク通信を簡潔に記述できるようになります。

こちらの記事に詳しい解説が載っているので、是非参考にしてください。

◼︎ Fetch 概説

 

ES6

ECMAScript(ES6)は、JavaScriptの中核仕様を抜き出して標準化したものです。

使い勝手の良い機能や構文を多く持っています。

ReactはVueといったフレームワークを学習するのであればES6の知識が必要です。

こちらのポイントを抑えしょう。

  • Arrow Functions – アロー関数
  • Promises – Promise処理
  • async / await – 非同期通信
  • Destructing – 分割代入構文

ES6の詳しい概要については、こちらの記事が参考になります。

◼︎ ES2015(ES6) 入門

 

オススメJavaScript学習サイト

JavaScriptを更に深くまで学びたいという方は、こちらの記事にも目を通して頂ければと思います。


画像が読み込めません。

【2019年版】最高の海外プログラミング学習サイトTop10

 


画像が読み込めません。

【Progateだけじゃない】 無料でプログラミングを勉強できるオススメ海外学習サイト5選!

 


 

To be more rigid web devlopper – 更に堅固なWeb開発者になるために

HTML、CSS、JavaScriptのスキルを身に付けたあなたは、もう駆け出しフロントエンド開発者です。

今まで身につけたスキルを使えばこのようなことができます。

  • 静的なサイトを作る。(小規模なビジネスのHPやポートフォリオ)
  • UI Layoutを作る。(Webデザインを選び、そのデザインをHTML/CSSで実装する。)
  • モーダルやスライドショーなどの凝ったUIを実装する。
  • Webサイトをデプロイし、維持&運営をする。

これで最低限、フロントエンド開発のお仕事を探せる状態です。

しかし、これだけでは安定して案件を獲得することや、満足なお給料を頂くのは難しいです。

フロントエンド開発者として良いキャリアを築くためには、より多くの学習が必要になります。

更にスキルあるフロントエンド開発者になるために抑えておきたいポイントはこちらです。

 

さらに優れた開発者になるために学習したいもの

  • HTML/CSS フレームワーク
  • Git & Tooling
  • Front-End JS フレームワーク
  • Server-Side Language & Detabese – サーバサイド言語 & データベース

1つずつ見ていきましょう!

 


 

HTML/CSS フレームワーク

HTML/CSS フレームワークの重要性は少しづつ低くなっています。

しかし、それを踏まえた上でまだ学ぶ価値はあると私は考えます。

これらの知識は、サービスのプロトタイプを作る際に非常に強力な味方になってくれるからです。

ベーシックで最低限見た目の整ったサイトを素早く開発することが出来ます。

 

Bootstrap

どれか1つ選ぶなら、Bootstrapをオススメします。

本当に使いやすく、綺麗なデザインを簡単に適応することが出来ます。

開発者に最も人気なCSSフレームワークです。

こちらの記事に詳しい解説が載っているので、是非参考にしてください。

◼︎ Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者向け】

 

Materialize

Materializeとは、Googleが提唱するマテリアルデザインを取り入れたフレームワークです。

私の感覚では、更にBootstrapより簡単に使用することが出来ます。

初めてのアプリ作成には、Materializeがオススメです。

◼︎ Materialize – 公式サイト

 

Bulma

デザインを作る様子を動画で教えてくれるので分かりやすいです。

こちらのページから確認してみてください。

◼︎ Bulma Videos

 


 

Git & Tooling

Gitは、間違いなく全てのWeb開発者に必要な知識です。

こちらではGitと合わせて、あなたを助けてくれるツールをご紹介します。

 

Basic Command Line – コマンドラインの基礎

最初にコマンドラインを触るときは、分からないことだらけで怖いですよね。

私も使い始めた時はその奥深さに圧倒されました。

しかし、コマンドラインを習得することはWeb開発者にとって非常に大きい財産になります。

cd, ls, mkdir, touchといった基本的なコマンドだけで構いません。

少しづつコマンドラインに慣れていきましょう。

コマンドラインはこちらのサイトで学習するのがオススメです。

◼︎ UNIXコマンド入門 【一般ユーザー編】

 

Git

現在Webサービスを提供する90%以上の企業でGitが使用されています。

もはやGitの知識なしにWeb開発に関わることが難しいくらいです。

私はGitは慣れだと思っています。

最初は使いづらいと思いますが、慣れてしまえば呼吸をするようにコミットからプッシュまでできるようになります。

GitはWebサービスのバージョン管理には欠かせません。

10個ほどのよく使われるGitコマンドさえ理解し、使えるようになれば十分です。

少しづつGitに慣れていきましょう。

Gitはこちらのサイトで学習するのがオススメです。

◼︎ git入門

 

NPM or Yarn

NPM(Node Package Manager)とは、Node.jsのライブラリやパッケージを管理することができるツールです。

Yarnは、Facebook発のJavaScriptパッケージマネジャーです。

JavaScirptのライブラリからフレームワークまでインストールすることが出来ます。

こちらの記事で、両者の違いを詳しく解説しているので是非参考にしてみてください。

◼︎ Yarn:Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか

 

Webpack or Parcel

これらはモジュールバンドラーと言われるものです。

簡潔に言うと、モジュールバンドラーは複数のファイルを1つにまとめてくれます。

Webpackは、多機能で痒いところまで手が届くモジュールバンドラーです。

Parcelは細かい設定は苦手なものの、ビルドがお手軽にできるモジュールバンドラーです。

※ ビルドとは、そのアプリに使用されるファイルをすべて変換、効果的にデプロイして、大半のWebブラウザーが理解できる形にすることです。

こちらの記事でWebpackについて詳しく解説しています。

◼︎ Webpackってどんなもの?

 

Gulp or Grunt

GulpとGrunt、どちらもNode.jsをベースとしたビルドシステムヘルパーです。

タスクランナーと呼ばれたりもします。

これらを使えば開発に必要な種々の処理を自動化することができます。

これら、自動化ためのツールは、下記のような場合で役に立ちます。

  • SassやLessをCSSに自動変換したいとき場合
  • JavaScriptやCSSファイルの結合・圧縮を自動化したい場合

こちらの記事で、それぞれ詳しく解説しているので是非参考にしてみてください。

◼︎ 現場で使えるGulp入門

◼︎ 現場で使えるGrunt入門

 

Editer Extentions – エディタ拡張

エディタの拡張はもちろん必須ではありません。

しかし、チームメンバー間で統一された美しいコードを生成するためにはこういったツールが必要です。

ESLint

ESLintは、JavaScriptのための静的検証ツールです。

コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。

◼︎ ESLint 最初の一歩

 

Prettier

Prettierは、コードフォーマッター(ソースコードを整形してくれるツール)です。

JS、CSS、JSON、GraphQLなど様々な形式に対応しています。

こちらの記事で、Pretterについて詳しく解説しています。

◼︎ Prettier 入門 ~ESLintとの違いを理解して併用する~

 


 

Front-End JS フレームワーク

続いてJavaScriptのフロントエンドフレームワークを見ていきましょう。

フロントエンドフレームワークの世界には現在3人の巨人が居ます。

React、Vue、Angularです。

もしあなたがフロントエンド開発者として就職、またはフリーランスを望んでいるのなら、このどれかは勉強する必要があります。

これらのJavaSciptのフロントエンドフレームワークの需要は非常に大きくなっています。

フロントエンドJSフレームワークの特徴はこちらです。

  • Web産業で非常に人気が高い。
  • インタラクティブ性が高く、面白いUIが実現できる。
  • Componentsやmodularが充実している。
  • チーム開発に向いている。

 

React

現在最も開発者に人気なのがReactです。

Reactは、Facebook製のJavaScriptライブラリです。

WebアプリのUIを効率的に構築することを目的としており、主にView部分を実装します。

Reactについてはこちらの記事が非常に参考になります。

◼︎ Reactを使うとなぜjQueryが要らなくなるのか

 

Vue

Vueは使いやすく、その人気もどんどん高くなっています。

Vueは、WebアプリにおけるUIを構築するための、オープンソースのJavaScriptフレームワークです。

Vueは日本語のドキュメントが非常に充実しています。

こちらが公式ドキュメントなので、大枠を掴みたい方はこちらをご参考ください。

◼︎ Vue.js とは?

 

Angular

Angularは、Googleと個人や企業のコミュニティによって開発されています。

こちらもオープンソースのJavaScriptフレームワークです。

完全に私の感覚ですが、少しずつAngularは下火になっているような気がします。

スタートアップなどの若い会社では、ReactかVueの方がより好んで使われています。

Angularについてはこちらの記事が非常に参考になります。

◼︎ 【初心者必見】Angularとは?いまさら聞けない基礎を学ぼう

 


 

State Management – バージョン管理

先に紹介したJSベースのフロントエンドフレームワークを使用した開発には欠かせないステイトマネージメント(状態管理)ツールをご紹介します。

React、Vue、AngularといったJavaSciptのフロントエンドフレームワークで大きなAppを開発する場合、これらのステイト(状態)管理ツールが必要になります。

 

Redux, Context API

 

Redux

Redux は状態の管理を容易にするJavaScriptライブラリです。

Reactを使用するのであればReduxで間違いないでしょう。

Reduxに関しては、こちらの記事に非常に参考になります。

◼︎ Redux入門 10分で理解するReduxの基礎

 

Context API

Context APIの大きな特徴として、これまでサードパーティーのライブラリに頼っていたstate管理をreact本来の機能で実装できるようになりました。

Reduxは、 React自体には結びつきません。

Redexより学習コストが低く、可読性が高いシンプルなコードが書くことができます。

こちらの記事にReduxとの比較を含めた、詳しい解説が載っています。

◼︎ React v16で実装された new Context APIを使って、Reduxへ別れを告げる

 

Apollo(GraphQL Client)

Apolloは、よくGraphQLとともに使われます。

(標準なREST APIとも使うことができます。)

Apolloの特徴として、状態管理におけるクライアント側のコードがシンプルに書くことができます。

こちらの記事に詳しい解説が載っているので、是非参考にしてください。

◼︎ 世のフロントエンドエンジニアにApollo Clientを布教したい

 

VueX

VueXは、Vueアプリケーションの状態管理を適切に扱うためのライブラリです。

Vueアプリケーションには、基本的にVueXが使用されます。

こちらが公式ドキュメントです。

◼︎ Vuex とは何か?

 

NgRx

NgRxは、Angularアプリケーションの状態管理を適切に扱うためのライブラリです。

一言で簡潔に説明すると、AngularとRxJSに最適化したReduxです。

こちらの記事に詳しい解説が載っているので、是非参考にしてください。

◼︎ ngrx紹介

 


 

Full Fledged Front-End Web Developer – 最高のフロントエンド開発者になるために

ここまで学んだあなたはもう立派なフロントエンド開発者です。

既にあなたはこのようなことを出来るスキルを持っています。

  • 素敵なフロントエンドのアプリを開発する。
  • 堅実なフロントエンド開発スキルがある。
  • Gitを用いて、チーム開発を経験する。
  • アプリにバックエンドAPIを実装し、データを取り扱う。

ここまでのスキルが身についたら、フロントエンドの仕事で困ることはないでしょう。

あなたはフロントエンドに関する知識について、自信を持って話せるはずです。

 


 

まとめ

今回は、2019年のWeb開発のトレンドフロントエンドに絞ってご紹介させて頂きました。

この記事を執筆していて思いましたが、やはりテクノロジーの世界は日進月歩です。

新しい技術が毎日のように現れます。

日々の学習がどれだけ大切か身をもって思い知らされました。

この記事では、本当にたくさんのトレンドをご紹介しています。

気になったものは自分で調べながら、深掘りして頂ければと思います。

最後まで読んで頂きありがとうございました。

何かご質問やご要望があればTwitter(@ryosuke_mizuta )で話しかけていただけますと嬉しいです👏

この記事が気に入ったという方は、シェアして頂けますと嬉しいです😊

0 comment
4
FacebookTwitterPinterestEmail
Ryosuke

previous post
【CES 2019】GoogleがCESで発表したもの総まとめ!
next post
【サピエンス全史】資本主義がいかに人類に発展をもたらしたのか。

You may also like

【CES 201...

2019-01-09

最高の海外プログ...

2021-02-12

【2019年決定...

2018-12-30

【これぞシンギュ...

2018-12-26

【Progate...

2018-12-21

絶対挫折しない。...

2018-09-09

【エンジニアが教...

2018-09-06

【プログラミング...

2018-08-06

Leave a Comment Cancel Reply

Save my name, email, and website in this browser for the next time I comment.

Search

カテゴリー

  • Best Apps For Mac
  • English
  • IT News
  • Productivity
  • Programming
  • Self-branding
  • 未分類

アーカイブ

  • 2019年3月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • Facebook
  • Twitter
  • Instagram
  • Email
  • RSS

@ 2018 Ryosuke Mizuta


Back To Top