最新記事・WASM入門

fukke.cafe

Webフロントのすべて

はじめに

ぼくがいままで学んできたWebフロントについて語っていきます.
これからWebフロントを勉強する人の参考になればいいなとおもます.

index.html + styles.css + index.js

フレームワークなどを使わない純粋?なWebサイトは基本的にこの組み合わせで作成されています.
htmlで設計し, cssでデザイン, jsで動きをつけるといった感じです.
Webサービスを作るのではなく, ラウンディングページなどただ表示だけを担うのであればこの構成で十分です.
またブラウザごとの表示の差異をなくすためにjQueryというモジュールも開発され, いまではレガシーと言われながも, ほとんどのWebサービス以外のサイトでは使われています.

jQueryを勉強するべきか

Webの歴史をたどる上で知識として存在を知っておけば大丈夫だと思います.
jQueryと次に書く3大フレームワークとの思想の差が激しくjQueryから抜け出すのに時間がかかるのであまりおすすめしません.
ただWebサービスをつくるのではなく私はWebデザイナーになる！という人がいれば勉強するのも良いと思います.
jQueryを使えば簡単にアニメーションなどを実現できるからです.
現場で使えるjQueryプラグイン22選 https://proengineer.internous.co.jp/content/columnfeature/12562

3大フロントフレームワーク

次にフレームワークについてのお話です.
多分皆さん耳にしたことはあると思います.
  • Angular
  • React
  • Vue.js
並びはリリース順です.
これらのフレームワークを使うと簡単にSPA(シングルページアプリケーション)を実装することができます. SPAにすることで動的なサーバーとの通信, 差分レンダリングが行われ, そのおかげで高速なページ遷移, 高いUXを実現することができます.
次にそれぞれのフレームワークについての使用感を書いていきます.

Vue.js

みんな大好きVue.js. 3つの中では一番最近できたフレームワークです.

勉強方法

公式の日本語ドキュメントがとても見やすく, はじめてフロント触る！って人はこのVue.jsを最初に勉強することをおすすめします. またcdnを使って簡単に導入でき, 部分的にVue.jsを使うなんてこともできます. Vue.jsでがっつり開発したい人はvue-cliを使うことで雛形を作成できます.

おすすめの本

Vue.js入門 基礎から実践アプリケーション開発まで 川口 和也 https://www.amazon.co.jp/dp/B07J6FP6NQ/ref=cm_sw_r_tw_dp_U_x_BTZGEbT1K9S06

おすすめライブラリ

Vuetify

Vue.jsのUIライブラリといったらVuetifyです.
公式サイト https://vuetifyjs.com/ja/
表示に必要なほとんどのコンポーネントはVuetifyに準備されており, 置くだけでもそこそこのクオリティのサイトを作成することができます. ただどうしてもVuetify臭くなる(分かる人が見ると「あっVuetifyだ」って気づく)ので色を変えたりすこしcssを加えたりするといい感じになります.
ドキュメントも日本語で非常に読みやすいのでおすすめです.
今話題の東京都 新型コロナウイルス感染症対策サイトもVue.jsで作成されています.
GitHub https://github.com/tokyo-metropolitan-gov/covid19
サイト https://stopcovid19.metro.tokyo.lg.jp/

Vue Router

SPA独特のルーティング処理はVue Routerに任せましょう. ドキュメントも日本語で, コードもとてもわかりやすいです.
公式サイト https://router.vuejs.org/ja/

Vuex

Stateと呼ばれるコンポーネントの状態を一括管理してくれるライブラリです. ReactにもReduxと呼ばれる状態管理ライブラリがあるのですが, Vuexはそれに比べてとてもわかりやすく, 直感的に書くことができます.(Reduxがかなり書きづらい) Stateが多くなったり, 受け渡しが複雑になってきたらVuexの導入を考えてもよいし, とても軽いライブラリなので最初から導入しても良いと思います.
公式サイト https://vuex.vuejs.org/ja/

Vue.jsまとめ

日本語ドキュメントが充実していて, 初心者にとても優しく, 小さなプロジェクト, ハッカソン等にはとても向いていると感じます. ぼくはハッカソンや小さいな個人開発でしか触っていませんが, すぐに書けるようになったので皆さんにもぜひ使ってみてほしいです.

Vue.jsからの派生 "Nuxt.js"

Vue.jsはSPAを構築するフレームワークですが, Nuxt.jsを使えばSSR(サーバーサイドレンダリング)が可能なSPAを構築できます.
SSRはSPAの欠点である レンダリング時間やSEOの問題などを補うことができます.
気になる人はSPA SSRで調べて見てください.
Nuxt.jsの機能はSSRだけでなくVue RouterやVuexの機能を標準で提供してある点や, Nuxt.js独自のルーティング実装によってVue Routerがより使いやすくなっています.
また今話題?のPWA(プログレッシブウェブアプリ)も作成できます.
Vue.jsの記法などを勉強したあとに, ぜひ使ってみてほしいです.
公式サイト https://ja.nuxtjs.org/

React

3つの中では2番目に作られたフレームワークです.
ぼくは個人開発や業務で触っていて, 個人的に一番好きなフレームワークです.

勉強方法

ドキュメントの日本語翻訳はありますが, Vue.jsほどきれいな日本語ではないです. 公式のチュートリアルではなぜか三目並べを作らされるので, 他のチュートリアル記事(Todoリスト)などをおすすめします.
公式サイト https://ja.reactjs.org/

おすすめライブラリ

Material-UI

