みなさん、こんにちは。
半年以上待ち続けた 3D プリンタが届いたので、最近の週末は 3DCAD ソフトばかり触ってるおっくんです。
今回は、Software Design 2020 年 9 月 号の感想を共有していきたいと思います。
虎の穴ラボでは、福利厚生として技術書の購入補助があります。
中島凛さん(@FruitRiin)が書かれた、今号の企画「あなたはどこから学ぶ[ステップアップ式]Vue.js 講座 JavaScript フレームワークの潮流がわかる」に興味があり、制度を利用して入手しました。
書籍情報
| 書名 | Software Design 2020年9月号 |
|---|---|
| 電子版発行日 | 2020 年 8 月18 日 初版 第1刷発行 |
| 発行所 | 株式会社技術評論社 |
| ISBN | 978-4-297-11284-4 |
| 紹介ページ | https://gihyo.jp/magazine/SD/archive/2020/202009 |
興味があった企画 「あなたはどこから学ぶ[ステップアップ式]Vue.js 講座 JavaScript フレームワークの潮流がわかる」
構成
以下の 4 つの Step と Appendix で構成されています。
- Setp1 Vue.js を知りたい人で リアクティブなデータバインディングを体験
- Step2 とにかく作ってみたい人へ コンポーネント化とページ遷移の基礎を学び SPA を作る
- Step3 本格的な Web サイトを作る人へ コンポーネント分割で起きる問題への対処
- Step4 大規模開発で導入する人へ コンポーネント設計のアイデア
- Appendix Vue.js を中心としたフレームワーク 「Nuxt.js」を導入するポイントとメリット
「自分の知識や、興味に合わせてお好きな Step(章)から開いてみてください」とありますので、お好きなところから読み進めれば良いと思います。
私は、前提知識の欠けもあるだろうと思ったので、後半を読むために、Step1 から読み始めました。
Setp1 Vue.js を知りたい人で リアクティブなデータバインディングを体験
データバインディングの体験の前提として、Vue.js・React・Angular の特徴を jQuery や生の JavaScript での操作と比較しながら、解説が入ります。
続けて、v-if などの基本的な構文を参照しながら、見ていきます。
この部分については、公式のガイドも参照しながら読み進めるとより理解が深まりそうです。
Step2 とにかく作ってみたい人へ コンポーネント化とページ遷移の基礎を学び SPA を作る
この Step より、CodePen によるオンラインエディタの環境から、Vue CLlを用いた開発環境を導入します。
プライベートでも Vue CLI から、アプリケーションの雛形を作り実装をしています。
ホットリロードが無い環境には戻れないというのには、うなずくばかりです。
Step のタイトルにもあるコンポーネント化については、コンポーネントの分割に重点を置いて丁寧な解説があるので、普段別のフレームワークを扱う方も参考なると思います。 コンポーネント間のデータのやり取りも、度々確認してしまう自分としてはちゃんと見直せてよかったです。
この Step の最後は Vue Router の導入解説となるので、Vue.js で SPA の作成を目指す方は頑張って読み進めましょう。
Step3 本格的な Web サイトを作る人へ コンポーネント分割で起きる問題への対処
主に、データストアの解説になります。
当たり前に、「VueX を導入して対応」ではなく、ライブラリを使わない方法の説明から入ります。
実は自分にはこの点が一番学びのあった内容だったと感じています。
ライブラリを使わない方法に認識のなかったのはもちろん、普段調べると「Vuexの導入する」という結論にたどりついていました。
ただ、「親子関係のないコンポーネント間でデータの共有をしたいけど、Vuexを導入しないといけないほど複雑なことはしない」ぐらいの規模感でのアプリを作るときの方向性を得られました。
(いままでの調べ方が悪いと言われればそれまでではありますが...)
続けて、ライブラリを使わない方法の問題点、解決策として Vuex の導入に続きます。
前段で、ライブラリを使わない方法をしっかりと理解してこそ、良い点が見えてくると感じました。
Step4 大規模開発で導入する人へ コンポーネント設計のアイデア
大規模開発の中でも、複数人で開発をするに当たって悩むポイントや設計について、著者なりのまさしくアイデアの Step でした。
特にコンポーネント設計について、「コンポーネント設計のベストプラクティスは模索され続けており、プロジェクトによって最適解が異なります。一方で、体系化されたベストプラクティスはバリエーションがあまり多くないように思います 」という前提に立ち、複数のコンポーネント設計方法を俯瞰して眺められる構成になっているので、こちらを入り口に、詳細も調べてみるとより良いと感じます。
Atomic Design については、「採用した場合のありがちな悩みどころ」など詳細な説明があるので、それぞれの読者の「今立ち向かっているプロジェクトには向いているだろうか？」ということを思い浮かべながら読むと、考えを深めることができそうです。
Appendix Vue.js を中心としたフレームワーク 「Nuxt.js」を導入するポイントとメリット
主だっては、Nuxt.js の「良いところ」「導入することで解決できること」を紹介し、最後に「導入すべきか？」という問いに筆者なりの意見が述べられています。
私自身は、Nuxt.js に触れる機会を今のところ持てていないです。
この Step については、将来機会があったとき選択をする際の押さえるべきポイントを確認できたと考えています。
まとめ
Vue.jsの基礎的な内容から大規模な開発に向けた発展的な内容まで、解説されていますので「これからVue.jsにチャレンジする人」「もう一歩進んでみたい人」には、おすすめの記事だと思います。 また、周囲にVue.jsの導入を勧めたい人もこちらを使って紹介すると良いかもしれません。
今回は、第1特集の Vue.js の記事を目当てに購入をしたわけですが、他の記事も全部読んでいます。Markdownなどのプレーンテキストから、Wordなどのドキュメント形式に変換する変換ツールの「pandoc」 に触ってみるきっかけになりました。
普段、調べ物をしたりそのきっかけとするのは、どうしても知っていることを起点にすることが多いように感じます。
そういう意味で、思ってもいない方向からのボールを受け取る機会を得るのに「専門雑誌って偉大だな。」と思ったので定期的な購読をしていきたいと思いました。
P.S.
虎の穴ラボ主催LT会開催！
虎の穴ラボ主催のオンラインLTイベントを 9/30（水）19:30〜 開催します！ 今回もフリーテーマとなっており、ITに関連する内容であれば、何でも大歓迎ですので、初心者の方も練習の場としてお気軽にご参加ください！ connpassにて参加受付中です！
カジュアル面談
弊社エンジニアと1on1で話せます、カジュアル面談も現在受付中です！こちらも是非ご検討ください。 yumenosora.connpass.com
その他採用情
虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。
カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。
カジュアル面談や採用情報はこちらをご確認ください。
yumenosora.co.jp
