OSS まとめてみました!

個人的に面白いと思ったオープンソースソフトウェア(OSS)をまとめてみました!

MENU

GUI 上で Python ファイルを exe ファイルに変換したいと思っている方へ!「Auto PY to EXE」

概要

Python を普段使用している方にとって、一度は作成した Python ファイルを exe ファイルに変換したいなと思ったことはあると思います。

ただし、一口で Python ファイルを exe ファイルに変更するといっても、以下のようにメリット・デメリットがあるので、まずはそちらについて把握することが大切ですので、一通り確認しておくことをおすすめします。

Python ファイルを exe ファイルに変換することのメリット

一般的に、Python ファイルを exe ファイルに変換することで得られるメリットは以下の 3 点があると考えられます。

  1. Python をインストールしていない PC でも実行することが可能
    • こちらが最大のメリットとして考えられ、Python の環境を準備しなくても実行することが可能
  2. マウス操作(ダブルクリック)で実行することが可能
    • python コマンドを打たずにダブルクリックのみで実行することができるため、プログラミングを学んだことのない人も実行することが容易
  3. ファイルにアイコンを設定することが可能
    • 本来はプログラムファイルはすべて拡張子を表すアイコンが表示されますが、exe ファイルの場合、好きなアイコンに設定変更することが可能

Python ファイルを exe ファイルに変換することのデメリット

一般的に、exe ファイル化によるデメリットは以下の 2 点かと考えられます。

  1. exe ファイルを作成した OS 以外では実行することができない
    • Windows で作成した exe ファイルは Windows でしか、MacOS で作成した exe ファイルは MacOS でしか実行することができない
  2. exe 実行用の必要ファイルが多くなる可能性
    • Python ファイル自体は 1 つだけでも、exe ファイルをビルドした開発環境内にあるライブラリを全てまとめて取り込んでしまうため、本来実行に必要のないライブラリまでも取り込んでしまい、ファイルが多くなる場合がある

まずは皆さんには、Python ファイルを exe ファイルに変更するには上記のメリット・デメリットがあることを把握しておいてください。

そして、Python にはすでに Python ファイルを exe ファイルに変換することができるライブラリも用意されていて、有名どころは「PyInstaller」でしょうか。

github.com

こちらの場合、コマンドライン上で Python ファイルを exe ファイルに変更することが可能ですが、今回紹介したいのはさらにもう一歩踏み込んで、GUI 上で Python ファイルを exe ファイルに変更する OSS を紹介しようと思います。

それが「Auto PY to EXE」になります。

Auto PY to EXE では Python ファイルを GUI じょうで選択して、exe ファイルに変換できるのでより直感的に操作することができます!

それでは早速使い方などについてみてみましょう。

利用手順

事前準備

利用には Python 3.6~3.10 が端末にインストールされていることが必要です。

もしインストールされていない場合は、以下からインストールしてください。

www.python.org

インストール方法

以下 3 つの方法がありますので、各自に合った方法でインストールしてください。

PyPl 経由でのインストール

以下のコマンドを利用してインストールしてください。

$ pip install auto-py-to-exe

また、実行方法は以下のコマンドを利用してください。

$ auto-py-to-exe

GitHub 経由でのインストール

以下のコマンドを利用してインストールしてください。

$ git clone https://github.com/brentvollebregt/auto-py-to-exe.git
$ cd auto-py-to-exe
$ python setup.py install

また、実行方法は以下のコマンドを利用してください。

$ auto-py-to-exe

GitHub 経由でローカル実行(実インストールなし)

以下の手順に沿って、端末にインストールすることなしに実行することができます。

  1. リポジトリのクローン/ダウンロード
  2. コマンドプロンプト、またはターミナルを開き、プロジェクトディレクトリ配下に移動します
  3. 以下のコマンドを実行して、必要なライブラリを取得します。

    python -m pip install -r requirements.txt
    

実行する際は、以下のコマンドを利用してください。

$ auto-py-to-exe

使用感

実際に私もインストールして使用してみました。

README を見ると以下の手順が記載されていましたので、私もそれに従って実行してみました。

  1. exe ファイルに変換したいPython ファイルを「Script Location」で設定します(ファイルを張り付けるか、エクスプローラーを使用します)
  2. オプションを設定し、アイコンやほかのファイルなどの有無をなどを指定します
  3. 変換するには画面下部の青いボタン「CONVERT PY TO AUTO」を選択します
  4. 完了したら、/output などに出力されたファイルを確認します

