プログラミング言語

Pythonでウェブスクレイピング – BeautifulSoup ②

by
Beautiful Soup使い方

では前回練習したウェブスクレイピングの続きを説明します。 前回の記事はこちらからどうぞ。 今日はヤフオクに表示されている入札価格と商品名などをスクレイピングしていきたいと思います。 requestsのライブラリをインストール ではPythonから実際のウェブサイトにアクセスするにあたりHTTPリクエストを送ることになります。その際にRequestsのライブラリを使うのでインストールしましょう。 前回、virtualenvで環境を作った人はアクティベートすることを忘れずに！ ではページのHTMLをスクレイピングします。 ウェブページの内容が出てきました。 リスティングのHTMLを見る ではデベロッパーツールで各リストを囲っているカードのエレメントをみます。 見てわかるようにliエレメントでProductというクラスがありますね。 ではこのProductクラスをすべてスクレイピングします。 Pythonファイルを実行してちゃんとスクレイピングできているか確かめましょう。 次に一つのリスティングから必要な情報を吸い取ります。 ではこのリスティングをループさせます。 10分ごとにスクレイピングを実行させる では先ほどのコードをファンクションにして10分ごとに実行させるように設定します。 データをSCVに書き出す 日本語のエンコードは私は”utf_8_sig”で行いました。（アメリカのPCなので。。。 色々試してください。

Pythonでウェブスクレイピング – Beautiful Soup ①

by
PythonでBeautiful Soupを使ってみよう

今日はPython初心者の方でもわかるウェブスクレイピングについて説明します。 ウェブスクレイピングとはウェブサイトにある情報をスクレイプ（剥ぎ取る）という事です。 例でいうと、過去の天気予報の情報をサイトからスクレイピングしたり、Amazonのサイトの商品の情報をスクレイピングしたりできます。 そのデータをどうするかはあなた次第ですが、このPythonの得意分野である自動化という力を発揮できる素晴らしいプロジェクトになります。 下準備 Beautiful Soupとは Beautiful Soup（美しいスープ）はPythonのライブラリです。このライブラリを使ってウェフスクレイピングを行います。他にもウェブスクレイピングができるライブラリがありますが、一番お勧めがこのBeautiful Soupになります。 HTMLの基本を知っておく ウェブサイトのスクレイピングをするにあたり、HTMLの構造を知らないとどの情報をスクレイピングしたいのか指示ができません。 まずは簡単なサイトでスクレイピングの練習をしましょう。 簡単なHTMLで練習 ローカルの環境にテスト用でHTMLを作成してスクレイピングの練習をします。 不要な人は飛ばしてください。 ではPythonとBeautifulSoupをセットアップしていきましょう。 環境のセットアップ Pythonのライブラリをインストールする際にpip(パッケージマネージャー）を使用します。 このままパッケージをインストールしてしまうと、グローバルにパッケージがインストールされてしまいます。 個人で楽しむ分には問題ありませんが、今後、多数のプロジェクトを並行して作業するにあたり、仮想環境を準備するのが最適になります。 本題とはそれますが、それを学びたい方は下記の動画を見てください。 virtualenvのインストール 仮想環境を使いたい人はこちらのコマンドでインストールします。 インストールができたら仮想環境を作成します。 仮想環境をアクティベートします。 これでコマンドプロンプトの左側に環境名が表示されればOKです。 ここからPythonでインストールしたライブラリはenv内に格納されるのでアクティベートされたときのみPythonがアクセスできます。 BS4のインストール BeautifulSoup4を略してbs4と言います。 何事もインストールする前にはちょっとだけでも公式ドキュメンテーションを見ておくものです。 https://www.crummy.com/software/BeautifulSoup/bs4/doc/ ではこれをインストールしていきましょう。 インストールされました！ lxmlのインストール BS4で作業するにあたり、HTMLのパーサー（読み込む役割）をするライブラリが必要になります。 LxmlはHTMLのパーサーのライブラリの一つで、お勧めなのでインストールしていきます。 コードを書く ではやっと下準備が整ったのでコードを書いていきましょう。 私は、テキストエディタはVSCodeを使います。皆さんが使っているものをどうぞ。 では下記のようにコードを書いていきます。 同じディレクトリにindex.htmlで下記の中身のファイルを作成します。 ではコマンドプロンプトからPythonファイルを実行します。 見事！HtmlのファイルがPythonから読み込まれました。 しかし、このままだとHTMLタグも入って見づらいのでbeautifulSoupのPrettifyを使ってキレイにしましょう。 さっきよりキレイになりました！ HTMLタグで絞り込む .find ではH1タグのHTMLだけをスクレイピングしたい場合はこのようにします。 soup.findメソッドを使い、タグを指定してあげます。 .fins_all これだと最初のh1タグしかスクレイピングされませんね。 では、すべてのh1タグをスクレイピングするようにしましょう。 findのメソッドをfind_allに変えてみましょう。 すべてのh1タグがスクレイピングされました！ … Read more

ViteでReactを始めよう！

by
Viteでreactを始めよう

皆さん、こんにちは。

今日はViteというコマンドツールでReactのアプリをセットアップしていきます。

今日の条件

Node.js バージョン16 (コマンド　node -v)

npm　バージョン8（npm -v)

