AndroidやiOS・バックエンドなど、プログラミング自体は普通にはできるけど、Webのフロントエンド開発はちょっと…というみなさん!

あなたのような方向けの、もう少し気軽にWebフロントエンド開発をはじめましょうよ、という記事です。

最近のフロントエンドをチラ見してみると

巷ではWebフロントエンド開発はかなり活発に話されていますよね。

こういった記事の中にある単語をかいつまんだだけでも、こんなにたくさん…

  • React
  • Redux
  • Router
  • ES2015
  • Babel
  • webpack
  • Single Page Application
  • JSX

技術要素がものすごいたくさんある(し、傍から見ると雰囲気も殺伐として見えるw)ので、実際に取り組もうとしてもなかなか腰が上がらないかもしれません。

なんとかプロジェクトを見よう見まねで作成し、ビルド環境などを整えてみたりしても、あんまりしっくり来なかったりするのではないでしょうか。

なぜ今のフロントエンド開発は難しいのか

何も知らない状態から入っていて前提を何もわかってない、というのが根本的な原因です。

ここでいう前提とは、各技術がどんな課題をどんな方針で解決しようとしているのか、ということです。

 

これはたとえば、AndroidやiOSで言い換えれば、RxJavaやRxSwiftを一切の事前情報なしに使おうとしていることと同じです。

おそらく、そんなことをしても全くしっくり来ないでしょう。

ではどうしたら良いでしょうか。

初心に帰る

初心者なら初心者らしく、最新のトレンドなどは気にせずに超初歩的なところから始めるのが良いでしょう。

超初歩的、とはビルドや余計なライブラリを使わない素のHTML / CSS / JavaScriptです。

これができないようではどんなにモダンな開発をしようとしても、その本質はなかなかつかめません。

そうはいっても大変なんじゃ…?

おそらく素のHTML / CSS / JavaScriptでまともなプロダクトを作ろうとすると大変です。

DOM操作やブラウザ固有の対応だけでも骨が折れるでしょう。

 

そう思ったらまずは、DOM操作やブラウザ固有の対応がかなり楽になるjQueryだけでも導入してみてください。

「jQueryって今はもう古くて使わないんじゃ??」なんて思わないように。

ここで重要なのは、課題があって、その課題を解決するために適切なプロダクトを使ったという事実です。

 

今どきの数々の技術も、この状況と全く同じで、何らかの課題を解決しようとして生まれたものです。

どのようにモダンな開発に近づいていくか

ある程度、ふつうのWebフロントエンド開発ができるようになったら、いよいよ現代的な開発に目を向けていきましょう。

現代的なReactやSingle Page Application、Babelによるビルドといったところにはどのように辿り着けるでしょうか。

この記事ではそのヒントとして、JavaScriptの歴史をものすごく簡略化したうえで並べ、どんな課題が起き解決が図られてきたのかをまとめて終わりたいと思います。


  1. JavaScript誕生!
  2. JavaScriptに対応したブラウザが増えてきた期
    →ブラウザ対応が大変になってきた!ECMAScriptで標準規格を定義しよう(→【最近】結局ブラウザごとに対応状況違うからビルド対応しちゃえ!Babelだ!)
  3. Ajax躍進!Single Page Applicationの出始め期(Flashを倒し始めた時期)
    →DOM操作やアニメーション、Ajaxの通信周りの処理めんどくさい!→jQuery(やprototype.js)が一挙に解決を担う
  4. 構造化されてないと大規模開発ツラいよね?期
    →Backbone.jsなどのMVCフレームワークが躍進
  5. データとViewって結局ほぼ同じじゃない?もっと楽をしよう期
    →双方向データバインディングが流行。Angular.js、Knockout.js、Vue.jsなどたくさん。
  6. データバインディングのパフォーマンス結構キツいな…もう少しキレイにできないかな?期
    →Virtual DOMやそれをうまく扱うためのfluxアーキテクチャが登場。React.jsやReduxなど。

大切なのは本質を見極めることです。

急に飛び越えずに、きちんと課題を見つめて、着実に一歩ずつ取り組んでいきましょう。

follow us in feedly

↓↓Kindle本を出しました