Edited at

最近のWEBとかフロントエンドについていけない人は一回深呼吸しよう。

More than 1 year has passed since last update.


まえがき

まともにWEB開発していたのは今からもう10年ほど昔の事

入力フォームがあって、DBに対してSelect、Insert、Update、Deleteするだけ

フロントはCSSとJSでちょっとおしゃれにして完成。

そんな時代で脳みそ停止していたので

最近のWEBに触れてもうなにがなんだか

しばらくは浦島太郎気分だけ満喫していました。

しかし、最近、ようやく

なんとか進化の歴史というか、流れというか

最近のフロントエンドを掴みつつあるというところまでやってきました。

まだまだ未熟ですが、なにがなんだかよくわからないよという状態からは抜け出せた気がします。

これはここに至るまでに足掻いた記録です。


選択肢増えすぎ

昔も選択肢はありましたが、明らかにトレンドが偏っていたというか

サーバーサイドはほぼPHPでしたし、FrameworkもCakePHPが多かった。

ASP.NETやJavaで作ることもありましたが、B to CのサービスならほぼPHPだったような気がします。

しかし今はPHPに加えてRuby、Python、Node.jsといろんな開発言語、実行環境が現れ

CakePHP、Laravel、Rails、Sinatra、Django、Expressとそれぞれのフレームワークがいくつも存在する。

一体どれを使えばいいのか、何がトレンドなのか


いろいろ増えすぎ

SASS、LESS、Babel、TypeScript、Grant、Gulp、Webpack、Browsarify、Bower

Docker、SCSS、Babelify、Watcher、Composer、pip、nodist、npm、gem、pipenv、rbenv

React、Vue.js、coffee-scriptなどなどなどなど

最近のWEBについて調べていると

Aについて知りたいのに、それを知るためにはBとCを知らないといけない。

Bを理解するためにはDとE、Cを理解するためにはFと

深い深い情報探索の旅に出かけるパターンが非常に多かった。

そして途中で情報の波に溺れる。


いろいろやりました

とにかく目についたものを片っ端に触ってみました。

PHPもRubyもPythonもNode.jsも

CakePHPもLaravelもRailsもDjangoもとりあえず触る!

環境構築でエラー!エラー!

参考サイト通りにやったのにエラー!

エラー調べてたらまた新しい技術とこんにちわ!

便利なパッケージを入れて使ってみるもエラー!

便利なものが沢山出てきてるのはありがたいものの

進化が早すぎてちょっと古い記事なんかだと

もう仕様変わったりしててうまくいかない!

名前は違うけどなんか似てるものが多い!

SASS?LESS?SCSS?

Babel?coffee-script?TypeScript?

同じもの?違うもの?似て非なるもの?

MacとWindowsどちらも使うけど

Macではうまく動いたのにWindowsだとうまく動かない!

動かざること山のごとし!

もう脳内はめちゃくちゃという感じです。

情報を整理するために調査するとまた新たな技術の扉を開けてしまう。


一回深呼吸する

とりあえずこのままだといつまでたっても収集がつかないと思い

一回深呼吸しました。

WEBの進化がすごかったのであれこれ手をだしすぎた。

まずやりたい事に集中しようと心を落ち着けました。


やりたいこと

特にやりたかったのはブラウザで使うJSライブラリの開発です。

まずはそれなりの規模でも開発しやすい環境を作りたい。


とりあえずNode.js

まずはJavaScriptの実行環境であるNode.jsをシンプルに理解していこう。

そう思いNode.jsで簡単なプログラムを書いて動かしたり

とにかく基本から攻めていきました。

Node.jsではrequire()で外部ファイルを読み込める。

これ、非常にやりたかった。

しかしrequire()はブラウザでは動かないようだ。

どうにかして動かせないものか。。。

調べてみるとbrowsarifyというパッケージを使うと

require()がブラウザでも使えるようにコードを変換してくれる事がわかった

なるほど、browsarifyはそういうものだったのか。

JavaScriptでもクラスベースで開発したいな

将来的にはJavaScriptでクラスも使えるみたいだけど

ブラウザはまだ完全にサポートしてくれるわけじゃないみたいだし。。

調べてみるとBabelというパッケージがあった。

これは新しい言語仕様で書いたJavaScriptを現在主流のES5に変換してくれるようだ。

これは便利だ。

あれ、BabelとBrowsarifyはどうやって連携すればいいんだ?

調べていくと

Babelifyというパッケージを使えばBrowsarifyとBabelをいい感じに組み合わせられる事がわかった。

こうして1つずつやっていくと

どんなパッケージが何のためにあるのかを理解しやすく

今まで調べてよくわからないままになっていた情報が

頭の中で繋がっていき、ぼんやりとだが全体の雰囲気が見えるようになってきた。


千里の道も一歩から

ブラウザの進化の凄さを早く味わいたいとゴールを急ぎすぎていたと思う。

今からフロントエンドに手を出すなら

まずはここ数年のWEBの進化の流れを調べてみるといいかもしれない。

特にどのタイミングで何が登場したのかという時系列を知るのは有益だと思う。

例えばSASS(SCSS)とLESSというほぼ同じようなものがある。

これはどちらもCSSをもっとスマートに書けるようにした新たなScript言語だが

Wikiによると


Sassは、ハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。


とあり


LESSは、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。


とある。

1.最初にSASSが登場

2.SASSに触発されLESSが登場

3.LESSに触発されSCSS記法が誕生

というような流れが見えてくる。

ここ最近は進化が早いうえに、このように触発されて似たようなもの

ただしそれぞれに利便性があったり、使いどころがあるといったものが大量にある。

何を選択すればいいかというのは歴史を振り返る事で見えてくる事も多いだろう。


おわりに

WEBは紆余曲折をへて、すさまじいスピードで進化している。

今はその過度期なのかもしれない。

やや落ち着いてきた傾向があるようにも感じる。

さらにもう少しすると

このカオスな現状も整理されてくるのではないかと思う。

またひさびさにWEBに舞い戻り

とてつもない進化に翻弄されたことで

改めて基礎の大切さ、1つ1つ丁寧に学ぶ事の大切さを感じた。

「初心忘るべからず」