今までのやり方

通常のReactのセットアップは下記のコマンドです。

npx create-react-app my-app

これで自動的にBabelとWebPackがインストールされたreactのプロジェクトが作成されます。

これらのパッケージが古いブラウザにも対応したJavaScriptファイルなどに変換してくれるのですが、その為にファイルが大きくなる＋遅くなることがあります。

なので今日使うViteでサクサクの一般的なブラウザのみに対応したセットアップの仕方で設定する方法をお勧めします。

Viteとは

ViteはもともとVueJSの創設者が作成したビルドツールになります。Vueのプロジェクト以外にも対応しており、reactのデベロッパーにも人気です。

ViteでVueのプロジェクトを始めたい場合は下記の記事からどうぞ。

Viteを使ってVueを始めよう

ViteでReactを始める(Yarn)

yarn create vite

#プロジェクト名を聞かれたら
my-vite-app

#フレームワークを聞かれたら
reactを選択

cd プロジェクトフォルダ
yarn 
yarn dev

ViteでReactを始める

ではコマンドラインに下記を叩き込みます。

ファイルパスが自分がプロジェクトを作成したいパスにいることを確認してください。

npm create vite@latest

y（いえす）でエンターを押す。そのままエンターでもOKです。

プロジェクト名を聞かれるので適当に入力します。

画像っだとmovie-appにしてみました。

では使いたいフレームワークを選択するのでここで、reactを選択してエンター

次にJavaScriptを使うのかTypeScriptを使うのか聞かれます。

今回はJavaScriptにしてエンター。

ではreactのベースとなるアプリができたのでフォルダの中に移動してパッケージをインストールして、起動してみます。

表示された通りに順番に入力しましょう。

npm installはnpm iでも同じことができます。

npm run dev

ここで開発用のアプリが起動したのでブラウザから見てみましょう。

カウントのところをクリックすると数が増えていきますね。

へえ。

お疲れ様でした。

Gunicornってなに？

by
Gunicornって何