今回自分が変換した Python は以下のような簡単なものです(ファイル名は helloworld.py としました)。

# helloworld.py
print("Hello, World!")
print("Enter キーを入力して終了します")
input()

こちらについて以下のように Auto PY to EXE をセットして、exe ファイルに変換しました。

すると以下のように helloworld.exe ファイルが作成されていることが確認できます。

実際に exe ファイルを実行してみましたが、以下のように実行することができました。

ここではデフォルトの設定を使用して Python ファイルを exe ファイルに変換してみましたが、Auto PY to EXE ではいろいろなオプションを設定することができます。

もう少し応用的な使い方をしたい方は、ぜひこちらを参照してみてください。

まとめ

今回は GUI 上で Python ファイルを exe ファイルに変更する OSS「Auto PY to EXE」を紹介しました。

Python ファイルを 簡単に GUI 上で exe ファイルに変換することができるので、返還をお考えの方は是非一度試し見てはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

Rust で作成された kakoune/neovim に触発されたエディタ!「Helix」

概要

今回は、kakoune エディタや neovim エディタに触発され、今注目のプログラミング言語 Rust で作成されたモダンなテキストエディタ「Helix」を紹介します。

kakoune.org

neovim.io

この Helix エディタの特徴としては以下の点が挙げられています。

  • Vim のようなモーダル編集が可能
  • 複数カーソル使用による同時コード編集可能
  • 言語固有のオートコンプリート機能、IDE 機能が利用可能、など

それでは早速使い方などについてみていきましょう!

利用手順

Helix は様々なディストリビューションで利用することができます。

詳細は以下のインストールドキュメントを確認し、各自に合った方法でインストールを行ってください。

docs.helix-editor.com

ここではソースコードからビルドして利用する方法について紹介します。

以下のコマンドを利用してリポジトリをクローンし、Rust でビルドを行ってください。

git clone https://github.com/helix-editor/helix
cd helix
cargo install --path helix-term

MacOS の場合は、以下のコマンドから Helix をインストールすることができます。

brew tap helix-editor/helix
brew install helix

ビルドが完了すると、$HOME/.cargo/binWindows だと C:\Users\XXXXXXXX\.cargo\bin)に hx が作成されますので、Helix を利用する際は、こちらの hx を起動してください。

コマンドラインなどから直接 Helix を起動したい場合は、PATH を通すと良いでしょう。

使用感

実際に自分も Helix を導入してみました。

テキストエディタの背景がデフォルトで紫というのがなんとも落ち着いていいですね。

使い心地としては、neovim のように使えるなーという印象でしたが、もう少し深く理解することで Helix のうまみがわかるかもしれません(私は neovim との違いなどのうまみなどを、強く理解することができませんでした。すみません。。)。

ただ、シンプルで使いやすそうな印象を受けたのと、デザインもおしゃれで今後は積極的に使っていきたいと思えるエディタだなと思いました。

今回は詳細な使い方までは説明できませんでしたが、より具体的な使い方については、以下のドキュメントを確認してください。

docs.helix-editor.com

まとめ

今回は kakoune エディタや neovim エディタに触発され、今注目のプログラミング言語 Rust で作成されたモダンなテキストエディタ「Helix」を紹介しました。

今回は踏み込んだ紹介までいけませんでしたが、neovim などを普段利用されている方などは、一度こちらの Helix エディタを使用してみて、その違いや新鮮味を体験してみてはいかがでしょうか。

ライセンス

Mozilla Public License 2.0

リンク

helix-editor.com

github.com

Vite で Vue3 を使用して開発を開始したい方に!「vue-forge-boilerplate」

概要

JavaScript や TypeScript などモダンなプログラミング言語を使って、Web アプリを開発するぞ!というときにまず考えることは、Vue を使うか React を使うかということだと思います。

ja.reactjs.org

jp.vuejs.org

私はもっぱら React 派で、プロト開発でも Web ページでもなんでもまずは React または Next.js で開発を開始します。

しかし、Vue を使う方も多くいて、むしろ自分の周りのソフトウェア開発者はほとんど Vue で開発を行っている人が多いです。

ふと自分も Vue について学んでみようと思い、いくつか OSS など情報を漁っていたところ、Vue には 高速で動作するビルドツール Vite というものがあることを知りました。

ja.vitejs.dev

