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