auです。リモートワークが浸透してきて、もっとデジタル化が進んで近未来を題材にしていた漫画のような世界になるのかなととてもワクワクしています。今回は、大学生が1人で自由に機能を追加できるオンライン会議のOSSを作ってみました。今の私の技術力だと…

auです。Vueのプロジェクトで使っているライブラリの脆弱性があるバージョンの更新と使っていないライブラリの削除を目的としてバージョンを変更したらWebpackのバージョンも変わってしまい、エラーの沼にはまりました。program-shoshinsya.hatenablog.compr…

auです。きのうの記事の続きです。program-shoshinsya.hatenablog.com 解決法 以下の記事を参考にしました。 stackoverflow.comどうやらアップデートしたらwebpackのファイルを書き換えないといけないらしい。でもなんでだろう・・・。webpack.dev.conf.jsを…

auです。npmで使用しているパッケージ以外削除したいなーと思ったので色々やったら進めなくなりました・・・。 環境 macOS Catalina 10.15.5 npm 6.14.5 概要 node_moduleを綺麗にしようと調べてコマンドを打っていたらwebpack4になってしまい、エラーから抜…

auです。Vueを使って開発しています。値の確認のために、alertやconsole.logを多用します。その際に、配列や連想配列をそのまま表示しようとすると、「object Object」と出てしまいます。 alert(this.hoge) 値の中身見れるとすごく楽なんだけどなーと調べて…

auです。今日はあまり時間がないので、簡単にメモを残そうと思います。 配列操作でDOMを更新できるメソッド 配列に対して、直接値を代入しても描画が更新されません。DOMが更新されないと呼ぶみたいですね。更新されるメソッドもいくつか用意されているので…

auです。連想配列を更新する際に少し詰まってしまったので、メモ程度に残しておこうと思います。 連想配列とは 連想配列とは、以下のような形のものです。今回はVueで使う形を想定して書いています。 menu = {id: 0, text: hogehoge} 今回使った形は、以下の…

auです。Vueを使った際に、配列の中身を表示して、どれをクリックしてるのか分からないと実装できないなと言うことで、実装してみました。 環境 vue@2.6.11 npm 6.14.4 実装してみる <ul class="list-group"> <li class="list-group-item" @click="paneItemClick($event, paneItem)" v-for="paneItem in paneItems" :key="paneItem.id" > {{ paneItem.page }} </li> </ul> export default { data ()…

auです。Vueで表示・非表示を変更するオプションで「v-show」があります。これは、TrueとFalseを設定することで利用することができます。 <button @click="changeHidden()">表示切り替え</button> <div v-show="hidden"> <h1>表示中</h1> </div> export default { methods: { changeHidden () { if (this.hidden === true) { this.hidden = …

auです。あれからSplitpanesを触っていて、ボタンを押した際にパネルを追加する動作を実装できたのでメモしておきます。と言っても、公式に答えは書いてあるので日本語版的な認識にしてください。antoniandre.github.io やり方 やり方は、v-forを使って動的…

auです。Vueを使って開発しているときに、値の確認で console.log(変数名) 結構な頻度でconsole.logと打つので、自動保管があってもなんとなくめんどくさいなと思ってました。Qiitaをみていると、ちょうど解決できる記事を見つけたので入れてみました。qiita…

auです。Vue Split Panesを使って、ブロックごとに分けて処理を行いたいと考えています。その際に、sizeというオプションを設定して初期範囲を設定します。こんな感じ <splitpanes style="height: 100vh;" class="default-theme" horizontal @resize="log('resize', $event)" @load="load"> <pane size=70 id="test"> <span><component1 ref="comp1"></component1></span> </pane> <pane> <span>…</span></pane></splitpanes>

auです。Vueで開発をしている際に、枠を可変な状態で作れたらいいなーと思って調べてみました。いい感じのものを見つけたので書いておこうと思います。 Vue Split Panes これは、ブロックを可変で動かすことができるコンポーネントです。antoniandre.github.…

auです。Vue.jsを使って、サイドバーを実装してみました。と言っても、パッケージを使ったので見た目だけですが・・・。使ったパッケージがこちらgithub.comデモを見てもらえれば分かるのですが、UIもUXも高く、使い勝手が良さそうですね。 実際に入れてみる…

auです。Vueを使っているときに、「sass」を使う必要がありました。そのときにsassを有効にする「sass-loader」を導入したのですが、以下のエラーが出ました。 Module build failed: TypeError: this.getResolve is not a function t Object.loader (/Users/…

auです。きのう、Vue.jsの内部の値は変化するけど見た目に変化が表れないという記事を書きました。program-shoshinsya.hatenablog.comこちらが解決したのでメモ程度に書いておきます。 原因 原因としては、「DOMの再描画が起こらない」ということでした。参…

auです。Vue.jsでカウントアップをする文を書いたのですが、うまく表記されませんでした。変数を用意して、中身をalertでみましたが、しっかりとカウントされています。描画されていないようです。コード(該当箇所だけ抜粋) <template> <button class="btn btn-primary" v-on:click="countUp">はい {{ count_number }}</button> </template> <script> expo…

auです。Vueを使ってWebページを作っています。やり始めて1日目なので、作りたいページの大枠から作ろうと、入力フォームとイベントを触りました。その際のエラーがすごい優しく、めんどくさいと思いました。お、教えてくれてありがとうと思う反面、他の言語…