横須賀第283管区情報局

Vue.jsに入門して約1ヶ月。ようやく技術ブログが表に出せるレベルになったので、初めての投稿をしていきたいと思います。

たった1ヶ月ですが無限にWebフロント開発の知見が貯まったので、しばらくはこのブログの開発で得た知見を何回かに分けて公開していこうと思います。

#このブログの構成

#フロントエンド

このブログは、Vue.js + vue-routerを使ったシンプルなSPAとして構築しています。

また、各モジュールのコンパイルはWebpackを使用しています。

#バックエンド

SPAで大きな問題となるSEO対策には、Server-Side Rendering(vue-server-renderer)を採用しました。Google Cloud Functionsでexpressサーバーを実行し、生成されたHTMLを返す形です。各種assetsはFirebase Hostingで配信しています。

#Vue.js選定の理由

単純です。業務でReact + Reduxを既にガッツリ触っていたため、新しいフレームワークを触ってみたかった、それだけです😇

#Vue.jsで良かった点

ということで初めてVue.jsを触った訳ですが、DXは相当良かったように思います。以下、感想を挙げると

• HTML・CSS・Javascriptが1ファイルにまとまる→とても見やすい
• タグでマークアップとスクリプトがきっちり分かれるため、ロジックがビューから分離した状態を保ちやすい
  • 「HTML中に複雑なJavascriptコードが混入して疲弊する」ことが起こりにくい
• スタンダードなWebpackの設定でES6やSassに難なく対応できる

要は小規模アプリでのテンプレート構文最高！！！という話です。Reactと比べると、小規模プロジェクトでのロジックの破綻は明らかに発生しづらくなっている肌感覚がありました。

それから余談。今回初めてフレームワークに一切頼らず、フルスクラッチでCSSを書いたのですが、かなり思い通りにスタイルを編集できたのでとてもストレスフリーでした。外部の影響のない、生のCSSに長い時間触れる経験はすごく大事だと、切に感じます。

#つらかった点

Vue.js、というよりSPAを1から作ってリリースまでやってみると、なかなか苦労が多くてきつかったです(´・ω・｀)

• node + ES6を使えるようにする段階で地味にハマる
  • 非推奨の@babel/polyfillを使わせる解説が割と多い
• Webpackがわからない
  • とりあえずproductionモードでビルドしても、バンドルサイズ500KBくらいになって白目
  • 設定項目もプラグインも多すぎる上に、新旧の情報がネットの海に氾濫しておりつらい😇
• SPAでSEO対策しっかりやるの大変
  • Pre-rendering🤔 Server-Side Rendering🤔 調べてもピンとこない
  • vue-server-rendererをhot-module-reloadingに対応させようとするとなかなか大変
• Cloud Functions + vue-server-renderer構成の情報が意外と少ない気がした

この辺りのつらみと解決に至った知見は、今後順を追って記事化していきます。

#まとめ

SPAの開発、およびリリースの経験を一通り積んでみましたが、普段の自分が如何に先輩のフロントエンドエンジニアにおんぶにだっこ状態だったかを改めて実感しました。開発中つらかった箇所は、Nuxt.jsを始めとするフレームワークを使った場合にどれだけ楽になれるのか、この先時間を作って体験してみたい気持ちが強い今日この頃です。

リリースして1記事もない状態は流石にかなしいので、バーっと最初の記事を書きました。最近まとまった文章を書かない + 読まないなので、昔と比べると文章アウトプットが結構しんどい😇 じっくりリハビリしていきます💪