プログラミング Visual Studio Codeでディレクトリ構造を表示する
よくブログで見かけるツリー構造を自動的に表示させるコマンドをご紹介します。今まで、手で書くとばかり思っていたので、超便利です！ パス直下のディレクトリ（フォルダ）構造を表示する tree PS C:\Users> tree ファイル名も表示...
プログラミング 
JavaScript 【Vue.js】トランジション効果を持ったアニメーションを実装する
<transition> <transition>は、ひとつの要素しか入れる事ができない。 切り替えを書き込む時は、v-ifを用いること。v-showは、display:none;で画面上非表示になっているだけなので、ソースから完全に消える...
JavaScript 【Vue.js】フィルター（filter）とミックスイン（mixin）
フィルター（filter）でテキストをフォーマットする コンポーネント上で、表示したいdataを作成。 mainで、フォーマット形式を定義。第１引数には、フォーマット名、第２引数には関数をかく。 Vue.filter("lowerCase"...
JavaScript 【Vue.js】カスタムディレクティブを使う
ディレクティブとは、v-から始まるVueが提供しているパーツの事です。Vueが提供しているディレクティブについてはこちら↓ Vueが提供してくれているもの以外でも、自分でv-を作成することができます。主に、抽象化したコードを再利用したい時に...
JavaScript 【Vue.js】v-modelでフォーム要素をコントロールする
v-modelの使い方 v-から始まるディレクティブについて書いた記事はこちら↓ 改めて、inputタグとv-modelでデータバインディングをする方法を記載。 lazy修飾子 v-modelに.lazy修飾子をつけることによって、inpu...
JavaScript 【Vue.js】動的コンポーネント
動的にコンポーネントを切り替える方法 componentタグとv-bind:is を使って切り替えを実装する 切り替えを行いたいコンポーネントをインポートしてcomponentsで定義させる。 今回はボタンを設けて、それぞれのボタンが押され...
JavaScript 【Vue.js】slotを使ったコンポーネント間のデータ受け渡し
いままでのコンポーネントについての記事はこちら↓ htmlタグを含めて子にデータを送る時 親テンプレート上で、子コンポーネントのタグ内に送りたいHTMLを記載する。{{}}も使用可能。 子テンプレート上では、受け取りたい箇所に<slot>を...
JavaScript 【Vue.js】console.logでUnexpected console statementが出たときの対処法
console.logを入力するとエラーが起こる時の対処法。このエラーは、ESLintという構文検証ツールが表示させている。 エラーを非表示にするには、console.logの上部に「 eslint-disable-next-line no...
プログラミング勉強法 【独学】わたしが実践したプログラミング学習教材
プログラミングをいざ勉強しよう！と思っても独学だとどこから手をつければいいかなかなか分からないと思います。プログラミングの独学については様々なサイトがありますが、今回は私が実際に使用したサイトと勉強法をお伝えします。 自分の学びたい方向性を...
JavaScript 【Vue.js】コンポーネント間でのデータ受け渡し
親から子へデータを受け渡す 子コンポーネント上でpropsを使って、親から子へ受け渡しをしたい値の変数名を定義していく。propsはプロパティの略。配列かオブジェクトで記載していく。 propsは「,」カンマで区切る事で、複数作ることが可能...