文系男子が日和るIT開発~IT知識なしで飛び込んだIT企業

文系男子だからIT企業に就職するなんて考えてもみませんでしたが、日和ながら日々くらいついています。

Vue.js開発環境をviteを使ってたった3ステップで作成する

Vue.js 3で、開発環境Viteを利用することで、
わずか3ステップで構築することができます。

Viteとは

madewithvuejs.com

Evan You殿により開発中ではありますが、vue.js3をインストール+開発環境の構築が行えます。
その手順は、3ステップ程度。

ステップ1

Vueプロジェクト用のフォルダを作成する。
(プロジェクト名は、my-app-project としています)
$ npm init vite-app my-app-project

作成したVueプロジェクトのフォルダ配下に移動しつつ
$ cd my-app-project

ステップ2

Vueプロジェクトに依存パッケージを作成する。
$ npm install

ステップ3

最後に、ローカルでアプリケーションを起動させます。
$ npm run dev

ここまででプロジェクトが構築できている、というわけです。
では、起動したアプリケーションをブラウザを起動し確認してみることとします。
URLに「http://localhost:3000/」を入力してみてください。
以下のような画面が表示されるかと思いますが、こちらが表示されれば問題ないと思います。

vite
vite

プロジェクトの構成は以下のようなイメージです。
 (プロジェクト名を黒く塗りつぶしていますが、お気になさらず)

my-app-project
my-app-project


開発にすぐ取り掛かれるこの素早さも、また、Viteの特徴かと思います。

Vue.js で "export 'default' (imported as 'Vue') was not found in 'vue'

warning。
解決の糸口は今のところ、なし。

メッセージは以下の通り。
vue.js で "export 'default' (imported as 'Vue') was not found in 'vue'

import Vue from 'vue'
import Appli from './Appli.vue'
import './assets/css/styles.css'

Vue.config.productionTip = false

new Vue({
store,
render: h => h(Appli)
}).$mount('#appli')

Vue.js で "export 'default' (imported as 'Vue') was not found in 'vue'

warning。
解決の糸口は今のところ、なし。

メッセージは以下の通り。
vue.js で "export 'default' (imported as 'Vue') was not found in 'vue'

import Vue from 'vue'
import Appli from './Appli.vue'
import './assets/css/styles.css'

Vue.config.productionTip = false

new Vue({
store,
render: h => h(Appli)
}).$mount('#appli')

Vue.jsエラー 「Missing space before function parentheses / space-before-blocks」

とあるコンポーネントhoge.vue)でエラーメッセージ:
3:17 error Missing space before function parentheses space-before-function-paren

該当箇所のコードは以下。

<script>
export default {
data: function() {
return {
title: ''
}
},

VS Codeを使用しているが)Terminalに出ていたエラーは以下。

1 problems (1 errors, 0 warnings)
1 errors and 0 warnings potentially fixable with the `--fix` option.


素直に、以下コマンドでサーバ起動しなおすと、改善。
文法的に宜しくない記述方法なのかと思ったのだが、そうではなかった?

npm run serve --fix

Vue.js+Vue CLIでWebアプリ環境構築

vue.jsとは(メリットや特徴など)

簡単に言うと、Java Script用のフレームワーク
jp.vuejs.org
vue.jsの特徴は公式サイトによると3つ。
開発者目線でも利用者目線でもメリットが大きそう。

1)親しみやすい
すでに HTML、CSS そして JavaScript を知っていますか?ガイドを読んで、すぐにモノ作りを開始しましょう!
2)融通が効く
ライブラリと完全な機能を備えたフレームワークの間で拡張できる徐々に採用可能なエコシステム
3)高性能
20KB min+gzip ランタイム
猛烈に速い Virtual DOM
最小限の努力で最適化が可能

実際に、多くの方の紹介で以下のようなメリットがあるといわれています。
・SPA(Single Page Application)の構築が容易
・学習コストが低い

ただ、JavaScript用のフレームワークは他にも存在しており、
それとの比較はhttps://jp.vuejs.org/v2/guide/comparison.html にも載っている。
 (なお、Netlifyでホスティングされているようです)
比較対象は、React、AngularJS、Riotなど。

vue.jsを使用してみる

筆者の環境ではnpmを使用しているため、nmでvueをインストールする。
$ npm install vue

インストール後にバージョン確認。
$ vue --version
@vue/cli 4.5.9

