2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

pythonでnext.jsウェブアプリを作ってみましょうか。

Last updated at Posted at 2023-04-23

pythonでフロントエンドプログラミングをする?

reactpyのようにpythonコードのjavascript変換の努力はあったけど、今紹介しようとするpyneconeの公式サイトを見ると、それなりに体系が整っているようなので、一度見てみました。

pyneconeはpythonコードを取り込んでReact, NextJSなどで動くインタラクティブなウェブアプリを簡単に作ってくれるフレームワークです。簡単にウェブアプリを数分で作ることができ、配布も簡単で、既存のウェブ開発の柔軟性、性能を適度に備えたlow-codeフレームワークです。

これを作った理由はRedditのpynecone開発陣が投稿した記事によく書いてあります。

We made Pynecone for Python devs who want to make web apps, but don’t want the overhead of having to learn or use Javascript. We wanted more flexibility than existing Python frameworks like Streamlit/Dash that don't allow the user to make real, customizable web apps.

Pyneconeは、ウェブアプリを作りたいが、Javascriptを学んだり、使用しなければならない学習費用を望まないPython開発者のために作りました。私たちは、ユーザーが実際にカスタマイズ可能なWebアプリを作ることができないStreamlit/Dashなどの既存のPythonフレームワークよりも、より多くの柔軟性を求めていました。

pyneconeを使うにはpython3.8以上、node 12.x以上のバージョンが必要です...。

結局pythonコードはjavascriptコードに変換され駆動はnodeを通じてしますが、今はnodeからbunに交換中だそうです(この記事を書いている現在駆動はbunを使います。でもインストールはnodeが必要です)。

nodeをインストールしてpythonがインストールされている場合、

> pip3 install pynecone

でpyneconeを設置します。

設置が終わったらプロジェクトを生成してみましょう。

> pc init

すると、フォルダ名(ここではtest)でプロジェクトが生成されます。

➜  test tree .
.
├── __pycache__
│   └── pcconfig.cpython-311.pyc
├── assets
│   └── favicon.ico
├── pcconfig.py
└── test
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-311.pyc
    │   └── tutorial.cpython-311.pyc
    └── test.py

4 directories, 7 files

まず実行してみましょう。

> pc run

下のようにlocalhost:3000でページが表示されると成功。

스크린샷 2023-04-23 오전 1.14.05.png

次は詳細なコンポーネントについて簡単に説明します。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?