読者です 読者をやめる 読者になる 読者になる

文字列を置き換えするページ作った&最近のjsについて感じたこと

スマホを使ってる時、文字列を置き換えたい時が時々あるから書いた。

 

リアルタイムに反映されるからその辺のテキストエディタの文字列置換機能よりは高機能だとは思う。

 

使ったのはHTML+CSS(SCSS)+javascript サーバーは一切使ってない単なるクライアントアプリ。

 

今回は俗にモダンWebアプリケーション開発においてよく使われるツールを使って開発してみた。

 

使ったのは、

・npm(node.js)

・gulp

・yo

・bower

 

AngularとかのフロントエンドMVVMを使ってる人にとっては当たり前の技術だとはおもう。

 

が、こんな記事もあるように、フロントエンド技術はの流れはかなり早い。今までかなり早いなと感じていた仮想化技術より何倍も早く感じた。

 

そのため、とりあえず導入しようとしてもまず何から手をつけていっていいのかわからなかった。

 

「node.jsを使う?あれサーバー用javascript処理系じゃないの?」

とか

「gruntとかgulpとかbowerとかyoとか名前は聞いたことあるけど使い方とか何が嬉しいのかわからない」

とか

「SASSとSCSSとLESSって何が違うの? Compassって何?」

っていう状態。

 

そんな中ひたすら手探りで開発していった。

 

とりあえず公開できる状態まで持って行った所で、改めて振り返ったことは、

「これらはすべて効率を上げるためのツールである」

ということ。

 

 

使わなくてもプログラムは書ける


 

 少なくとも上で挙げたツール群はあくまで

「今まで手作業でやっていた作業を効率化」

するためのツールであり、自分のアイデアを読み取って形にしてくれるものではないし、ましてや、0から1を生み出してくれるものでもない。

 

つまり使っても使わなくても同じものはできるのだ。

 

じゃあなんでこんなツール群があるのかというと、上でも書いたとおり、手間を省くためにある。

 

例を挙げると、bowerはコマンドを打ち込むか、bowerfileにあることを記述するだけで、使うライブラリをバージョンも合わせて持ってきてくれる。

 

これが手作業だと、公式ページに行って、ブラウザからダウンロードして・・・・・と言った手順を踏まなければならない。

 

もうひとつyoを例にしよう。

 

yoはアプリの雛形を作ってくれるツールだ。

 

いちいち自分でフォルダ構成を考えてフォルダを作って・・・・などどめんどくさいことをする必要が無い。

 

更に、yoの雛形を作っているのは大体現役バリバリのフロントエンドエンジニアなので、ベター/ベストプラクティスを知るのにも役立つ。どことなくRailsの設定より規約っぽい。

 

2つのツールを例に挙げたが、これらのツールがやってることはすべて手動でもできる。

 

実際に使ってみて


 

使いはじめは、右も左もわからないツール群だったのでとにかく苦痛だった。

 

○○の使い方がわからない→調べる→○○はもう死んだ!これからは××だ!という記事を見つける→××をつかう→更にわからなくなる。

 

というサイクルにも陥った。

 

いつまでも調べてもらちが明かないので、とりあえず使い方が理解できたbowerから使ってみることにした。

 

正直とっても楽だった。今まで公式ページに行ってDLしてという作業がめんどくさかったので、これだけでもだいぶ楽になった。

 

次に使ったのはyo、ただし雛形に大幅に手を加えたので実質使っていないに等しい。

 

次にやっとgulp、俗にタスクランナーというものを初めて使った、が、gulpfileを書いているとある落とし穴にハマった。

 

ツールを使うことが目的化する


 

開発も佳境に入った頃、自分はあるツールの使い方で悩んでいた。

 

そこでふと我に帰りあることに気づいた。

 

「自動化する必要がないことまで自動化するという意味のないことをしている」

 

gulpfileを見てみると、1度しか実行したことがないタスクや、手でやったほうが早いタスクなど様々な物があふれていた。

 

つまり、アプリを書くことではなく、gulpを使うことが目的化していたというわけだ

 

初めてgulpを使って作業を自動化出来た時、なんとも言えない快感を味わい、その時すでに目的と過程が入れ替わってしまったんだろう。

 

どう使っていくか


 

 初めてフロントエンド技術に接する人にとっては見慣れない言葉やよくわからないコマンドばかりで戸惑うだろうとは思う。

 

そこでまずはツールは一切使わずすべて手作業で一度コードを書いてもらいたい。

 

そこで一番めんどくさかった物を自動化するツールから使ってみてはどうだろうか。

 

自分も使っていないツールがある(karmaとかjasmineとか)

 

それでもよくわからないという人はBrowser-syncから使ってみてはどうだろうか。Ctrl+sを押せばブラウザが自動的に更新してくれる、と言うのはなかなかくせになる。

 

 

一段落ついたし次はUNIXコマンドの実装でもしようかな。