Djangoの開発環境を作る

Vagrantにたどり着いた理由 Pythonのバージョン管理は何かと大変なので、仮想マシーン上で環境を管理してしまうのが一番手っ取り早いかつ一番安全だと思ったため。 2系、3系両方入ってると何が何だか分からなくなるしね 笑 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。 >>> vagrant box list centos/7 (virtualbox, 1905.1) 次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。 vagrant init <マシーン名> 出来上がった、Vagrantfileを開き、以下のような行を追加します。 config.vm.synced_folder "./workspace", "/home/vagrant/django_rest_framework" これで、PCのVagrantfileと同じディレクトリ のworkspace`フォルダと仮想マシーンの`django_rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。 # ファイル共有のためのプラグイン vagrant plugin install vagrant-vbguest # 起動 vagrant up で仮想マシーンを起動させ vagrant status runnningになっていることを確認したら。 vagrant ssh 仮想環境に接続します。 これで仮想環境の構築までは完了! 基本設定 #…

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

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。 <template> <div> <ul> <li v-for="(PostTitle, index) in PostTitles" :key="index" >{{ PostTitle }}</li> </ul> </div> </template> <script> export default { props: { // ここでプロパティの型を配列に指定 PostTitles: { Array, default: () => (["C", "C#", "Java"]) } // https://qiita.com/hogesuke_1/items/c74463de1a1eee802ca8 // factory関数にしないとWarning発生 } }; </script> そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。 <template> <div id="app"> <!– データの渡し口…

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において、コンポーネントを作ることは簡単です。 オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) new Vue({el: '#components-demo'}) data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。 上記のコードでは、button-counter`という名前のコンポーネントを作成し、`#components-demoにマウントしています。 マウント先のHTMLはこんな感じ。 <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>…

最速で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 <div id="app-3"> <span v-if="seen">Now you see me</span> <button v-on:click="convert"> Reverse </button> </div> Vueインスタンス var app3 = new Vue({ el: '#app-3', data:…

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. ハイブリッドモデルとクラウドのみのモデルの違い…

.NET Core 3.0 MVCで作成したプロジェクトをビルドした時に、ブラウザが起動しない

状況 Visual Studio for MAC バージョン8.3 .NET Core3.0 MVC (プロジェクトの作成直後) 2019年11月28日時点 ふと、C#でプログラムを書いてみたくなり、.NET Core 3.0 プロジェクトを新規作成し、GUIでビルドすると、起動するはずのブラウザが起動しなかった。 .csprojファイルをいじったりと無駄な努力をしてみたが、結局解決せず。 dotnet コマンドでビルドを行い、ログから開いているポート番号を確認した。 localhost:5000 にアクセスし、アプリが起動していることを確認できた。 どのポートを開くかは、launch.jsonで設定できるっぽい { "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:20286", "sslPort": 44369 } }, "profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "dotnet_sample": { "commandName": "Project",…

Azure PipelinesでBuidからDeployまで(node.js)

Azure Pipelinesを理解するにはとにかく色々とパイプに通すしかない! ということで、今回はnode.jsを通してみました。 業務にて、Docker imageをCIでプッシュする必要があったのですが、コンテナって何?って状態だったので、今回は実体のあるアプリケーションで、CI/CDを試してみました。 AzureのGUIは本当によくできていて、複雑なことをしようとしなければ、ほぼ直感で操作が出来るとチュートリアルをやりながら実感しました。 とはいえ、Azureを触る機会がない人に取っては、認知負荷がかなり大きいかと思うので、この記事を流し読みしてから、MSのチュートリアルをやってみるのもいいかもしれません。 それでは、やっていきます。 プログラムをローカルに持ってくる。 https://github.com/MicrosoftDocs/pipelines-javascript サンプルコードは、上記のリポジトリにあるので、取ってきましょう。 Azure DevOps 無料枠を使ってみた 例にならって、DevOpsにリポジトリをプッシュしておきます。 Azure Gitにリポジトリが作成されたら作業開始です。 Azure Gitのプログラムを Build する DevOpsでは、指定したブランチにコミットされるたびに、ビルドしてくれるAzure Pipelinesというツールがあるのですが、これを使ってみます。 コードのある場所(ここではAzure Git) コードのあるプロジェクト名 YAMLのテンプレート(種類が色々ありますが、それっぽいので大丈夫です。あとでいくらでも書き換えられます。) 最後に自動生成されたYAMLファイルをチェックして保存→実行しましょう。 trigger: – master pool: vmImage: 'ubuntu-latest' steps: – task: NodeTool@0 inputs: versionSpec: '10.x' displayName: 'Install Node.js' – script: | npm install npm run build displayName: 'npm install…

Azure Pipelineを使ってみた

今日は、Azure Pipelineに焦点を当てて記事を書いていきたいと思います。 まず、Azure Pipelinesが何かと言いますと公式ドキュメントにあるように Azure Pipelines is a cloud service that you can use to automatically build and test your code project and make it available to other users. It works with just about any language or project type. Azure Pipelines combines continuous integration (CI) and continuous delivery (CD) to constantly and consistently test and…

Docker で JupyterLab環境を構築してみた。

参考サイト Dockerfile, docker-compose.ymlの引用元 DockerでJupyterLabを構築する コンテナの外部からアクセスする方法 コンテナに外部からアクセス(ポートフォワード) はじめに JupyterLab環境をAzure上に用意して、どこからでもデータ分析できるようにしたら面白そうだなと思い、コンテナにJuyterLabを入れる検証を行いました。 コンテナ起動まで まず、Dockerfileとdocker-compose.ymlを用意します。 % tree . ├── Dockerfile └── docker-compose.yml Dockerfile FROM jupyter/datascience-notebook RUN pip install –upgrade pip RUN pip install jupyterlab RUN jupyter serverextension enable –py jupyterlab DockerHubからjupyter/datascience-notebookをプルして、pipでJupyterlabを入れているだけ 次に、docker-compose.yml version: "2" services: jupyterlab: build: context: . user: root ports: – "80:8888" environment: NB_UID: 500 # ← 作業するユーザーのUID…