Vite について内容はあまり触れませんが、開発時にはバンドルが不要であるため開発サーバーの起動が早いということや、起動中に修正したソース部分のみをブラウザに反映させるなどの機能があるため、開発体験がとても心地よく高速に開発できるというものです。

せっかくなら、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 ということで開発を開始してみたいと思ったのですが、一からプロジェクトを準備するのは大変だなと思い、GitHub 上の OSS で誰かこのあたりのテンプレートを用意している方はいないかなと探してみたところ、見事いらっしゃいました!

そこで今回紹介する OSS は、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 という開発環境を提供してくれる「vue-forge-boilerplate」を紹介します。

こちらは GitHub から リポジトリをクローンするだけで、Vite を使った Vue3 開発をすぐに行えるというものになります。

さっそく見ていきましょう。

利用手順

以下のコマンドを利用してリポジトリをクローンしましょう。

git clone https://github.com/vueschool/vuejs-forge-boilerplate.git

クローンした後は、リポジトリディレクトリへ移動し、npm install コマンドをして必要な Node モジュールをインストールし、npm run dev コマンドで開発サーバーを起動させて動作確認してみましょう。

cd vuejs-forge-boilerplate
npm install
npm run dev

開発サーバーを起動させ、http://localhost:3000/ へブラウザからアクセスして以下のような画面が表示されたら、動作確認完了です。

使用感

実際に自分もローカル環境で開発サーバーを起動させてみました。

Vite は起動が早いという言われるだけあって、とても速いなと感じました。

その他にも、本リポジトリではルーターの設定がすでにされていたり、Cypress を利用した自動テストの設定・準備もされているので、こちらをクローンするだけですぐにでも Vue3 を利用した開発が行えそうです!

package.json を見てみると、Vite の設定がすでにされているので、特別こちらで何か操作をしなければならないということもなくていいですね。

まとめ

今回は、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 という開発環境を提供してくれる「vue-forge-boilerplate」を紹介しました。

OSS 自体はとてもシンプルですので、Vite を用いた Vue3 開発をこれから始めたい方にとって、こちらの OSS は良いテンプレートになるのではないでしょうか。

私自身も、こちらの OSS を利用してさっそく Vue3 の勉強と Web アプリの開発を始めようと思います!

ライセンス

記載はありませんでした。

リンク

github.com

Python で超簡単におしゃれなグラフを作りたいなら!「Dash」

概要

Python を普段お使いになられている皆さんは、普段グラフを作成するときにどのようなライブラリをお使いでしょうか?

いろんな方がいろんなライブラリを駆使して Python でグラフを作成されていることと思います。

現在使用されているグラフ作成ツールで事足りているという方でも、Python で簡単にグラフを作成してみたいという方にとっても、今回は有益な情報かもしれません。

今回ご紹介する OSS は タイトルにもありますように、Python で超簡単におしゃれなグラフを作成することができる OSS「Dash」です。

Dash は、Python で記述されたモデルに対しクリック操作などを行えるダッシュボードインターフェースを提供するフレームワークで、Python によるデータ分析・解析を行う際に非常に有用なものと説明されています。

また、Dash は Plotly.js、React、Flask の上に構築されており、ドロップダウンやスライダー、グラフなどの最新の UI 要素を分析用の Python コードに直接結び付けることができるので、リアクティブな UI であるとも説明されています。

README によると「初めての Dash アプリを作成するまでに 5 分もかかりません!」とあるので、さっそく公式ドキュメントのチュートリアルに沿って使い方など学んでみましょう!

dash.plotly.com

利用手順

Dash のインストールは以下のコマンドより行えます。

pip install dash

dash.plotly.com

使用感

Dash の動作確認を行うため、以下のソースを app.py という名前で作成し、実行してみました。

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

見事グラフを簡単に描画することができていることが確認できました!

ソース自体も単純ですので、こちらのソースを参考にしながら思い思いのグラフを作成することができそうですね。

また、Dash には「ホットリロード」機能が含まれていて、ソース上で app.run_server(debug=True) を追記することで有効になるそうです。

ホットリロード機能はコード上に変更を加えると、Dash が自動的に変更を検知してブラウザ上で結果が自動更新してくるものなので、UI の修正を行いたいときなどはとても便利です。

さらにチュートリアルを読み進めていくと、Dash の UI を変更する具体的な方法について記載されています。

