Pythonのバージョン管理は何かと大変なので、仮想マシーン上で環境を管理してしまうのが一番手っ取り早いかつ一番安全だと思ったため。仮想環境を管理するためのツールです。Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。Python環境は、Ubuntu仮想環境の上に構築します。Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。出来上がった、Vagrantfileを開き、以下のような行を追加します。この辺りは各自のセンスで命名しましょう。これで準備は全て整ったので、仮想マシーンを起動させていきます。runnningになっていることを確認したら。仮想環境に接続します。今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。子コンポーネント側に、PostTitleという名前のプロパティがあったとします。そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。v-bindは省略記法を使っています。Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。このコードでは、属性が2つだけなので、何とか読めますが、これが3つ4つと増えてきたら読めた物ではありません。タグが見切れる前に早く何とかしましょう。必要な情報だけが載っていてノーストレスで解決できました。「Vueコンポーネントの基本」を読んでみました。下図のTwitterのいいねボタン。大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。マウスオーバーエフェクトが動作する。これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。Vueにおいて、コンポーネントを作ることは簡単です。オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。上記のコードでは、button-counter`という名前のコンポーネントを作成し、`#components-demoにマウントしています。マウント先のHTMLはこんな感じ。自分はこれまでフロントエンドをほとんど触ったことがありませんでした。どのくらいフロントエンドに触れてなかったかというと、フロントエンドで処理が必要なときは、C#のRazor文ですましてしまったり、もう少し複雑な処理の時は、JQueryを使っていました。趣味レベルであればこれでも良かったのですが、仕事でVueを使うことになり、3日ほど前から本格的に学習を初めてみました。自分の中で「この学習環境が一番始めやすいんじゃないか」というものができたので、備忘録を残していこうと思います。jsfiddleはブラウザ上で、HTML・JavaScript・CSSを実装できるサービスです。jsfiddleでアカウントを作成することで、インターネット上にソースコードを保存しておくことも可能です。自分はこの環境でVue.jsのチュートリアルをやりました。jsfiddleの使い方とかは説明するまでもないかと思うので、使い方とかは、書きません。いうか、RunとSaveボタンしか押したことないので、説明とかできません。最初に書き方を知りたいのが、この二つかと思います。me」という文字が表示されるというプログラムをif文を使って実装しています。Vueでは、v-ifディレクティブと呼ばれる要素をタグの中に入れることで、if文を実装することができます。ちなみに、for文はv-forと書きます。上図のプログラムは、Vueインスタンスの一例です。赤四角の部分で、Vueインスタンスがマウントする要素を指定します。青四角部でVueインスタンスのデータを保持し、黄色部分で、メソッドを持つことができます。理解を深められるような解説があります。Designであったり、コンポーネント思考などまだまだ学ばなければいけないことはたくさんあります。この辺りの理解が深まってきたら、また記事を更新していこうと思います。Learnをやってみた感想を書いていきます。↑皆さんもぜひやってみてください。Learnというサービスを試してみました。model」という題目です。プロジェクトを新規作成し、GUIでビルドすると、起動するはずのブラウザが起動しなかった。.csprojファイルをいじったりと無駄な努力をしてみたが、結局解決せず。コマンドでビルドを行い、ログから開いているポート番号を確認した。アクセスし、アプリが起動していることを確認できた。いうことで、今回はnode.jsを通してみました。imageをCIでプッシュする必要があったのですが、コンテナって何?って状態だったので、今回は実体のあるアプリケーションで、CI/CDを試してみました。AzureのGUIは本当によくできていて、複雑なことをしようとしなければ、ほぼ直感で操作が出来るとチュートリアルをやりながら実感しました。いえ、Azureを触る機会がない人に取っては、認知負荷がかなり大きいかと思うので、この記事を流し読みしてから、MSのチュートリアルをやってみるのもいいかもしれません。それでは、やっていきます。プログラムをローカルに持ってくる。サンプルコードは、上記のリポジトリにあるので、取ってきましょう。例にならって、DevOpsにリポジトリをプッシュしておきます。Gitにリポジトリが作成されたら作業開始です。Pipelinesというツールがあるのですが、これを使ってみます。YAMLのテンプレート(種類が色々ありますが、それっぽいので大丈夫です。あとでいくらでも書き換えられます。最後に自動生成されたYAMLファイルをチェックして保存→実行しましょう。Pipelineに焦点を当てて記事を書いていきたいと思います。JupyterLab環境を構築してみた。JupyterLab環境をAzure上に用意して、どこからでもデータ分析できるようにしたら面白そうだなと思い、コンテナにJuyterLabを入れる検証を行いました。Dockerfileとdocker-compose.ymlを用意します。