はじめに 9月7日（水）に開催されていたNuxt.js道場なるものに参加させていただきました。 M&Aクラウド様主催でやられているイベントになります。 内容としては、開発方法や知見の共有の場という印象でした。 今回は第二回目とのことで4名の方が登壇し、自社の開発体験談を発表していました。 この記事では筆者なりの視点で執筆させていただきます。 筆者のレベル感 今話題の駆け出しエンジニアです。笑 2021年4月から自社開発企業で修行中で、主にフロントエンドエンジニアとして日々励んでおります。 上記の入社時期から分かる通り半年もエンジニア経験のないペーペーです。 参加させてもらった経緯として、2つあります。 1つは、弊社でもVue.jsを利用した開発を行っている点。 もう1つは、個人的な興味です。 ちょうど自分のポートフォリオをNuxt.jsで作り変えたところだったのでタイムリーだなと思い参加させていただきました。 【宣伝】 アウトプットの内容 初めに登壇されていたM&Aクラウドの津崎様の内容を今回記事にします。 LaravelからNuxt.jsへ もともとあった既存のLaravel製アプリケーションのフロント部分をNuxt.jsに移行中とのことで、 そこでの選定基準やメリットをメインに紹介してくれていました。 Nuxt.jsを選んだ理由 ・SSR(サーバサイドレンダリング)への移行がしたい ・Vue.jsに馴染みのあるエンジニアが多かった ・コンポーネントの利便性 Nuxt.js CompositionAPIって何？ Nuxt.jsとは vue.jsのフレームワークで、インストールされたタイミングでStoreやルーティング機能が備わっているものです。 SSRとユニバーサルモードができることが特徴です。 SSR（サーバーサイドレンダリング）とは、 サーバ側でHTMLを生成するWebアプリケーションで対義語としてCSR（クライアントサイドレンダリング）があります。 CSRは通常のVue.jsやReactに当たります。（SPAとも言われたりします） ユニバーサルモードとは、 SSRした際に、クライアント側で追加のレンダリングなどを行う方式で、それを行うことで動的なサイトを作ることを可能としています。 結果、高速でリッチなアプリケーションの実現が可能になります。 CompositionAPIとは 簡単に言うと、Vue.jsの記法です。 2020年9月にVue3に導入されました。 標準の書き方はoptionAPIといいます。（compositionAPI optionAPIどちらでもVue.jsは動きます） 大規模で複雑なコンポーネントを作る際に便利です。 中小規模であれば、optionAPIをおすすめします。 メリット・デメリット メリット Nuxt.jsについて ・webアプリケーション開発に必要なものが揃っている ・SSR、SSG（静的サイトジェネレーション）が可能 CompositionAPIについて ・関心事に処理をまとめて書くことができる ・大規模な開発にも耐えられる構成にできる デメリット フロントエンドエンジニア初心者にとっては複雑になってしまう。 ＠vue/compositionAPIではVuexを使わないとSSRとSSGで値の共有化（ハイドレーション）ができない。 Nuxt.jsはコードが多くなるとビルド時間がかかってしまう。 最後に いかがだったでしょうか。 初心者の僕にとってはとても勉強になったので、第３弾をやるなら是非参加させていただきたいです。 当時の資料も共有していただいていますので、リンク貼り付けておきます。 ありがとうございました。
こちらにまとめてみました。 Ver7以降を対象にしてあります。
実行環境 macOS 10.15.7 (19H1217) Vue.js 2.6.14 Vue Router 3.5.2 前提 以下のようにuserの詳細ページについてのルーティングを行っているとします。 App.vue ... <router-view /> ... router.js const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 問題点 例えば，/user/1から/user/2へURLが遷移した場合，どちらのURLでもUserコンポーネントが表示されます。 しかし，遷移前後のコンポーネントが同じ場合，そのコンポーネントはrerenderされません。 この例の場合は，Userコンポーネントは/user/2へ遷移した時にはrerenderされないということです。 解決策 前述の問題点を解消するためには，次のようにします。 App.vue ... <router-view :key="$route.fullPath" /> ... Vue.jsでは，keyの値が変わる度にその要素はrenderされる仕様になっています。 参考文献
Vue.jsでの実務が多くなってきて、ビュー側が変更されない問題が多すぎたので、解消方法一旦まとめました。 公式ドキュメントにもVue２で検知されない変更のパターンはまとめられています 参考リンク → Vue 2 での変更検出の注意事項 オブジェクトの場合 公式ドキュメント Vue では、すでに作成されたインスタンスに対して新しいルートレベルのリアクティブなプロパティを動的に追加することはできません。 data: { user: { name: "taro", age: 52, }, }, methods: { changeAge: function(age){ this.user.age = age; // これだと検知されない }, } 解決方法 Vue.set使う Vue.setを使用するとネストされたプロパティに対して、リアクティブな変更が可能になる methods: { changeAge: function(age){ this.$set(this.user, 'age', age); }, } Object.assign()でオブジェクトごとマージしてしまう MDN Web Docs Object.assign() メソッドは、すべての列挙可能な自身のプロパティの値を、 1 つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。変更されたコピー先オブジェクトを返します。 methods: { changeAge: function(age){ const newUser = {...this.user}; newUser.age = age; this.user = Object.assign({}, this.user, newUser); }, } 配列の場合 公式ドキュメント Vue は、配列における次の変更は検知できません: 1. インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue 2. 配列の長さを変更する場合、例えば vm.items.length = newLength data: { numbers: [1, 2, 3, 4, 5], }, methods: { changeNumbers: function(number, index){ this.numbers[index] = number; // これだと検知されない }, } 解決方法 要素を追加する場合 オブジェクトに関しては、Vue.setで変更しましたが、追加する要素を追加する場合は通常通り、pushで良いらしいです 破壊的メソッド↓であれば、Vueが監視してくれます sort() splice() push() shift() unshift() reverse() methods: { changeNumbers: function(number){ this.numbers.push(number); }, } 要素の値を置き換える場合 splice使って置き換えてあげるとリアクティブな変更になります。 splice(変更したいindex, 変更する要素数, 変更後の要素)； methods: { changeNumbers: function(number){ this.numbers.splice(index, 1, number); }, } まとめ オブジェクト・配列のリアクティブな変更の加え方をまとめてみました この辺の問題もVue3では解決されているらしいので、あまり需要な情報だったかもしれないですね、、
参考 エラー内容 EACCESのpermission deniedエラーが出ました。 FATAL EACCES: permission denied, mkdir '/home/xx/Documents/xxx-toC/frontend/node_modules/.cache/nuxt' ╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││ ││ Error: EACCES: permission denied, mkdir ││ '/home/xx/Documents/xxx-toC/frontend/node_modules/.cache/nuxt' ││ │╰──────────────────────────────────────────────────────────────────────────────╯ error Command failed with exit code 1. 対処法 node modules のcacheへの権限がなさそうなので、そこに権限を与えました。 sudo chmod 777 node_modules/.cache/
はじめに こんにちは。 JavaScriptのフレームワークVue.jsについてアウトプットしていきます！ Vue.jsとは Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。 様々な機能が用意されているため、操作を覚えると扱いやすく少ない記述で実装が可能です。 参照：https://coosy.co.jp/blog/vuejs-benefit/ フレームワークとは フレームワークは全体の流れがもともと実装されている「型」のようなもので、その中で実装したい部分のコードを記述して開発していく。VueやReact、Angularなどがある。 Vue.jsを使用するメリット JavaScriptのライブラリにjQueryというものがありますが、Vue.jsとの違いとして、 Vue.jsの方が、簡潔にコードを記述できる SPA（シングルページアプリケーション）開発ができる シンプルに設計されているため、拡張性が高い などが挙げられます。 Vue.jsのコード index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html> main.js var app = new Vue({ el: '#app', data: { message: 'Hello World' } }) Vue.jsの基本的な構文になります。 bodyタグ内で、HTMLでVueとJSファイルを読み込みと、divタグにIDappを指定。 {{ message }}に'Hello World'が置換されて出力される。 最後に ここまでVue.jsについてまとめました。 これからVueについての理解を深めるためにアウトプットしていきます！ 誤った認識があればご指定いただけると嬉しいです^ ^
はじめに 今回初めて個人開発で作ったサービスを公開します。今までも何回かトライしていたのですが、なかなか公開までに至らないうちに、なにか問題にぶちあたったり、時間がかかりすぎて情熱が冷めてしまったりしていたので、今回はまずはスモールスタートで公開して改善していくことを心がけました。大体今回の公開まで、開発を始めてから1ヶ月程度になります。毎日朝4時半に起きて、子どもたちが起きる7時過ぎまでを開発時間として取り組んできました。 どんな人向け？ 自分で作っているサービスの開発ロードマップをユーザーに公開するために、都度ブログを書いたりするのも大変ですよね。もし、自分のサービスのソースコードをGithubで管理していたとして、Github Issuesを見せるとしてもGithubに馴染みのない人にとっては読みにくいですし、外に出すサービスであればあるほど、Githubのレポジトリは非公開になっていると思います。これをなんとかできないかなと思いました。 どんなサービス？ まずはこちらを見てください。 https://2go.plus/nice2h/2go/roadmap このようにGithubのレポジトリ内のIssueをMilestone区切りにして、Githubに馴染みのない人にも見やすいロードマップサイトを公開するサービスです。もちろん、非公開のレポジトリを公開設定にすることなく、ロードマップだけを外部公開することができます。 Githubアカウントでログインすると、以下の設定画面になります。レポジトリを選択して、どのMilestoneを共有するかをチェックして保存します。すると、自動的にロードマップサイトのURLが生成されるので、こちらにアクセスすれば常に最新のロードマップを見ることができます。このURLをシェアすれば、多くの人にあなたのサービスのロードマップを簡単にキレイに公開できるわけです。 Milestoneを今まで使っていな方は、Milestoneを作成して、Issueを割り当てればロードマップを整理することができます。また、Labelを活用している方もいらっしゃると思いますので、Milestoneの中のLabelでIssueをフィルタすることもできます。これらを駆使することで、Bugは見せずにenhancementだけ表示するなどのことも可能です。 今後の予定としては、今はMilestone基点で表示しているところを、Labelベースで表示できるようにもしたいと思っています。その他は、まさに上記のURLを参考にしていただければ、いつも最新です。 どんな技術を使ってる? 企業での開発経験はないので、全て自己流です。書籍やWebサイトを中心に勉強して開発しながら学んできました。念の為、利用している技術は以下のとおりです。 - Laravel : APIとBlade（SSRはやってみたことあり） - Vue3 : フロントエンド（今回初挑戦） - Tailwindcss : デザイン（Bootstrapからの脱却） - Docker : これらの開発環境と、本番でもDocker利用（いずれ分割予定） - Cloud : Conoha VPS(インフラに時間を掛けたくなかった) 気になっていること（随時追加予定） 開発環境はLaravel sailを使いましたが、本番は自前でdocker-compose.ymlを使いました。このあたりのコンテナの構成をどのようにしているか気になりました（本番でもsail使う？） 本番環境にコードをpullしてからnpm run prodしてbuildが終わるまでにラグがあり、この間は使えない機能が出てしまったりするが、このあたりをみなさんはどのように工夫しているか？ DBについては、どこまでレコードを暗号化するか。検索機能などとのトレードオフになると思われるが。。 # 今後は？ 現在alphaフェーズですが、alphaとしてもう1段階リリースの予定があります。多くの人に使っていただき、Feedbackをいただきながら改善して、開発経験を増していきたいと思います。また、今回の個人開発は最初から海外も同様の問題を抱えていると思ったので、最初から英語圏も視野に入っており、今の所すべてのUIは英語にしています。以下の英語Twitterアカウントも作成して、情報発信していこうと思っています。 もちろん、日本語のTwitterは私の今まで通りのアカウントを利用していく予定です。 https://twitter.com/jnakajima1982 ぜひGithubアカウントでログインして試していただき、ご感想・ご指摘をいただければと思います！