Dash ではブラウザ上でグラフを表示させる際、ダッシュ HTML コンポーネント dash.html が作成されるようですが、こちらのすべての HTML タグのコンポーネントクラスとすべての HTML の引数のキーワードを指定して、UI を独自にカスタマイズすることができるそうです。

以下のソースを参考にしてみてください。

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd

app = Dash(__name__)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='Dash: A web application framework for your data.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-2',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
$ python app.py

先ほどとは UI が変わっていることを確認できると思います。

上記の例では、html.Div と html.H1components のインラインスタイルを style プロパティで変更した例になります。

html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})

本記事でチュートリアルを追うのはここまで(Hello Dash の部分まで)としますが、公式ドキュメントのチュートリアルページではまだまだ様々なグラフを描画するための方法について説明されていますので、興味のある方は一度ご覧になってみると良いかもしれません。

以下は、Dash でほかにどのようなグラフを作成できるのかの一例を載せておきます。

まとめ

今回は、Python で超簡単におしゃれなグラフを作成することができる OSS「Dash」を紹介しました。

実際に触ってみても、Python 上でとてもきれいなグラフを、少ないソースコードで作成できるため、とても使い勝手が良いなという印象を受けました。

今後 Python でグラフを作成する際は、ぜひこの「Dash」を使って作成しようという気になりました!

「月に 800,000 回ダウンロードされる」というのもうなずける気がしますね。

Downloaded 800,000 times per month, Dash is the original low-code framework for rapidly building data apps in Python, R, Julia, and F# (experimental).

本記事ではチュートリアルの一部で紹介された棒グラフだけしか実際に描画して紹介しませんでしたが、Dash ではそのほかにも様々なグラフを描画することができます。

公式ドキュメントには Dash を使ったグラフ集もあるので、そちらを参考にしながらグラフを作成してみるというのもいいかもしれませんね。

dash.gallery

ライセンス

MIT License

リンク

plotly.com

github.com

MacOS で軽量な Markdown エディタを探しているなら!「MiaoYan」

概要

再びテキストエディタに関する記事になります。

今回は MacOS で利用できる、軽量な Markdown エディタをご紹介します。

それが、「MiaoYan」というものになります。

大きな特徴としては以下のような点が挙げられています。

  • ローカル環境での使用が可能で、セキュリティ周りも整備されており、さらに以下の素晴らしい機能も内包している
    • 構文の強調表示
    • ダークモード対応
    • プレゼンテーションモード
    • ファイルのエクスポート機能
    • 内部ジャンプ機能
    • ドキュメントの自動保管
    • 画像アップロード機能
    • LaTeX 対応、など
  • ミニマリストが好む必要最低限のデザインスタイル
    • フォルダー
    • ファイルリスト
    • エディター
  • Webと比較してパフォーマンスエクスペリエンスがはるかに高速
  • 非常に軽量かつ純粋なエディタで、高速化に役立つ豊富なショートカットキー

MiaoYan の簡単な紹介はこの辺にして、さっそく内容について見ていきましょう。

※ 筆者は Windows ユーザーのため、実際にインストールして動作確認することはできませんでしたので、README に記述している内容などを抜粋して概要などについて説明していきます。

利用手順

インストール方法は 2 パターンあるので、お好みの方法を選択してインストールしてください。

  1. GitHub リリースから最新の MiaoYan.dmg インストールパッケージをダウンロードし、ダブルクリックでインストールする方法
  2. brew コマンド brew install miaoyan --cask でインストールする方法

使用方法

実際に使用するにあたり、以下のコメントがあったのでこちらにも掲載しておきます。

  1. iCloud または ルートディレクトリにフォルダを作成し、MiaoYan の設定を開き、デフォルトのストレージを作成したフォルダに変更することが可能である
  2. MiaoYan の左上にある新しいフォルダのアイコンをクリックし、独自のドキュメントカテゴリフォルダを作成すると使用開始することができる
  3. 同様に、デフォルトのフォントに慣れていない場合は、設定から他の通常のフォントに変更することができる

また、MiaoYan の概要ページにあったように、ショートカットキーの一部について README に記載されていたので、こちらについても以下に掲載しておきます。

※ こちらはほんの一部ですので、その他のショートカットキーについて把握したい場合は README を参照してみてください。

ウィンドウ操作

command + 1:フォルダリストの展開を折りたたむ command + 2:ドキュメントのリストを展開します command + 3:編集状態とプレビュー状態の切り替え command + 4:編集状態とプレゼンテーション状態の切り替え command + option + m:グローバルアクティブ/非表示MiaoYan