DjangoやFlaskなどのPythonアプリケーションをデプロイする際に使うGunicorn（ジーユニコーン）。 デプロイはできたけど、実際にどのような役目をしているのか分かりづらいですよね。 今日はGunicornについて紹介していきます。 Gunicornとは Gunicorn（Green Unicorn）は、PythonのWebアプリケーションサーバーであり、高速で拡張可能な環境でのWebアプリケーションのデプロイメントを容易にするために設計されています。 Gunicornは、WSGI（Web Server Gateway Interface）準拠のWebアプリケーションフレームワークと連携して動作します。WSGIは、PythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースです。つまり、GunicornはPythonのWebアプリケーションを受け入れ、HTTPリクエストを処理し、Webアプリケーションに渡す役割を果たします。 Gunicornの特徴的な特徴の一つは、マルチワーカーモデルを採用していることです。これにより、複数のプロセスを同時に実行し、複数のリクエストを同時に処理することができます。これにより、Webアプリケーションのパフォーマンスが向上し、ユーザーに迅速かつ効率的なレスポンスを提供することが可能になります。 さらに、Gunicornは拡張性に優れています。ワーカープロセスの数や接続数などのパラメーターを調整することで、サーバーの動作を調整することができます。また、NginxやApacheなどのリバースプロキシと組み合わせて使用することもできます。これにより、Gunicornは高トラフィックの環境でも優れたパフォーマンスを発揮することができます。 Gunicornはコマンドラインツールとして提供されており、比較的簡単にインストールして使用することができます。また、Pythonの仮想環境やDockerコンテナ内など、さまざまな環境で利用することができます。 要約すると、GunicornはPythonのWebアプリケーションを高速かつ拡張可能な方法でデプロイするためのサーバーソフトウェアです。マルチワーカーモデルと拡張性の高さが特徴であり、Webアプリケーションのパフォーマンス向上とスケーラビリティを実現します。 以下、さらに詳しく説明します。 Gunicornの定義 Gunicornの公式サイトに記載されているものを翻訳します。 Gunicorn もしくは緑のユニコーンとはPythoinのWSGI　HTTPサーバーでUnixの為に作られました。これはPre-Forkワーカーモデルです。（※各ワーカーをアプリケーションごとに割り当てロードに必要なキャパシティ以上を割り当てる） Gunicornは様々なウェブフレームワークに対応し、簡単に実装でき、サーバーに負担のかからない、軽量なサーバーになります。 Gunicornができた経緯 Gunicorn（Green Unicorn）は、RubyのWebサーバーであるUnicornにインスパイアされて作られました。RubyのUnicornは、高パフォーマンスで信頼性の高いWebアプリケーションサーバーとして広く使用されていました。 Pythonのコミュニティでは、RubyのUnicornの成功とパフォーマンスの高さに触発され、同様の機能を持つPython用のWebサーバーが求められるようになりました。そこで、Python開発者のBenjamin PetersonがGunicornを開発しました。 Gunicornの開発は、2009年に始まりました。当初はワーカープロセスの管理やリクエストの処理など、基本的な機能の実装に焦点を当てていました。その後、GunicornはPythonのWSGI（Web Server Gateway Interface）仕様との互換性を持つように拡張され、Pythonの主要なWebフレームワークとシームレスに連携できるようになりました。 Gunicornは、PythonのWebアプリケーションサーバーとしての需要を満たすため、活発なオープンソースプロジェクトとして成長しました。開発者コミュニティの貢献により、Gunicornは安定性とパフォーマンスの向上が図られ、多くのユーザーによって利用されるようになりました。 また、Unixのアプローチとして、毎回アプリケーションのデプロイをするたびに下記の作業が必要でした。 以上の作業がアプリケーションのデプロイごとに必要になりとても時間がかかります。 それを解決するのがGunicornになります。 サーバーの仕組みを理解する Pythonのウェブアプリケーションのデプロイには下記の３つのスタックが必要になります。 ウェブサーバーはユーザーからのリクエストを受け、ドメインロジックとHTTPコネクションを担当します。ウェブサーバーは正しいリクエストだけを判別し、実際のDjangoアプリ等に渡してあげることが役目になります。 Django等のアプリケーションは各リクエストに対してリスポンスをすることしかできないことを理解しておきましょう。 ではアプリケーションサーバー（Gunicorn）の役目をこれから説明します。 Web Server Gateway Interface（WSGI)とは Web Server Gateway Interface（WSGI）は、PythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースです。WSGIは、PythonのWebアプリケーションフレームワークやWebサーバーの開発者が、相互に互換性のあるコンポーネントを作成するための共通のルールを提供します。 WSGIの主な目的は、WebアプリケーションフレームワークとWebサーバーを疎結合にすることです。これにより、異なるフレームワークやサーバーを組み合わせることができ、柔軟性と再利用性が向上します。WSGIを使用することで、Webアプリケーションの開発者は、特定のWebサーバーに依存しないアプリケーションを作成できます。 WSGIでは、2つの主要なコンポーネントが定義されています。 WSGIを使用する場合、Webサーバーとアプリケーションはお互いに疎結合であるため、異なる組み合わせが可能になります。これにより、異なるWebフレームワークを使用したり、Webサーバーを切り替えたりする際の柔軟性が向上します。 要約すると、WSGIはPythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースであり、疎結合性と柔軟性を提供します。WSGIによって、PythonのWebアプリケーションは異なるフレームワークやサーバーと組み合わせることができ、再利用性と相互運用性が向上します。 WSGIサーバーとしてのGunicorn Gunicornは複数のウェブサーバーと交信ができます。またGunicornはどのウェブサーバーを使っているかも気にしません。（例えばNginxとかApacheとか） GunciornはWSGIサーバーとしてウェブサーバーとコミュニケーションが取れることだけと条件としています。 GunicornはウェブサーバーとPythonアプリケーションの間に入り下記の問題を解決してくれます。なので自身で解決策を探す必要がありません。 Gunicornの代替オプション … Read more

