Viteでモダンフロントエンド開発環境を構築してみる

f:id:osushi_engineer:20220409210403p:plain
Vite【公式】
Viteと呼ばれるフロントエンドのビルドツールが、シンプルかつ動作も早いという噂を聞いたので一度試してみる。公式でも次世代フロントエンドツールを名乗っていて、TypeScript、JSX、CSSあたりを使用するフロントエンドの環境構築がすぐ使えるらしい。これから色々試作プログラム作りたいと思っていたので、今回楽そうなら今後も使っていこうと思う。

Vite

Get Started

基本的には公式サイトのGet Startedの手順で試してみる。公式も日本語対応しているので非常に分かりやすい。サポートされているテンプレートはvanila,vue,reactなど。

プロジェクト生成

非常にシンプル、1行

$ yarn create vite

をターミナルに打ち込むだけ。 質問形式でプロジェクト名やフレームワークを聞かれるので、それぞれtest-vite,vue,vue-tsを選択する。 f:id:osushi_engineer:20220409211614p:plain

すると数秒でVue+TypeScript環境を構築してくれる。 ディレクトリを移動し、$yarn $yarn devでlocalhost3000でサイトを確認できる。ホットリロードも効いているみたいなので開発しやすそう。 f:id:osushi_engineer:20220409212024p:plain

ディレクトリ構造は基本的なVueテンプレートと同じ感じ。 f:id:osushi_engineer:20220409212748p:plain

cahrt.jsの導入を試してみる

後々、グラフを扱うサイトを作成したいなと思っていたのでchart.jsとvue-chart-3を導入して動きを試してみる。

$ yarn add chart.js vue-chart-3

とりあえず、サンプルをappにぶっ込んでみたら稼働することがわかったので今回はここまで。 f:id:osushi_engineer:20220409221015p:plain

※プロジェクト生成にはnode12.2.0以上のバージョンが必要、エラーが出たらその都度バージョンを上げて試す

【読書×プログラミング】データ収集案件についての本を読む

[はやたす]の知識ゼロから始める!Pythonで3万円を稼ぐ副業術: 現役フリーランスが教えるPython副業の稼ぎ方

先日より、Pythonに関する書籍を読みその書評をブログ化しています。今回読んだ本は『知識ゼロから始める!Pythonで3万円を稼ぐ副業術』です。

KindleUnlimitedに入っている電子書籍の中から、一番初学者が興味持てそうなものを選んでみました。プログラムでお金を稼ぐということは、誰かの悩みを解決するということなので、その”悩み”が書いてある本+それをプログラムで解決する本という意味の選書となります。

稼ぐための最初のステップについて

本の中では、最初にPthonというものの説明が行われ、次に稼ぐための4ステップということでスキルの進度によってのオススメが書かれています。その4つについては本に説明を任せるとして、最初のステップ1.「データ収集案件」についてまとめたいと思います。

 

1.pythonの基礎を学ぶ

2.演習により基礎を固める

3.html/cssを学ぶ

 

1つづつまとめていきます。

1.pythonの基礎を学ぶ

こちらでは、著者のYouTubeページが紹介されています。全21の講座で基礎文法(順次実行、変数、反復、条件分岐)などを学ぶのでしょう。前回扱った本の中で基本的な文法については触れているので、これは飛ばすことにします。

osushi-engineer.hatenablog.com

2.演習により基礎を固める

演習問題によって基礎コードに慣れるのが目的のようです。著者のUdemy講座が挙げられています。個人的には書籍での学習が好きなので、KindleUnlimitedで基礎演習ができそうな書籍を探してみます。

速習 Python 3

丁度よさそうな本がKindleUnlimitedに入っていたので、メモ。

2016年の本ですが、シスコシステムズという会社の社内トレーニング資料を書籍化したものらしいです。次回の書評はこの本にしたいと思います。基礎に関しては、やり続けていても意味ないし、やらないのも問題だと思うので試してみて良さそうであれば日々少しづつやっていきたいと思います。

3.html/cssの基礎を学ぶ

データ収集案件ではWEBスクレイピングという技術を使うんですけど、それにhtml/cssの基礎知識が必要となるようです(おそらくhtmlタグ内の指定要素の中身を収集するから?)。これは自分的にはあまり必要ないですが、基礎本として書評したいなと思っていた本をメモしておきます。

HTML&CSS コーディング・プラクティスブック 

WEBスクレイピングを学ぶ

いよいよWEBスクレイピングを学ぶ方法の章に入ったのですが、学び方については著者のUdemy講座でという作りでした。これについても書籍で勉強したいので

Python2年生 スクレイピングのしくみ 体験してわかる!会話でまなべる!

評価が悪くなさそうな、上記の本を手に入れてみることにした。

WEBスクレイピング案件の話

次にスクレイピング案件の話ですが、・クラウドワークス・ランサーズ・ココナラといった有名どころで案件をとることが書かれています。

ここは普通ですが、ちょっといいなと思ったのが「ここの案件取得もpythonで自動化してみましょう」と書かれていた点。これは実際に試してみたいと思いました。

あと案件受けで良いと思った点

- 提案文に相手の返信テンプレートを作成する

- 提案前に事前データ収集を行い、そのサンプルを提案時に見せておく

まとめ

残りの文章に関しては基本的なことが書かれていたみたいなので、割愛します。

この本ではpythonの技術について学ぶことはできませんでしたが、次に何をしていきたいかのルートを学ぶことはできました。

 

前提:WEBスクレイピング案件が一番簡単なので、まずはその技術を学ぶ

1.スクレイピングを学ぶための書籍を予約する

2. その本が届くまではpython演習をする(継続)

3. スクレイピング技術を学ぶ

4. 案件把握用の自動化プログラムを作成する

5. 案件獲得に向けて動く

【読書×プログラミング】『Pythonによる自動化仕事術』を試す【Pandas】

読書×プログラミングの2日目。

現在は『あなたの仕事が一瞬で片付くPythonによる自動化仕事術』という本を利用しながらPythonの勉強をしています(Python利用は初めて)。現在、自分がエンジニア+エンジニアとは関係ない副業をしているので、その副業の業務を自動化できないかなというのが勉強のスタートです。

Pandasを試す

本の進行に従い本日は「Pandas」というライブラリを試す。Pandasというライブラリを使用すると、csvデータの分析・編集が楽に行えるらしい。

いきなりつまづく

本の中でいきなりデータ読み込み用コードが出てきたのだけど、これは前回使っていたjupyter labで書いていけば良いのだろうか、と戸惑った。少し調べてみるとjupyter labは、対話型実行環境で普通にグラフ表示などもブラウザ内で行うことができるよう。ここに書いていって問題なさそうだ。本だけだとちょっとわかりづらい。

data.csvを表示させる

ここも本だけだとわかりにくかったのだけど、以下の手順でOK

練習用データの data.csv政府統計の総合窓口から取ってくる(もしかしたら、Youtube内で言及しているかも)

data_csv_path = './data.csv' でdata.csvまでのpathを変数に入れる。今回は同階層に置いておいた。

read.csv でcsv読み出し、変数に入れる。

変数を書き込むとデータを表示できる

f:id:osushi_engineer:20220404203253p:plain

data.csvを表示させるまでの4行
表示メソッド

表示メソッドは色々あるらしい。head(),tail(),sample()など

一番重要そうなのは、統計表示describe()なので、それだけ書いておく。これをみると最大人口が1350万だとか全国平均が210万人だとかがわかったりする。

 

df_population_data.describe().round(0)

f:id:osushi_engineer:20220404205159p:plain

というわけで、本日はPandasによる表示まで。