ファイル操作

command + d:ドキュメントをコピーする command + r:ドキュメントの名前を変更 command + i:Finderでドキュメントを表示する command + shift + p:ピンドキュメント command + delete:ドキュメントを削除する command + shift + l:自動植字 command + shift + →:単語数などのドキュメント属性を表示します

まとめ

今回は MacOS で利用できる、軽量な Markdown エディタ「MiaoYan」を紹介しました。

私は Windows しか持っていないので今回は実際に試してみることはできなかったのですが、説明を見たところ軽量かつシンプルで使いやすそうな印象を受けました。

最低限の機能は含まれているようなので、MacOS で軽量な Markdown エディタでをお探しの方は、一度こちらの MiaoYan エディタをご検討されてみてはいかがでしょうか。

ライセンス

MIT License

リンク

miaoyan.app

github.com

スマートコントラクトを実装してみたいなら!「Solidity」

概要

近年話題を集めているブロックチェーン

ブロックチェーンとは、一般に「取引履歴を暗号技術によって過去から 1 本の鎖のようにつなげ、正確な取引履歴を維持しようとする技術」のことを言います。

データの破壊・改ざんが極めて困難なこと、障害によって停止する可能性が低いシステムが容易に実現可能といった特徴から、主に銀行業界などに大きな変革をもたらす可能性を秘めているといわれています。

www.zenginkyo.or.jp

上記のようなブロックチェーン技術において、さらに「スマートコントラクト」というワードもよく見かけると思います。

「スマートコントラクト」とは、ブロックチェーン上の概念で、あらかじめ指定されたルールに従ってブロックチェーン上のトランザクション、もしくはブロックチェーン外から取り込まれた情報をトリガーに実行されるプログラムのことを言います。

近年になってますます注目を浴びているこのスマートコントラクトという技術ですが、このスマートコントラクトを効率よく実装するためのプログラミング言語をご存じでしょうか。

それが、今回紹介する OSS 「Solidity」になります。

soliditylang.org

Solidity は、スマートコントラクトを実装するためのオブジェクト指向高級言語として知られています。

C++PythonJavaScript の影響を受けており、静的型付け、継承、ライブラリ、複雑なユーザー定義型などの機能をサポートしています。

概要はこのあたりにしておき、まずは利用方法などについて見ていきましょう。

はじめに

Solidity について学ぶ前に、まずはスマートコントラクトの概念について知っておいたほうが良いということなので、以下 3 つの記事を掘り下げて読むことがおすすめされていました。

また、スマートコントラクトの基本的な内容に慣れてきたら、"Solidity for Example" などを読むことで、言語のコンセプトなどを理解することがおすすめされていました。

参考までに。

利用手順

Solidity をインストールする際には、以下のインストールページを参考に、お好みの環境のものをインストールしてください。

solidity-ja.readthedocs.io

なお、Remix IDE を使用することで、ブラウザ上で直接コードを試すことができるため、今回はそちらを使って Solidity を使用してみようと思います。

remix.ethereum.org

使用感

Remix IDE を使用して、Solidity について簡単に触れてみました。

新しくファイルを作ってみます。

左メニューの「contracts」フォルダの中にファイルを新規作成し、ファイル名は「HelloWorld.sol」とします。

ソースコードは README にある例をそのままコピーしてペーストしました。

ソースを書き終えたら、左メニューの「HelloWorld.sol」を右クリックして「Compile」を選択します。

コンパイルが完了すると、新たに「artifacts」フォルダが作成されるようになります。

その後、左メニューから「DEPLOY & RUN TRANSACTION」の項目を選択し、CONTRACT に「HelloWorld」が選択されている状態で「Deploy」をクリックすると、コントラクトが実際に配備されるようです。

配備されたコントラクトの確認として、「DEPLOY & RUN TRANSACTION」の下にある「Deployed Contracts」を参照してみると、「HELLOWORLD AT 0XXX」と表示されているのが確認できます。

その下にある「helloWorld」というボタンを選択すると、コマンドラインに return で返している Hello, World! の文字が表示されていることが確認できます。

まとめ

今回は、スマートコントラクトを効率よく実装するためのプログラミング言語「Solidity」を紹介しました。