Postgresのユーザーのパスワードを忘れた場合

by
PostgreSQL

サーバーで色々操作していてPostgresのデータベースで使うユーザーのパスワードを忘れた場合は下記の方法で新しいパスワードを再設定しなおしましょう。 今日の環境 Ubuntu22.04 PostgreSQL 14 今日の目的 Postgresの設定ファイルから仮でパスワードなしで接続できるようにします。 その後にコマンドから、新しいパスワードを設定しなおします。 最後にパスワードでデータベースに接続させるように再設定します。 ※作業にリスクがあると感じた場合はバックアップを取るなり自己責任で操作をしてください。 pg_hba.confを探す Postgrtesをインストールした後にpg_hba.confのコンフィグファイルも作成されます。ここでユーザーがどのようにデータベースに接続できるようにするか設定できます。 通常は下記のファイルパスにあります。 PostgreSQLのバージョンによりファイルの場所が少し変わるので注意します。 /etc/postgresql-9.1/pg_hba.conf /etc/postgresql/14/main/pg_hba.conf rootで入っている場合はpwdのコマンドでどこにいるか確認しましょう。 cd のコマンドとlsのコマンドを使いながらPostgresの場所を探します。 pg_hba.confを見つけました。 pg_hba.confのバックアップをとる では下記のコマンドでオリジナルのファイルをコピーしておきます。 ※パスワードをリセットしたらこっちに戻します。 ファイルがコピーで来たことを確認しました。 認証方法を変更する ではテキストエディタを使ってこのpg_hba.confを開きます。 もともとはこんな感じになっていますね。 これを下記のように変えます。 Ctl +X　で抜け出し　Yで上書き、エンターでファイル名をそのままにします。 Postgresのサーバーをリスタートする ではファイルを更新しただけではコンフィグを読み取ってくれないのでPostgresのサービスを再起動します。 postgresのユーザーで接続する ここでコンフィグをtrustにしたのでどのユーザーでもパスワードなしで接続できるようになりました。 ではpostgresのユーザーで接続してみます。 パスワードなしで入れました。 パスワードを更新する では更新したいユーザーのパスワードを下記のコマンドで更新します。 元のコンフィグファイルに戻す パスワードなしで誰でも接続できてしまうのは危険なので、元のファイルに戻します。 Postgresサーバーのリスタート 同じようにPostgresのシステムを再起動します。 これでpsqlのコマンドでパスワードが聞かれたらもとに戻っているという事ですね。 ではお疲れ様です。

DB BrowserでSQLiteのデータベースを作ろう

by
SQLiteの使い方

