Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考:Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。

で準備を整えたら、必要な設定をしていきます。

コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ

main.js main.jsにてVue Routerをプラグインとして登録します。

App.vue 最後にrouter-viewで読み込んで、Vue Routerが動くようになります。

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 $emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント(App.vue)

子コンポーネント(Checkbox.vue)

$emitを使ってみて 処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。 これは何度も使って慣れるしかないかも

子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。

Vue.jsにQuasar Frameworkを入れてみる

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、

と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。

実行する時のコマンドはvue cliと同じ。

Djangoの開発環境を作る

Djangoの開発環境を作成した時の備忘録。 2020年2月17日にコピペでCentOS7の初期設定、PythonインストールからMySQLサーバーにログインまでできることを確認。 作成する環境 OS : CentOS7 Database : MySQL フレームワーク:Django 言語:Python3.7 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。

次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。

出来上がった、Vagrantfileを開き、以下のような行を追加します。

これで、PCのVagrantfileと同じディレクトリ のworkspaceフォルダと仮想マシーンのdjango_rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。

で仮想マシーンを起動させ

runnningになっていることを確認したら。

仮想環境に接続します。 これで仮想環境の構築までは完了! 基本設定

パスワードを聞かれた場合はvagrantと入力します。 Python環境を整える 今回は、仮想マシーン上でpyenvを使うことにします。

MySQLインストール参考 How to Install MySQL on CentOS 7 MySQL5.7の初期設定はこちら CentOS7にMySQLをインストールした時の備忘録…

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。

そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。

親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。 次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。 ソースコードを実行するとこんな感じ

Vue.jsで快適な開発ライフを送りたい

VS Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。 コード整形 Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。 このコードでは、属性が2つだけなので、何とか読めますが、これが3つ4つと増えてきたら読めた物ではありません。 タグが見切れる前に早く何とかしましょう。 参考にした記事はこちら↓ VSCodeでvueファイルのhtmlを自動フォーマットする方法 必要な情報だけが載っていてノーストレスで解決できました。 設定が終わったら、。.vueのコードを全選択して、Shift + option + Fで整形完了! (WindowsならCtrl + Alt + F) これならソースコードが右側に見切れることはありませんね

Vueコンポーネントの基本

今日は、Vue.js公式の 「Vueコンポーネントの基本」を読んでみました。 コンポーネントの基本 コンポーネントの基本 例えば、下図のTwitterのいいねボタン。 大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。 パッと思いつく感じでも。 カーソルが触れると赤くひかる 押されると、カウントが1増える もう一度押されるとカウントが1減る ハートマークのアイコン マウスオーバーエフェクトが動作する。 などです。 これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。 参考:Atomic Design を 分かったつもりになる ボタンコンポーネントを作ってみる Vueにおいて、コンポーネントを作ることは簡単です。 オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。

data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。 上記のコードでは、button-counterという名前のコンポーネントを作成し、#components-demoにマウントしています。 マウント先のHTMLはこんな感じ。

インスタンス化したコンポーネントは何度でも使い回すことができ、それぞれのコンポーネントは完全に独立しています。 親要素から子要素への値の受け渡し 以下の図のようにするとpropを使ったデータの受け渡しをすることができます。 子コンポーネントに汎用性を持たせるために、具体的なデータを入れたくない場合は、上図のように、コンポーネントを分けると、コンポーネントの使い回しが容易になるかと思います。

最速でVue.jsの学習環境を作る

はじめに  自分はこれまでフロントエンドをほとんど触ったことがありませんでした。どのくらいフロントエンドに触れてなかったかというと、フロントエンドで処理が必要なときは、C#のRazor文ですましてしまったり、もう少し複雑な処理の時は、JQueryを使っていました。  趣味レベルであればこれでも良かったのですが、仕事でVueを使うことになり、3日ほど前から本格的に学習を初めてみました。  ようやっと自分の中で「この学習環境が一番始めやすいんじゃないか」というものができたので、備忘録を残していこうと思います。 jsfiddle jsfiddleはブラウザ上で、HTML・JavaScript・CSSを実装できるサービスです。 リンク:jsfiddle jsfiddleでアカウントを作成することで、インターネット上にソースコードを保存しておくことも可能です。 自分はこの環境でVue.jsのチュートリアルをやりました。 jsfiddleの使い方とかは説明するまでもないかと思うので、使い方とかは、書きません。というか、RunとSaveボタンしか押したことないので、説明とかできません。笑 Vueでfor文、if文  Vueには、色々な機能があるのですが、プログラマー が一番最初に書き方を知りたいのが、この二つかと思います。 ここでは、「Reverse」ボタンを押すと、「Now you see me」という文字が表示されるというプログラムをif文を使って実装しています。 Vueでは、v-ifディレクティブと呼ばれる要素をタグの中に入れることで、if文を実装することができます。 ちなみに、for文はv-forと書きます。 上図のプログラムは、Vueインスタンスの一例です。 赤四角の部分で、Vueインスタンスがマウントする要素を指定します。 青四角部でVueインスタンスのデータを保持し、黄色部分で、メソッドを持つことができます。 公式チュートリアルにて、 算出プロパティとメソッドの比較や 算出プロパティと監視プロパティ など、より理解を深められるような解説があります。 公式:算出プロパティとウォッチャ 今後 他にも、Vueには様々なディレクティブがあったり、イベントハンドラがあったり 効率よく開発するためのデザインパターンとしてAtomic Designであったり、コンポーネント思考などまだまだ学ばなければいけないことはたくさんあります。 この辺りの理解が深まってきたら、また記事を更新していこうと思います。 コピペ用ソースコード html

Vueインスタンス

MS Learnをやってみた(Select a cloud deployment model編)

今回はMS Learnをやってみた感想を書いていきます。 MS Learn : Select a cloud deployment model ↑皆さんもぜひやってみてください。 はじめに 本日は、無料でMicrosoftのサービスについて学べるMS Learnというサービスを試してみました。 今回やるのは「Select a cloud deployment model」という題目です。 このラーニングパスで学べることは The considerations to keep in mind when selecting a cloud service. クラウドサービスを選ぶときの考え方 Terminology associated with adopting a cloud service. クラウドサービスを採用するときの用語 The difference between cloud-only and hybrid migration models and how to choose between them. ハイブリッドモデルとクラウドのみのモデルの違い…