vueのファイル群は、node_modules\vue\dist に存在している。



Vue CLIを使ってみる

cli.vuejs.org

vue-CLIをインストールする。
$ npm install -g @vue/cli

プロジェクトの作成。
$ vue create app-name

後は、対話式でVueの環境構築をしていってみる。
最終的には、以下の設定で行いました。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:

が、
「Check the features」は「CSS Pre-processors」にチェックを入れ、
「BabelとESLintの設定」は「In dedicated config files」とする方が
後々のことを考えるとよかったかもしれない。

設定が終わったので、稼働確認を行ってみます。
$ app-name
$ npm run serve

記載されているURL(例: http://192.168.2.101:8080/ )をブラウザを立ち上げ実行する。
 (筆者の場合は、VS Codeを使用しているため、Crl+Clickで起動可)
下記のような画面が表示されればうまくいっていると思います。
f:id:dreamjourney:20201230003021p:plain



Windows10 pip installエラー:ERROR: Could not install packages due to an EnvironmentError: [WinError 2] 指定されたファイルが見つかりません。

Windows10にPythonモジュールをpipでインストールする際に、
下記のようなエラーが出た場合の対処方法です。

エラー発生時の実行コマンド:

py -m pip install モジュール名

エラーメッセージ:

ERROR: Could not install packages due to an EnvironmentError: [WinError 2] 指定されたファイルが見つかりません。

対処方法:
以下のコマンドで実行

py -m pip install モジュール名 --user

 

SQL Server Management Studio (SSMS)をインストール

最近、業務でAzure SQL Databaseを使用する機会が増えたこともあり、
問題解決を行うための基礎能力の向上と、そういった場で短時間で解決できるようにしたい思いとがあり、
自宅で、SQL ServerやSSMSに触れておき、緊急時に備えておきたい。

SQL Server Management Studio (SSMS) のダウンロード
docs.microsoft.com

今回は、SSMS Release 18.4をインストールします。
上記URLからインストーラーをダウンロードすると、
SSMS-Setup-ENU.exe が保存されます。

早速インストール開始。

f:id:dreamjourney:20200330214743p:plain
ssms_install_001


順調!
かと思いきや、「インストール中に致命的なエラー」が発生

f:id:dreamjourney:20200330215252p:plain
ssms_install_002

それでも、慌てず再起動すると「Setup Completed」

f:id:dreamjourney:20200330222057p:plain
ssms_install_003

早速SSMを起動。

f:id:dreamjourney:20200330222153p:plain
ssms_start_001
f:id:dreamjourney:20200330222323p:plain
ssms_start_003

接続可能なデータベースはないけども。

f:id:dreamjourney:20200330222229p:plain
ssms_start_002

日本語にしたい場合は設定変更し、再起動。

f:id:dreamjourney:20200330222527p:plain
ssms_setting_language_01
としても、英語のままでした。
まぁ別に問題ありませんが。

PostgreSQL10インストール

Windows10のWSLとして利用しているUbuntuにPOstgres10をインストールしたので、軽く共有です。


f:id:dreamjourney:20200328232233p:plain
postgres10_aptget_001

f:id:dreamjourney:20200328232423p:plain
postgres10_aptget_002

f:id:dreamjourney:20200328232532p:plain
postgres10_aptget_003


起動シェルは/etc/init.dディレクトリにあります。
ls -la /etc/init.d/postgresql

  • rwxr-xr-x 1 root root 1490 Jan 12 2018 /etc/init.d/postgresql


/etc/init.d/postgresql start でPostgresを起動。
(筆者の場合は、sudoで、sudo /etc/init.d/postgresql start で起動)

起動後のプロセス確認。

f:id:dreamjourney:20200328233342p:plain
postgres_start_ps2


初回ログイン前に、postgresユーザのパスワードを設定しておくのが良い
sudo passwd postgres

postgresユーザにスイッチ
su - postgres

psqlツールで接続。 
psql
(筆者の環境では、 /usr/bin/psql


PostgreSQLに接続し、「¥l」コマンドでデータベースを確認。
また、「¥u」でユーザも確認。

f:id:dreamjourney:20200328234451p:plain
postgres_connect_001


CREATE DATABASEを行います。
まず構文から。
CREATE DATABASE name
[ [ WITH ] [ OWNER [=] user_name ]
[ TEMPLATE [=] template ]
[ ENCODING [=] encoding ]
[ LC_COLLATE [=] lc_collate ]
[ LC_CTYPE [=] lc_ctype ]
[ TABLESPACE [=] tablespace_name ]
[ ALLOW_CONNECTIONS [=] allowconn ]
[ CONNECTION LIMIT [=] connlimit ]
[ IS_TEMPLATE [=] istemplate ] ]


CREATE DATABASE testdb
と実行して"testdb"というデータベースを作成。

f:id:dreamjourney:20200328235436p:plain
createDatabase_001

作成後は、"¥l"コマンドで"testdb"が作成されていることを確認するとよいでしょう。

特に問題なく、インストールとデータベースクラスタの作成は行えたことでしょう。
他d氏、本来は、ROLEの設定や、設定ファイル(postgresql.confやpg_hba.conf )などで、アクセス制御等、
すべきですが、ここでは割愛しています。

インストール先環境のOS: Ubuntu
PostgreSQL : 10.12 ( SELECT version() コマンドで確認 )


これからはじめる PostgreSQL入門

これからはじめる PostgreSQL入門

流行のコンパクトSUV・ミドルSUVをR言語でクラスタ分析してみた

f:id:dreamjourney:20181003231812j:plain

近年流行りのSUV


一昔前は、いわゆるクロカンタイプが主流でしたよね。
パジェロランクル、サーフ、サファリ等々。

それが、CR-V、ESCUDE、RAV4などの登場により、
市街地を中心にファッション感覚で乗れるシティ派のSUVが登場してきて、、、

という流れは、ご存知の通りかと思います。


では、今は?

続きを読む

R言語でコレスポンデンス分析(caパッケージ)

普段使用しないR言語ですが、
コレスポンデンス分析を行う機会があったので、
caパッケージを使用して、可視化してみました。

コレスポンデンス分析とは、
クロス集計結果で収集したデータを元に、表側項目と表頭項目の関連性を散布図で表現することができる解析手法です。
これにより、例えば、小売業のマーケティング分析などでは、
商品/ブランドとそのターゲット層との関連性が視覚的に捉えやすくなる、という利点があります。



とはいっても、
今回、実際の業務で取り扱う商品やブランド、その売り上げ等のデータはお見せすることはできなため、
少し工夫して、別データを準備することとします。


今回使用するデータは、こちら。

f:id:dreamjourney:20180929215140p:plain


簡単に説明しますと、競馬関連のデータです。
こちらを使用し、コレスポンデンス分析をすることとします。


具体的には、2017年度にJRAで開催された芝の重賞レースについて
競馬場と距離別にした売り上げ合計金額を収集したものです。

これにより、
「この競馬場のこの距離のレースは見ごたえレースがあり、売り上げが高くなっているんだな」、とか、
「この競馬場のこの距離の番組が集中していて、売り上げに貢献しているんだな」とか、
そういったような要素を確認したい、という方に参考になるかと思います。
 (競馬予想する輩向けではなく恐縮です)


コレスポンデンス分析した結果をグラフ化したものはこちら。
f:id:dreamjourney:20180929214535j:plain


グラフから感じ取れること。
京都競馬場は3,000m級のレースに支持されている (すみません。 3,000=3,000以上ととらえてください)
中山競馬場は、2,500mと2,000mのレースとのとの関連性が強い(有馬記念皐月賞などのおかげ)
東京競馬場は、2,400mのレースとのとの関連性が強い(ダービー、ジャパンカップなど)
などなど

思った以上に強い相関は出ていませんでしたが、
これはJRAがある程度均等に競馬場×距離を考慮した番組編成をなしている結果かと思われます。



実行したコマンドです。


> library(ca)
> setwd('C:/Users/hoge/Documents/')
> sdata_detail <- read.csv('keiba_kyori_detail.csv', stringsAsFactors = F, header=TRUE, sep=",", encoding="UTF-8")
> sdata_detail
1200 1400 1600 1800 2000 2200 2400 2500 3000
nakayama 15566176 0 18792639 16441284 51708087 15897531 0 48218591 2304032
tokyo 0 7018110 64131965 24012274 24654553 0 42016915 10737179 2720029
kyoto 8295924 8596890 35559707 3970814 15925741 23554045 10248798 0 37571206
hanshin 3814417 17270710 48474488 8038761 22571907 21145791 5647034 0 4861364
>
> plot(ca(sdata_detail))



Rによるやさしい統計学

Rによるやさしい統計学