日本のプログラマーの皆さんこんにちは。今日はDB Browserを使ってSQLiteのデータベースを管理していく方法を紹介します。 エクセルのような感覚で始められるのでリレーショナルデータベースを使ったことがない人には得にお勧めです。 SQLiteってなに？ SQLiteは下記のような長所があります。 オープンソースです。（ソースコードが一般に公開されています。） データベースの一種です。（MySQLとかPostgreSQLとかと同じ） ポータブルです。（OSに依存せず、DBファイルにそのままアクセスすることができます。） SQLiteの欠点はこのようなものがあります。 DBサーバー無しで使えるのでネットワークからアクセスできない。 大規模なアプリケーションには向いていない。 データサイズに制限がある。 本日の環境 Windows10（MacOSでも、Linuxでも問題ありません。） 本日の目的 今日も目的はSQLiteのデータベースがどのような仕組みで作れるのか見ていくことが目的になります。慣れてきたら、次回以降はSQL（クエリ）を書いてデータベースを操作できるようにしたいですね。 SQLite DB Browserをダウンロード では、SQLiteのデータベースの作業をするために下記の公式リンクからSQLite Browserをダウンロードしましょう。 https://sqlitebrowser.org/dl/ では、ダウンロードページに行ったらWindowsのポータブル版をダウンロードしましょう。 windowsにインストールしちゃいたい人は64bitのインストーラーをダウンロードしてもOKです。MacOCの人はMacの方からダウンロードしてください。 DBBrowserを展開 ではダウンロードした.exeファイルをダブルクリックしてファイルを展開しましょう。 Nextをクリックします。 ポータブル版のファイルをおきたいファイルパス（場所）を指定します。これだとダウンロードに展開されることになります。 では、Instalをクリック。 Finishをクリックで完了です。 SQLiteDatabaseBrowserを実行 では先ほど展開したファイルを開くと.exe実行ファイルがあるのでそれをクリックしてアプリを起動します。 データベースを作成 では、NewDatabaseのボタンを押してデータベースを作成します。 それからデータベース名を決めて、Saveします。名前は後から変更できるのでご心配なく。 Addをクリックしてカラム（Column)を追加します。 まずは、テーブル名をInventoryとかにしておきましょう。 今回は在庫管理業務で使えそうなデータベースを作ってみましょう。 では下記のようにカラムを追加していきましょう。 Nameはカラムの名前です。クエリで指定する際に使います。 Typeはデータのタイプになります。Textは文字のデータです。（数字を入れると文字データの数字として扱われます。プログラミングを学習する際に習いますね。） INTEGERは整数のことになります。 その横にあるチェックボックスを説明します。 NN　NotNull（Null＝データがないことを許さないという事です。） PK　プライマリーキー（他のデータと被らない行を区別するためのキーです。） AI　auto increment　（自動で数字が足されていくことです。） U　ユニーク（PKと同じですが、PKはテーブルに１つしか設定できないことに対しUは複数設定可能です。 では、今回設定した内容を説明します。 idはプライマリーキーでそれぞれのデータの行を区別するために設定しておきます。またAIにチェックが入っているので新しいデータが作成されるたびに数が１，２と増えていくようになります。 最後にadded_date（追加日）のDefault（デフォルト）の部分に下記のテキストを追加します。 CURRENT_TIMESTAMP デフォルトで初期値を設定することができます。もし何もインプットがない場合にデフォルトの値を記録することになります。 この場合は現在の日時を自動で入力するように指示したことになります。 では右下のOKボタンを押してDB(データベース）が作成されました。 … Read more

Windowsに正しくPythonをインストールする方法

by
WindowsにPythonを正しくインストールする方法

今日はWindowsにPythonを正しくインストールする方法を説明します。 Windowsには複数のバージョンのPythonをインストールすることができます。しかし、Windowsの環境変数にどのバージョンのPythonをどの名称で使うようにするか教えてあげないといけないのがかなり面倒になることがあります。この理由から、MacやLinuxを使いやすいと言っている人もいるくらいです。 しかし！一度やり方を覚えてしまえばよいので是非試してください。 Pythonをダウンロードする 下記のPythonの公式リンクからPythonをダウンロードしてください。 もしリンクが怪しいと思った人は自分で検索してpython.orgのサイトからダウンロードしましょう。本題とはそれますがインターネットの脅威を避ける癖はとても重要になります。 https://www.python.org/downloads/ このPythonの公式サイトにいったら、最新のバージョンをダウンロードしましょう。 ちなみにPythonのバージョン２とバージョン３ではシンタックスが違ってきます。つまり、Python2で書かれたコードをPython３で実行するとエラーになることがあるという事です。 Python2は2020年にサポートが終了しているので理由がない限りインストールする必要はありません。 Pythonインストーラーを実行する ではダウンロードしたPythonインストーラーをダブルクリックしてインストールを進めていきましょう。 重要！！！！！ ここで注意してほしいのが”PythonをPATHに登録する”のチェックボックスをクリックしておく必要があることです。 チェックしてください。 これをチェックしないとコマンドプロンプトでpythonのコマンドが使えません。 後から登録することができますが、ちょっと面倒です。 これができたら、Install Nowのボタンからインストールしていきます。 この場合だとWindowsユーザーのProgramsにPythonが保存されるようになります。 管理者の権限を聞かれるのでOKを押してください。 インストールが開始されます。 これでインストールが完了しました。 では、コマンドプロンプトを開いてPythonが使えるか確認してみましょう。 私の場合は英語ですが、これを開きましょう。 ではインストールされたPythonのバージョンが正しいか見てみましょう。 コマンドプロンプトに下記のコマンドを書いてエンターを押します。 私の場合はPythonの3.10.7をインストールしたのに3.10.0が表示されました。 これはすでにPython3.10.0が環境変数に登録されているからです。 もし、今回が初めてのインストールの場合は問題はないと思います。 ちなみにPythonで使うPIP（Pythonのパッケージマネージャー）も一緒にインストールされるのでご安心を。

VueでPiniaを使ってみよう

by

