Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

フロントエンドエンジニアへのパラダイムシフト

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

やっとlumen by Laravelがちゃんと動く感じに整ってきてここからコーディングに…と思ったら自分の理解が浅かったことを知らされる。新米いずくんぞ先輩プログラマの遠大な設計を知る。

今までPHPでルーティングしてPHPからviewファイルを返すというlumenらしい動きを念頭にイメージを組み立てていた。viewを返す時に値をバインドするのだとばかり。

あに図らんや、先輩プログラマの設計意図は、Vue.js側でルーティングして、apiが必要な時だけlumenを叩いてjsonを受け取るというものだった。なん…だと?

とっさにはイメージが固まらないので、いじってイメージを固めることにする。幸い、先輩プログラマモックアップを送ってくれたので、最低限HTMLをブラウザ経由見ることはできた。

あとはここに値をセットする手法がちょっとピンと来てないが…もう少し弄れば見えてくるかな?

翌日

先輩のメモを解析し直したところ、「JavaScriptのビルド」に関する記述あり。以前は読み飛ばしていたけれど、ここがどうも勘所らしい。先輩に訊けば済むところだけれど、自分の勉強ということもあり、できるところまで進んでみよう……と決める。

あちこちのHTMLファイルを読んだ結果、bundle.jsが欠損していることに気づく。これはどうやらwebpackの出力ファイルらしい。

また、npm buildをした時にそもそもコマンドが認識されないため、node.jsをインストールする必要もありそう。

以下、node.js/npm、webpackに始まり、babel、css-loader、etc……と入れていって、ようやくのこと動いた。

これが噂の「フロントエンド」って地の果てか……。だがまだ先がありそうだ。

さらに追記

package.jsonがあるので、npm installだけ実行すれば、必要なソフトが全部インストールされるのだそうだ。そらそうだよな……。