VuetifyのReact版です. とても優秀でReact-hooksも取り入れています. こちらもそのままつかうとMateiral-UI臭さが残るのでカラーやこれをベースにcssを当てるといい感じになります.
公式サイト https://material-ui.com/

styled-components

ReactでCSSを書くときはキャメルケースで書いたりと少し癖があるのですが, このライブラリを使うと普段cssを使うときと同じ記法で書くことができます. またクラス名を考える必要もなくコンポーネントに対して直接styleを適用できます. Material-UIのコンポーネントにも使えて相性が良いです.
公式サイト https://styled-components.com/

Reactまとめ

Vue.jsに比べて学習コストは高めですが, 小規模なものから中規模のプロダクトまで使えるフレームワークだと思います. v16.8から追加されたReact-hooksによってかなり書きやすくなりましたし, TypeScriptを導入すると保守性も上がるのでフロントに興味のある人にはぜひ触ってほしいです.

Reactからの派生 "Next.js"

Nuxt.jsのReact版です.
こちらもReactでSSRをするためのものでNuxt.jsと同じく独自のルーティング処理を持っています.
またNext.jsを管理してるZeit社は強力なPaaSであるNowを作っており, これによりデプロイがとても簡易化されています. なんと now というコマンドを打つだけでデプロイができます...
公式サイト https://nextjs.org/

Reactでモバイルアプリ開発 "ReactNative"

Reactを勉強する利点としてモバイル開発にも応用できるという点があります.
しかもAndroid, iOS両方に対応したクロスプラットフォームでの開発をすることができます.
通常はAndroid用にKotlinやJava, iOSではSwiftを使ってのアプリ開発を行うのですが, ReactNativeによって同じ言語を使って二つのプラットフォームでの開発が実現されています.
ただReactNative関連のモジュールはまだ開発段階であり, 安定しているとは言い難いのでしっかりバージョンを確認にしましょう.
実はVue.jsにもVueNativeというReactNativeのVue.jsバージョンがあるのですがおすすめしません.
公式サイト https://reactnative.dev/

勉強方法

ReactNativeはロジック部分はReactと同じなのでReactの勉強をしてからおこなうと良いです.
また開発環境はExpoを使用することをおすすめします.
実機やシミュレーターでの動作確認が簡単におこなえます.
公式サイト https://expo.io/

おすすめの本

React Native+Expoではじめるスマホアプリ開発
https://www.amazon.co.jp/dp/4839966648/ref=cm_sw_r_tw_dp_U_x_XOmHEbMTDQZ

おすすめライブラリ

こちらの記事にまとまっています.
2018年にReact Nativeを始める人におすすめ26選(Qiita) https://qiita.com/yutasuzuki/items/046e120eac9b20bed487

Angular

3つのなかで一番古いフレームワークです. チュートリアルでしか触ったことないのでVue.jsやReactみたいな評価ができませんが, 印象としては難しい！って感じです. 大規模な開発に使われ, TypeScriptを標準で使用しているなどかなり保守性が高いフレームワークのため学習コストが高いと感じました. Angularはフルスタックでルーターなどの機能を公式が提供しているので, 他のライブラリを使うことなくAngularのみで開発ができるみたいです. 個人開発や小さなプロダクトで使うには少し重い気がしますが, Angularを使えばほかの技術選定に悩むことなく開発を進められるのが利点です.
日本語ドキュメントは充実しています. またionicというAngularをベースにしたモバイルアプリ開発フレームワークもあります.
Angular公式サイト https://angular.jp/
Ionic公式サイト https://ionicframework.com/

JavaScriptのお勉強

フレームワークを紹介してきましたが, いざ開発を進めていくとJavaScript自体で詰まる事が多いです.
JavaScriptの言語仕様はかなりめちゃくちゃなのでちょっとできるようになるまでにかなりの時間を費やすことになります.
そこでおすすめの記事や, 本だけでも紹介しておこうと思います.
JavaScriptはES6というバージョン移行, 書き方がかなり変わってきました.
こちらの記事を参考にしながらｲﾏﾄﾞｷの書き方を覚えましょう.
イマドキのJavaScriptの書き方2018 https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
JavaScriptのWeb入門書です.
チートシートがめっちゃ便利なので紹介します.
JavaScript Primer https://jsprimer.net/cheetsheet/
この本は最強です.
読みましょう. 部室にあります.
JavaScript コードレシピ集 株式会社ICS 池田泰延 https://www.amazon.co.jp/dp/B07N8YVCRQ/ref=cm_sw_r_tw_dp_U_x_ulnHEb1VCZFG
JavaScriptの基礎から勉強することができます.
この本も部室にあります.
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで 山田 祥寛 https://www.amazon.co.jp/dp/B01LYO6C1N/ref=cm_sw_r_tw_dp_U_x_cmnHEb5J4PVH

Webデザイン

デザインは大事です.
良いデザインは開発モチベーションにつながります.
ただ, 開発とデザインと両方できるようになるのはとても難しいですので, 他のサイトを参考にしながら作るのをおすすめします.
僕がいつも参考にしているサイトを紹介しておきます..
bookma!
https://bookma.torch.blue
デザインもガッツリ勉強したい！って人のために勉強できるサイトも紹介しておきます.
chot.design
https://chot.design
cocod
https://cocoda-design.com/top
どちらのサイトもめっちゃ勉強になるので是非使ってみてください.

まとめ

はじめてWebを勉強する人には Vue.js -> Nuxt.js の順で勉強, モバイル開発にも挑戦しようと思っている方は React -> ReactNative の順で勉強するのをおすすめします！
ぼくは React推し です！
ツイート

その他の記事

公開日 2020/04/01

目次

Thanks you for reading.