VueではState Management SystemのVuexが公式のプラグインとして紹介されてきました。しかし、最新のVue3ではPiniaを使うようにとVue生みの親のEvan Youさんもお勧めしています。

では、State Management（状態管理）って何でしょうか？

State Management（状態管理）

State Managementとはいわばストレージ/ストア（倉庫）のことです。アプリケーションでストアを作っておいてそこにデータを保管できるようになります。

例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態（例：フォームが提出したとかの状態）があげられます。

PiniaのAPIの使い方

PiniaはVue2でもVue3でも使う事ができます。また、Options API（一般的に初心者向け）でもCompotion APIの書き方でもどちらでも対応しています。私の個人的な意見ではVue3でComspostion APIで書く方法が一番良いと思います。

なぜPiniaなのか

Piniaを使う事でこの状態管理システム（Store Library）を各コンポーネントやページのどこでも使う事ができます。

もちろん、同じことが export const state = reactive({}) でもできますよね。

しかし、このやり方だとセキュリティに脆弱性があり、何を管理しているのか見られてしまう可能性があります。

この他にもデベロッパー用のツールがあったり、サーバー側でもレンダーにも対応することができるなど色々メリットがあります。

Piniaをインストール

npmかyarnのコマンドでインストールしましょう。

yarn add pinia
# or with npm
npm install pinia

※NuxtJSの場合はこちらから

インストールが完了したらmain.jsにPiniaを追加します。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

Piniaのファイルを作成しよう

ではPiniaが追加できたらJSファイルでストアしたいデータを保管できる場所を作っていきましょう。

慣習的にsrcディレクトリの直下にstoreというフォルダを作成してそこにJavaScriptファイルで下記のコードを作るのが一般的になります。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})
  • stateは保管するデータの初期値をリターンするファンクションです。(dataと同じ概念）
  • getters は stateを使ってデータをモディファイ（変更）したいときに使うファンクションです。（copmputedと同じ概念）
  • actionsはasyncにできるファンクションのことです。（methodと同じ概念)

<script setup>的なPiniaの使い方

他のサイトでは上記のやり方でPiniaを使っていますが、今年からVueで使えるようになった<script setup>を使ったやり方に合わせてPiniaも書きたい人は下のやり方をお勧めします。

import { defineStore } from 'pinia'
import { ref } from 'vue';
import EventService from "@/plugins/EventService";

export const useMemberStore = defineStore('member', ()=> {

  const data = ref(null)

  const getData = () => {
    EventService.getMember()
      .then((response) => {
        data.value = response.data;
      })
      .catch((error) => {
        console.log("data:" + error);
      });
  }

  return {
    data,
    getData
  }
})

上のコードを見ても分かるようにgetterとかactionsとかの概念はなく普通のJavaScriptのコードで<script setup>と同じようにVanilla JavaScriptに近い状態で書くこともできます。

個人的にはこちらの方が書きやすいと思ったので是非試してみてください。

ではこれをコンポーネントから読み込めるようにしましょう。

<script setup>

import { useOfficeStore } from "@/stores/members/office";

const officePinia = useOfficeStore();

const officeData = officePinia.data
</script>

このようにどのコンポーネントからでもStoreにアクセスでき、グローバルにデータを管理することで後から見やすくなりますね。

Viteで@/componentsのショートカットが使えない問題

by

ViteでVueのアプリを作成してコンポーネントをインポートしようとすると何か気づいたことはありませんか？

そうです。Vue CLIで作った際に使えていた＠/~のショートカットが使えないです！

なので、毎回コンポーネントをインポートする際にこのように、かなり面倒になってきます。

import Component from '../../../../components/Component.vue'

//本来ならこうしたい。。。
import Component from '@/components/Component.vue'

Viteで@を使えるようにする方法

これはWebPackでついてきたショートカットを再現することで同じように＠が使えるようになります。

では、Viteのコンフィグファイルを作成して、コードを書いていきます。

Viteのコンフィグファイルの書き方

Viteのコンフィグはvite.config.jsの名称でプロジェクトのルート（アプリの一番上の階層）にファイルを作成することでできます。

これで、Viteが読み込む際にこのコンフィグファイルも自動で読み込んでくれます。

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

あとはいつも通りにコンポーネント側で＠を使ってコンポーネントをインポートできるようになります。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Vue UIライブラリのPrimeVueを使ってみよう

by