私自身スマートコントラクトに関しては全くの初心者のため、あまり踏み込んだ説明はすることができなかったのですが、Solidity を実際に使用し、Remix IDE で実際に動かすことまでできたので、導入としてはまずまずかなと思っています。

幸いにも、Solidity に関しては日本語のドキュメントも用意されおり、内容もとても親切に記述されていますので、まずはこちらを頼りに Solidity というプログラミング言語について学んでいけたらと思います。

solidity-ja.readthedocs.io

また、スマートコントラクトやブロックチェーンといった技術については、今後トレンドになっていくこと間違いないと個人的には考えているので、これを機に勉強していきたいなと思いました!

皆さんもこれを機にブロックチェーン・スマートコントラクト、さらに Solidity 言語について学んでみてはいかがでしょうか。

ライセンス

GNU General Public License v3.0

リンク

soliditylang.org

docs.soliditylang.org

solidity-ja.readthedocs.io

github.com

本番環境を意識した構成で React アプリを利用したいなら!「Bulletproof React」

概要

Web アプリを作成するとき、皆さんは何のプログラミング言語、何のライブラリ、何のフレームワークを利用していますか?

私の場合、プログラミング言語は TypeScript で、ライブラリだと React、フレームワークだと Next.js といった、もっぱら React 関係を触っています。

React はとても人気のあるライブラリで、とても汎用性がある一方、エンジニアの方次第で何でも自由にできてしまうので、アプリ管理や運用周りはしっかり考えて行う必要があります。

今回は簡単なプロトを作る予定だが、本番環境を意識した構成にしておきたいけど一から考えると大変…といった場合もあるかと思います。

今回はあらかじめ構成などきっちり決められていたり、自動テストを見越した構成がすでにあったほうが嬉しいという方にとっては、今回の記事は朗報かもしれません。

今回は React アプリで本番環境を意識した構成をはじめから提供してくれる OSS「Bulletproof React」を紹介します。

こちらは GitHub からリポジトリをクローンしてくるだけで、本番環境を意識した React の構成が用意されています。

それではさっそく利用手順など見ていきましょう!

利用手順

利用するにあたり、要件を満たしていることが必要です。

  • Node 14+
  • Yarn 1.22+

利用方法は README をなぞるだけですが、以下のコマンドを打って GitHub からリポジトリをクローンしてくるだけです。

git clone https://github.com/alan2207/bulletproof-react.git

github.com

リポジトリをクローンし終えたら、bulletproof-react ディレクトリへ移動し、.env.example.env という名前でコピーし、必要な Node モジュールをインストールします。

cd bulletproof-react
cp .env.example .env
yarn install

Node モジュールのインストールが完了したら、以下のコマンドで動作確認してみましょう!図のような画面が表示されれば成功です!

yarn start

使用感

実際に自分も試してみました!

リポジトリをクローンしてみてフォルダ構成を見てみたのですが、本番環境を意識したと謡っているいるだけあって、とても整理整頓されている感じがしました。

github.com

また、リポジトリ内にはデフォルトで Storybook が用意されていたり、jest の用意がされていたりと、まさに React で Web アプリ開発を行う際に入れておきたいライブラリがたくさんあります。

これまで私は React で Web アプリを作成するときは、いちいち自分でライブラリ選定して導入して動作確認して…という手順を行っていたのですが、こちらの OSS を利用すればそのような煩わしい作業がいらなくなりますね!

そのほかにも、API の扱い方が整理されていたり、エラーハンドリングの設定まで初めから用意されているようなので、しっかり React で Web アプリ開発を行っていきたい方たちにとって、とてもうれしい OSS かと思います。

まとめ

今回は React アプリで本番環境を意識した構成をはじめから提供してくれる OSS「Bulletproof React」を紹介しました。

しっかり本番環境を見据え、React で Web アプリを始めたい方たちにとっては、とても参考になり嬉しい OSS かと思いました。

また、こちらの OSS の構成やどのようなライブラリを利用しているのかを見てみるだけでも、今後の React アプリの開発や運用においてとても役立つと思いました。

自分もまだまだ React を勉強する実ですので、こちらの OSS の構成やライブラリ情報を参考にしながら、さらなる知識を身に着け、よりよいソフトウェアエンジニアとして成長していきたいと思いました。

React で Web アプリを開発しようとしている方にとっても、React のフォルダ構成をどのようにしようか参考にしたい方にとっても、とても有益な OSS かと思いますので、ぜひ一度ご覧になってみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com