2019年5月9日1.はじめに近年、web関係で「クライアントサイドJavaScript」というのがトレンドになっているそうです。「クライアントサイドJavaScript」と、従来のWebアプリケーションとの違いは、ブラウザ側での動作が中心となることです。従来のWebアプリケーションでは、Webサーバでの処理が中心でしたが、「クライアントサイドJavaScript」では、ブラウザ側での処理が中心となってきて、かつ、ユーザの使い勝手の良さが重要になってきます。仕事でちょうど簡単なweb画面を1からつくる機会があり、クライアントサイドJavaScriptを使うことにしました。現在使われているクライアントサイドJavaScriptは以下のようなものがあります。AngularJSReact.jsVue.jsこの中でも一番簡単そうなVue.jsを使用してみました。Vue.jsとはVue.jsとは、以下のようなJavaScript用ライブラリです。リアクティブデータバインディングHTMLの各タグとデータを自動的に結び付けるコンポーネントベース簡単なAPIお手軽ライブラリのようなので、入門的に導入してみました。ここでは、Vue.jsを素で扱うのではなく、[Nuxt.js]を使用しようと思います。Nuxt.jsとはVue.jsは比較的簡単に使用できますが、それでも、なんらかの準備は必要です。Nuxt.jsとは、その準備を一通りやってくれるフレームワークと思えばいいでしょう。主な特徴は以下の通りです。トランスパイレーションモジュール構造で拡張できるVue.jsで実装する、vueファイルを追加するだけでいいので、Vue.jsだけを使用するより手軽に実装できます。2.Nuxt.jsの導入まず、Nuxt.jsを試す環境を導入してみます。6.0.0環境構築Nuxt.jsをインストールします。上記で、Nuxt.jsを書ける環境が整ったので、サンプルを作成してみます。サンプルは、[nuxtjs-sample-todo]に置いてあります。ディレクトリ構成インストール直後のディレクトリ構成は以下の感じです。vueコンポーネントの作成todo用のvueコンポーネントは以下の通りです。todos”」がデータバインディング画面上のinputを変更すると、「newTodo」変数が変更されます。「todos」を変更すると、画面上のリスト表示が変更されます。「@keyup.enter」や「@click」がイベント受信enterや、クリックすることでVueモデルの処理に移行します。以下をpages/todo/index.vueとして格納します。追加するファイルはこの一つだけというのが、Nuxt.jsのいいところです。}}</script>ほぼ見ての通りですが、一つだけ注意する必要があるのは、todosが配列で定義されているため、push/spliceを使う必要がある点です(時々、はまったりします)直接配列に代入すると画面が変更されません。別ホストからアクセスできるように、package.jsonに以下を追加します。nuxt"}起動方法は以下の通りです。dev(中略)そして、以下にブラウザでアクセスすると、簡易TODOアプリにアクセスできます。192.168.132.128は環境によって変更してください。以下のツールを設定しておきます。[prettier]ESlint以下でインストールします。prettier.eslintrc.jsを以下にします。ここにカスタムルールを追加します。}}packages.jsonに以下を追加します。起動方法lintfixをすると、prettierを使用してソースを修正します。.4.おわりに導入は、あっさり終わりました。次はもう少し実用的な内容として、コンポーネントを利用して実装しようと思います。最近、仕事で複数スクリプトを組み合わせてコーディングすることが多くなりました。それだと、各スクリプトの癖を忘れたり、そもそもどう書くのか忘れたりと、不良を作りこむ可能性が多くなります。Pythonのパッケージ管理の歴史は、常に流動的で、そもそもからして、とてもじゃないがまとめて説明できるようなものではないです。今所属している会社で1バイナリでとりあえず済ませる簡単ツールはgo言語で書くことが多いようです。DateTimePickerを使うサンプルで、いいのがなかなかないです。Dateだけとか、Timeだけってのはあるのですが。私の周りでは、なぜかSeleniumが流行っている模様です。私自身は、Webアプリ的なのも作ってますが、あまり使ってなかったので、使ってみようと思います。