PrimeVueはVue3に対応したUIライブラリで無料で使えます。

公式サイトはこちらです。

https://www.primefaces.org/primevue/

この会社名はPrimeFacesといい１１名のスタッフで構成されるトルコ（Turkey）の会社です。

会社の利益はテンプレートとライセンス費用で賄っているようです。

PrimeVueの良いところ

コンポーネントの数が半端ではない！！

なんと９０＋以上のcomponentがバンドルに含まれています。

また、デザインのスッキリしていて洗練されているのでそのまま使っても気持ちが良いです。

PrimeVueをインストールしよう

ではコマンドラインからPrimeVueをインストールします。

VueアプリケーションはViteで作成しました。（なのでWebPackは入ってません。）

#バージョンを指定したい場合
npm install primevue@^3.15.0 --save

#最新のものをインストールする場合
npm install primevue

#コンポーネントで使うアイコンのインストール
npm install primeicons --save

下記のようにpackage.jsonを見ると、インストールしたprimevueとprimeiconsが記載されデペンデンスィー：dependencies（依存されたモジュール）に追加されたことが分かります。

{
  "name": "crm-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "vue": "^3.2.25",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

main.jsにprimeVueを追加

次にmain.jsにPrimeVueを追加してアプリがマウントする際にこのライブラリを読み込ませるようにしましょう。

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';

const app = createApp(App);

app.use(PrimeVue);
app.mount("#app");

グローバルにコンポーネントを登録

PrimeVueのcomponentをグローバルで使用したい場合は下記のように設定します。

まずは、main.jsに使いたいコンポーネントを登録します。

例で例えるとButtonになります。それからapp.componentメソッドでテンプレートで使いたい名称とインポートするコンポーネント名を指定します。

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';

import Button from 'primevue/button';

const app = createApp(App);

app.use(PrimeVue);
app.component('Button', Button );
app.mount("#app");

この後に例えばApp.vueで下記のように<Button/>をテンプレートに記載するだけで使えるようになります。

<template>
　<Button label="Disabled" disabled="disabled" />
  <Button label="Submit" icon="pi pi-check" iconPos="right" />
</template>

コンポーネントにインポートする場合

では、グローバルではなく、それぞれのcomponentにPrimeVueのコンポーネントをインポートしたい場合は下記のようにします。

例でいうと、子コンポーネントのHwlloWorld.vueに使いたいPrimeVueのコンポーネントをインポートします。

<script setup>
import Calendar from 'primevue/calendar';
</script>

<template>
  <Calendar v-model="value" />
</template>

CSSをインポートする

ここで気が付いたかもしれませんが、スタイルが入っていませんね。

では、CSS、アイコン、それとテーマをインポートしましょう。

これをmain.jsに追加してください。

import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/luna-blue/theme.css'

ちなみにテーマはluna-blueでインポートしてますが実際には下記のように無料で使えるテーマがあるので色々試してみてください。

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/tailwind-light/theme.css
primevue/resources/themes/fluent-light/theme.css
primevue/resources/themes/lara-light-indigo/theme.css
primevue/resources/themes/lara-dark-indigo/theme.css
primevue/resources/themes/lara-light-purple/theme.css
primevue/resources/themes/lara-dark-purple/theme.css
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css
primevue/resources/themes/saga-purple/theme.css
primevue/resources/themes/vela-blue/theme.css
primevue/resources/themes/vela-green/theme.css
primevue/resources/themes/vela-orange/theme.css
primevue/resources/themes/vela-purple/theme.css
primevue/resources/themes/arya-blue/theme.css
primevue/resources/themes/arya-green/theme.css
primevue/resources/themes/arya-orange/theme.css
primevue/resources/themes/arya-purple/theme.css
primevue/resources/themes/nova/theme.css
primevue/resources/themes/nova-alt/theme.css
primevue/resources/themes/nova-accent/theme.css
primevue/resources/themes/nova-vue/theme.css
primevue/resources/themes/luna-amber/theme.css
primevue/resources/themes/luna-blue/theme.css
primevue/resources/themes/luna-green/theme.css
primevue/resources/themes/luna-pink/theme.css
primevue/resources/themes/rhea/theme.css

これで下記のようにスタイルが追加されましたね。

では、半端ない数のコンポーネントを楽しんでください。

今日使ったコードはGitHubにあるので見てください。

https://github.com/TraitOtaku/PrimeVue-Sample-Components