【acorn.jsとVanilla JS】JavaScriptでキーワード(予約語)だけを出力する方法

自分でコードをパース(読み取り)してJavaScriptのメソッドや予約語が使われているか知りたいときに下記のコードを使う事ができるので紹介します。 ライブラリを使わずに予約語を出力する JavaScriptのコードをパースしてキーワードを配列に出力する際に外部のライブラリを使用せずに行いたい場合は、以下のようなアプローチを取ることができます。 下記はファンクションベースで書いた場合です。 上記のコードでは、予約語(キーワード)のリストを用意し、与えられたコードをスペースと特定の記号((、)、{、}、;、,)で分割します。分割されたトークンをループして、予約語のリストに含まれるかどうかをチェックし、キーワードとして抽出します。 同じことをクラスベースで書いた場合はこのようになります。 上記のコードでは、KeywordExtractorというクラスを作成し、コンストラクタで与えられたコードとキーワードのリストをプロパティとして保持します。また、extractKeywordsメソッドを定義してキーワードの抽出処理を実装します。 KeywordExtractorクラスのインスタンスを作成し、extractKeywordsメソッドを呼び出すことでキーワードを抽出できます。 ただし、この方法は単純な文字列マッチングを行っており、コードの文脈によって誤検出する可能性があります。言語の構文やコメントなども考慮する場合には、パーサーライブラリの使用が推奨されます。 Acorn.jsとは Acorn.jsはJavaScriptのパーサーライブラリであり、JavaScriptのコードを解析して抽象構文木(Abstract Syntax Tree, AST)を生成する機能を提供します。これにより、JavaScriptコードの解析や静的解析、ソースコードの変換や検証などのさまざまな用途に利用することができます。 以下にAcorn.jsの主な使い道をいくつか挙げます: これらはAcorn.jsの一般的な使い道ですが、実際にはさまざまな応用が可能です。また、Acorn.jsは軽量で高速なパーサーライブラリであるため、ブラウザやNode.jsなどの環境で広く利用されています。 Acorn.jsの開発者 Acorn.jsは、Marijn Haverbekeによって開発されました。Marijn Haverbekeは、プログラミング言語JavaScriptの教育用書籍『Eloquent JavaScript』の著者でもあります。Acorn.jsは、JavaScriptのパーサーとして広く使用されており、ECMAScript(JavaScriptの標準仕様)に準拠しています。 Acron.jsを使ってJavaScriptの予約語を出力する Acron.jsはオープンソースでGitHubからソースコードを見てみましょう。 では下記のコマンドでacron.jsをインストールしましょう。 では下記の様に、import文でモジュールとして使用する方法を紹介します。 修正したコードでは、import文を使用してacornモジュールをインポートし、その後のコードでacornを直接使用しています。また、acornパッケージのデフォルトエクスポートをacornとしてインポートしています。 この修正版のコードは、ESモジュールとしてブラウザ環境や対応する環境で使用することができます。ただし、ブラウザ環境で使用する場合は、acornのブラウザ向けのバージョンを読み込む必要があります。ブラウザ環境での具体的な設定方法については、acornのドキュメンテーションを参照してください。 Acorn.jsの強み Acorn.jsを使用する場合、JavaScriptの予約語(キーワード)をパースする際に、自作のライブラリと比べて以下のようなメリットがあります: 自作のライブラリと比べて、Acorn.jsは信頼性、安定性、拡張性、パフォーマンス、エコシステムなどの面で利点があります。また、JavaScriptのパースにおいては、正確で標準に準拠した処理が重要となるため、Acorn.jsの使用は推奨されます。 ASTとは AST(Abstract Syntax Tree)は、プログラミング言語のソースコードの構文構造を表現する木構造のデータ構造です。ASTは、ソースコードの解析や処理を容易にするために使用されます。 ASTは、ソースコードを構成するトークンや式、文、関数などの要素をノードとして表現します。ノードは親子関係で結びつき、構文的な意味や階層構造を反映します。 ASTのノードは通常、プログラミング言語の構文要素に対応しています。たとえば、変数宣言や関数呼び出し、演算子の使用など、ソースコード内のさまざまな構造がノードとして表現されます。 ASTは通常、パーサーと呼ばれるツールやライブラリを使用して生成されます。パーサーは、ソースコードを入力として受け取り、その構文を解析してASTを生成します。ASTは、コンパイラや静的解析ツール、コード変換ツールなどで使用され、ソースコードの解析や処理を行います。 ASTを使用することで、ソースコードの構造や意味を効率的に理解し、コードの解析、変換、検証、リファクタリングなどのさまざまな処理を行うことができます。また、ASTは言語に依存せずに構文解析を行うため、さまざまなプログラミング言語に適用できる汎用的な手法です。

【React・Vue】Ionicでモバイルアプリを作ろう

Ionic 基本

Ionicの特徴について説明しているので先に前回の記事を読んでおいてください。 また、今回の記事はVueフレームワークの基本が理解できている前提で説明します。 今日の目的 Ionicを使用してデモプロジェクトの作成しiOSとAndroidのネイティブアプリにコンパイルしてみます。 今日はVueを使って紹介しますがReactやAngularも同じ要領でできます。 Ionic Vue概要 @ionic/vueは、Vue開発者向けに調整されたツールとAPIを組み合わせた、コアIonic Frameworkのエクスペリエンスを提供します。 Vueバージョンのサポート Ionic VueはVue 3.0.0をベースにしています。もし以前のバージョンのIonic Vueでアプリを作成している場合は、最新リリースにアップグレードし、Vueの依存関係もアップグレードする必要があります。 Vueツール Ionic Vueプロジェクトは通常のVue CLIプロジェクトと同じツールを使用します。つまり、Vue CLIとその機能を使用してビルドします。さらに、スタータープロジェクトにはデフォルトでいくつかの機能が有効になっています。例えば、ルーティングやTypeScriptのサポートなどです。 ネイティブツール Capacitorは公式のクロスプラットフォームのアプリランタイムであり、Ionic VueのウェブアプリをiOS、Android、Webでネイティブに実行します。 Cordovaプラグインを使用する際のIonic Vueの技術的な制約は特に知られていませんが、公式にはCapacitorが推奨されています。現時点では、Ionic CLIのツールではIonic VueのCordova統合をサポートする予定はありません。 Ionicをインストール では下記のコマンドでionicのプロジェクトをセットアップしましょう。myAppはプロジェクト名になりますので自身で好きなものに変えてください。 tabsはテンプレートのフラグになり、vue-routerで設定されたページごとのURLが付いてきます。 ではionic serveのコマンドでローカルホストにデモのアプリが起動されたことを確認しましょう。 ファイル構成 Ionic Vueの一般的なファイル構成は以下のような形式です: このようなファイル構成によって、Ionic Vueアプリケーションはコンポーネントベースのアーキテクチャを活用し、使いやすく保守しやすい構造を実現しています。 capacitorとは Ionicをインストールするとcapacitor(キャパシター)というライブラリが一緒についてきます。 Capacitorは、ウェブ技術(HTML、CSS、JavaScript)を使用して作成したアプリケーションをネイティブアプリケーションとして実行するためのオープンソースのクロスプラットフォームツールです。 Capacitorは、Ionicフレームワークの開発チームによって開発され、Ionicアプリケーションをネイティブに実行するための代替手段として提供されています。Ionicアプリケーションは、一度作成することでiOS、Android、Webなど複数のプラットフォームで動作させることができます。 Capacitorの特徴としては、以下の点が挙げられます: Capacitorは、ハイブリッドアプリケーションやクロスプラットフォーム開発に興味がある開発者にとって、強力なツールとなっています。Ionic Vueなどのフレームワークと組み合わせることで、使いやすいUIとネイティブ機能を組み合わせたアプリケーションを開発することができます。 IonicとCapacitor 上記までをまとめます。Ionicはモバイル用のコンポーネントで、capacitorが実際にWebアプリケーションをモバイルアプリにコンパイルしてくれるツールになります。ちなみにどちらのライブラリも同じ組織によって管理されており、両方を使ってモバイルアプリを作ることが一般的です。しかしcapacitorだけでモバイルアプリを作成することも可能であることは理解しておきましょう。 アプリのビルド 下記のコマンドで実際にデモのアプリをモバイルアプリとして出力してみましょう。 ionic build このコマンドは、Ionicアプリケーションのビルドプロセスを実行します。アプリケーションのソースコードやリソースをコンパイルし、必要なファイルを生成します。ビルドが完了すると、distディレクトリにアプリケーションのビルド結果が出力されます。このディレクトリには、最適化されたHTML、CSS、JavaScriptファイルなどが含まれます。 ionic cap add ios このコマンドは、iOSプラットフォーム向けのCapacitorプロジェクトを追加します。Capacitorを使用してIonicアプリケーションをiOSネイティブアプリケーションにビルドするために必要なファイルと設定を生成します。実行すると、iosディレクトリが作成されます。 … Read more

Postmanを使ってみよう

Postmanとは Postman(ポストマン)は、API開発およびテストのための人気のあるツールです。Postmanは、Web APIやRESTful APIなど、さまざまな種類のAPIを作成、テスト、およびドキュメント化するための機能を提供します。 主な機能としては以下があります: Postmanは、API開発者、フロントエンド開発者、テストエンジニア、API消費者など、さまざまな役割の人々にとって非常に便利なツールです。使いやすいインターフェースと豊富な機能セットにより、APIの作成、テスト、および共有を容易に行うことができます。また、Postmanはクラウドベースの共有プラットフォームも提供しており、チームでの協力やAPIの共有が簡単に行えます。 Postmanの無料サービス Postmanには無料プランと有料プランの両方があります。 無料プランでは、基本的な機能を利用することができます。これには、APIの作成とテスト、環境の管理、コレクションの共有などが含まれます。また、一定の制限内で使用できるリクエスト数やストレージ容量があります。 一方、有料プランでは、追加の機能や制限緩和が提供されます。有料プランには個人向けプランやチーム向けプランがあり、エンタープライズ向けのカスタムプランも提供されています。有料プランには、高度な機能(モックサーバー、APIモニタリング、自動化など)や優れたサポート、拡張されたリクエスト数やストレージ容量などが含まれます。 Postmanの料金体系は定期的に更新される場合がありますので、最新の情報を確認するためにPostmanの公式ウェブサイトや料金ページを参照することをお勧めします。また、特定の要件やビジネスニーズに合わせたカスタムプランの相談も可能です。 Postmanのアカウントを作成 Postmanのアカウントを作成する手順は以下の通りです: これで、Postmanのアカウント作成が完了しました。アカウントにログインすると、APIの作成、テスト、ドキュメントの作成、チームでの共有など、さまざまな機能を利用できます。 HTTPリクエストを送るまでの手順 HTTPリクエストを送るための基本的な手順は以下の通りです: 上記の手順に従って、HTTPリクエストを送信し、サーバーからのレスポンスを受け取ることができます。実際の開発では、各プログラミング言語やツールに応じて、HTTPライブラリやフレームワークを使用してリクエストを作成し送信することが一般的です。 HTTPリクエストを使ってみる 以下は、Postmanを使用してCRUD(Create, Read, Update, Delete)操作を行うための参考URLです。これらのリソースはPostman公式のドキュメントやチュートリアルで提供されています。 これらのリソースには、Postmanの基本的な操作方法やリクエストの作成、パラメーターの設定、レスポンスの確認などに関する詳細な情報が含まれています。チュートリアルでは、具体的な例を使って手順を実践的に学ぶことができます。 これらのリソースを活用することで、Postmanを使用してCRUD操作を行うための基礎を習得できます。また、Postmanコミュニティや公式フォーラムにも参加することで、他のユーザーとの知識共有や質問の投稿もできます。 無料でアクセスできるRESTAPIのエンドポイント 無料でユーザー登録なしでアクセスできるREST APIのエンドポイントの一例をいくつか紹介します。 Getリクエストを試す 以下は、Postmanを使用してサードパーティのURIエンドポイントにGETリクエストを送信する手順です: ローカルホストのエンドポイントのテスト Postmanはウェブ上でもデスクトップアプリケーションでも利用できます。どちらのオプションも非常に似たユーザーインターフェースを持っていますが、ウェブアプリではlocalhostのAPIをテストすることはできませんので、ご注意ください。 まとめ Postmanの使用によって、以下のことを学ぶことができます: Postmanは非常に柔軟で強力なツールであり、APIの開発プロセスにおいてテスト、デバッグ、ドキュメンテーション、モックサーバーの作成など、さまざまな側面で役立ちます。

【Python】PyMuPDFライブラリを使おう

Python_PyMuPDF

PyMuPDFとは PyMuPDFは、Python向けのオープンソースのライブラリであり、PDF文書の操作や処理を行うために使用されます。PyMuPDFは、MuPDFという高性能なPDF処理エンジンを基にしており、Pythonから直接アクセスできるようになっています。 PyMuPDFを使用すると、以下のようなことが可能です: PyMuPDFは高度なPDF処理機能を提供するため、PDFの操作や処理が必要なプロジェクトで便利に利用されます。 PyMuPDFの開発者は誰? PyMuPDFは、Artifex Software Inc.という企業が開発しました。Artifex Softwareは、MuPDFと呼ばれる高速なPDF処理エンジンの開発元でもあります。PyMuPDFは、MuPDFの機能をPythonから利用できるようにするために、Artifex Softwareによって開発・メンテナンスされています。 PyMuPDFをインストールする PyMuPDFライブラリをインストールするためには、以下の手順に従ってください: なお、PyMuPDFはMuPDFのバイナリ依存関係を持つため、インストール時には適切なバイナリが自動的にダウンロードされます。ただし、一部のプラットフォームではバイナリが提供されていない場合があります。その場合は、別途MuPDFのバイナリを手動でインストールする必要があります。 また、PyMuPDFのインストールには依存関係がある場合がありますので、必要な追加パッケージがインストールされていることを確認してください。一般的には、Pythonの開発環境には必要なパッケージがすでに含まれていますが、エラーが発生した場合は公式ドキュメントを参照してください。 以上の手順に従ってPyMuPDFライブラリをインストールすると、PythonプロジェクトでPDFの操作や処理を行うことができるようになります。 PyMuPDFで使えるメソッド PyMuPDFライブラリには、PDFの操作や処理に使用できる多くのメソッドがあります。以下にいくつかの一般的なメソッドを紹介します。 これらは一部の一般的なメソッドの例です。PyMuPDFでは、PDFの描画、注釈の追加、フォームの操作、PDFの結合や分割など、さまざまな操作が可能です。 PDFからテキストを抽出する 以下は、PyMuPDFライブラリを使用してPDFファイルからテキストを抽出する簡単なPythonプログラムの例です。 上記のプログラムでは、fitzモジュールを使用してPDFファイルを開き、各ページからテキストを抽出しています。extract_text_from_pdf関数は、PDFファイルのパスを引数として受け取り、抽出されたテキストを文字列として返します。 pdf_path変数には実際のPDFファイルのパスを指定してください。プログラムを実行すると、PDFファイルから抽出されたテキストが表示されます。 プログラムは下記のコマンドで実行してください。 この例は、PyMuPDFを使用して基本的なPDFテキスト抽出を行うものです。PyMuPDFには他にも多くの機能があり、PDFの描画や注釈の追加など、さまざまな操作が可能です。 PyMuPDFをしたアプリの例 以下に、PyMuPDFを使用したアプリケーションのアイディアをいくつか挙げます: これらはいくつかの例ですが、PyMuPDFは柔軟で高機能なライブラリであり、PDF処理に関連する多くの領域で利用されています。実際のアプリケーションでは、これらの機能を組み合わせて独自のユースケースに合わせた機能を開発することができます。

【Python】Flaskを始めよう

Flaskを始めよう

Flaskとは Flaskは、Pythonで開発された軽量なWebアプリケーションフレームワークです。Webアプリケーションの構築を容易にするために設計されており、シンプルさと柔軟性が特徴です。 Flaskは、HTTPリクエストを受け取り、レスポンスを返すためのルーティングやビューを定義することができます。また、テンプレートエンジンを使用して動的なコンテンツの生成や、データベースとの連携、セッション管理など、一般的なWebアプリケーション開発に必要な機能を提供します。 Flaskの特徴の一つは、軽量かつシンプルな設計です。これにより、開発者は必要な機能を選択し、カスタマイズすることが容易になります。また、Flaskは拡張性が高く、多くのサードパーティ製拡張モジュールが利用可能です。これにより、データベース処理、認証、API開発など、さまざまな機能を追加することができます。 Flaskは人気のあるWebフレームワークであり、小規模なプロトタイプや中規模なアプリケーションの開発に適しています。また、FlaskはPythonのエコシステムともシームレスに連携することができるため、Pythonの豊富なライブラリやツールを活用することができます。 総じて言えば、Flaskはシンプルさと柔軟性を重視したPythonのWebフレームワークであり、Webアプリケーションの開発を迅速かつ効率的に行うためのツールです。 Flaskのインストール Flaskを始めるためには、以下の手順に従ってインストールを行う必要があります。 macOS/Linux(Bashシェルを使用する場合): Flaskのインストール: 仮想環境をアクティベートした場合は、コマンドラインで以下のコマンドを実行してFlaskをインストールします: Flaskはデフォルトでローカルホスト(http://127.0.0.1:5000/)でアプリケーションを実行します。Webブラウザを開き、このURLにアクセスすると、”Hello, World!” と表示されるはずです。 これで、Flaskのインストールと初めてのアプリケーションの作成・実行が完了しました。 FlaskにHTMLを使ったテンプレートを作成する方法 Flaskでは、HTMLを使ったテンプレートを作成することができます。以下の手順に従って、FlaskでHTMLテンプレートを作成する方法を説明します。 これで、FlaskでHTMLテンプレートを作成し、動的なコンテンツを表示することができます。テンプレート内では、フローティング変数、条件分岐、ループなどの制御構造を使用して、より複雑なテンプレートを作成することも可能です。FlaskのテンプレートエンジンにはJinja2が使用されているため、Jinja2の文法と機能を学ぶことも有用です。 if __name__ == ‘__main__’: if __name__ == ‘__main__’: と app.run() の組み合わせは、Pythonスクリプトが直接実行される場合にのみ、Flaskアプリケーションを実行するための一般的なパターンです。以下に詳細を説明します。 Pythonのスクリプトファイル(.pyファイル)は、他のスクリプトやモジュールからインポートされることもありますが、また、直接実行されることもあります。 if __name__ == ‘__main__’: は、Pythonインタプリタが現在実行しているスクリプトがエントリーポイント(直接実行されるファイル)である場合に条件が真となります。一方、他のスクリプトからインポートされた場合は条件が偽となります。 app.run() は、Flaskアプリケーションを起動するためのメソッドです。FlaskがローカルのWebサーバーを立ち上げ、アプリケーションを実行します。通常、app.run() はFlaskアプリケーションを実行するために必要な一行のコードです。 組み合わせると、if __name__ == ‘__main__’: ブロック内に app.run() を配置することで、Pythonスクリプトが直接実行された場合にのみ、Flaskアプリケーションが実行されるようになります。他のスクリプトからインポートされた場合には、app.run() は実行されず、アプリケーション自体は起動されません。 このパターンは、Flaskアプリケーションを開発しているときに便利です。開発中に、他のスクリプトからアプリケーションをインポートしてテストしたり、モジュールとして再利用することができますが、同時にスクリプト単体として実行して動作を確認することもできます。 templatesに作成したindex.htmlにCSSとJavaScriptのファイルを追加する Flaskのテンプレート内にCSSファイルやJavaScriptファイルを追加するには、以下の手順に従ってください。 {{ url_for(…) }} は、Flaskのテンプレート内で静的ファイルのパスを生成するための特殊な構文です。これにより、正しいファイルパスが生成されます。 これで、index.htmlテンプレートにCSSファイルとJavaScriptファイルが追加されました。Flaskはこれらの静的ファイルを自動的に探し、リンクやスクリプトとして適切に読み込みます。Webブラウザでアプリケーションを実行すると、CSSが適用され、JavaScriptが実行されるはずです。

try…catchの使い方

javascript-try-catch

制御構文とは 制御構文(Control structures)は、プログラムの実行フローを制御するための構文や文の集まりです。プログラムは通常、順次実行されるため、制御構文を使用することで条件に応じて処理を分岐させたり、ループを実行したりすることができます。 一般的な制御構文には以下のようなものがあります: これらの制御構文を使用することで、プログラムの実行フローを柔軟に制御し、条件に応じた処理や反復処理を行うことができます。制御構文は、プログラムの構造化と効率的な実行を実現するために重要な役割を果たしています。 tryとcatchの使い方 try はメソッドではなく、エラーハンドリングを行うための制御構文です。以下に、try の説明を記載します。 try は JavaScript の try…catch 文によって使用される制御構文です。try ブロック内にはエラーが発生する可能性のあるコードを配置し、エラーが発生した場合には制御が catch ブロックに移行します。try ブロック内のコードが実行され、エラーが発生しなければ catch ブロックはスキップされます。 以下に、基本的な try…catch 文の構文を示します。 try ブロック内のコードが実行され、エラーが発生しない場合は、catch ブロックはスキップされます。エラーが発生した場合、例外オブジェクトが catch ブロックに渡され、エラーハンドリングが行われます。 try…catch 文を使用することで、予期せぬエラーに対する適切な処理やエラーメッセージの表示、代替処理の実行などが可能となります。ただし、try…catch 文は例外処理のためのメカニズムであり、パフォーマンスの面でコストがかかる場合があるため、必要な場所で適切に使用することが重要です。 try…catchの例 以下に、try…catch 文を使用したエラーハンドリングの例を示します。 この例では、divide 関数内で引数 b が 0 の場合に例外をスローしています。try ブロック内のコードが実行され、例外がスローされると、制御は catch ブロックに移行し、エラーメッセージが表示されます。 try ブロック内でエラーが発生しない場合は、catch ブロックはスキップされます。 try…catch 文を使用することで、プログラムの実行中にエラーが発生しても、エラーメッセージを表示して処理を継続することができます。 try…catch 文と fetch() 以下に、try…catch 文と fetch() … Read more

axiosを使ったHTTPリクエストの書き方

JavaScript Axiosの使い方

axiosとは axiosは、JavaScriptで使用されるHTTPクライアントライブラリです。主にブラウザとサーバーの間でデータを送受信するために使用されます。axiosはPromiseベースのAPIを提供し、非同期でHTTPリクエストを行うことができます。 axiosを使用すると、GET、POST、PUT、DELETEなどのさまざまなHTTPメソッドを使ってリクエストを送信し、サーバーからのレスポンスを取得することができます。また、リクエストやレスポンスのヘッダーの設定、データの送信、認証の追加など、さまざまなHTTP操作を容易に行うことができます。 axiosは、ブラウザ環境だけでなく、Node.js環境でも使用することができます。これにより、フロントエンドとバックエンドの両方で同じコードを使用してHTTP通信を行うことができます。 axiosは非常に人気のあるライブラリであり、シンプルで使いやすいインターフェースを提供しています。そのため、多くの開発者がaxiosを選択し、JavaScriptプロジェクトでHTTP通信を行うために使用しています。 axiosのインストール axiosをインストールするには、以下の手順を実行します。 これでaxiosがインストールされました。 Node.jsの場合、npm install axiosコマンドを実行すると、プロジェクトのnode_modulesディレクトリにaxiosがインストールされます。その後、requireもしくはimportステートメントを使用してaxiosを使用することができます。 ブラウザの場合、axiosのCDNを使用すると、ブラウザでaxiosを直接利用することができます。CDNを使用する場合、axiosはグローバルオブジェクトaxiosとして利用可能になります。 axiosの基本的な書き方 では、JSONPlaceholderというテスト用のフェイクAPIを使用してサンプルのコードを書いていきましょう。 POSTリクエストの例: これらのコードは、axiosを使用して非同期のHTTP通信を行う基本的な例です。GETリクエストとPOSTリクエストのそれぞれの場合に、レスポンスデータを取得するためのコールバック関数が指定されています。 コードを綺麗に書くために まずは、このコードを見てください。 axiosを使う際には必ずしもasyncを使用する必要はありません。axios自体はPromiseベースの非同期処理をサポートしており、.then()と.catch()メソッドを使用して非同期なレスポンスを処理することができます。 この例では、.then()メソッドと.catch()メソッドを使用して、非同期処理の結果を取得しています。コールバック関数のネストが深くなるため、コードが読みにくくなります。 しかし、下記のようにasync/awaitを使用することでコードが見やすくなることが分かります。 async/awaitを使用することで、非同期処理のフローがフラットになり、読みやすくなります。エラーハンドリングもtry…catchブロック内で一箇所にまとめることができます。 上記のコードをasync/awaitを使った例: ですので、axiosを使用する際には、asyncキーワードを必ずしも使用する必要はありません。async/awaitを使用するか、.then()メソッドを使用するかは、コードの可読性やスタイルに合わせて選択することができます。 カスタムヘッダーとは HTTPリクエストを送る際、上記のPOSTでサーバーに送るデータはHTTPリクエストのボディに追加しています。また、HTTPリクエストにはヘッダーという箇所があり、承認の際に使用するトークンなどを付属させることができます。 以下は、axiosを使用してHTTPリクエストのヘッダー処理をするためのサンプルコードです。 上記のコードでは、axios.get()およびaxios.post()メソッドの第二引数として、オプションのオブジェクトを渡しています。このオブジェクト内のheadersプロパティを使用して、カスタムヘッダーを設定します。 例えば、Authorizationヘッダーにはトークンを指定し、Content-Typeヘッダーにはリクエストのコンテンツタイプを指定しています。これらのヘッダーはAPIの要件に合わせてカスタマイズすることができます。 このように、headersプロパティを使用してヘッダーを設定することで、axiosを使ってHTTPリクエストのヘッダー処理を簡単に行うことができます。 Bearerとは 実際に認証トークンを使い始めるとHTTPヘッダーのAuthorizationの部分にBearerのトークンを付ける機会があると思います。 Bearerは、認証スキーム(Authentication Scheme)の一種です。Bearerスキームは、トークンベースの認証方式の一部として使用されます。 Bearer認証では、APIエンドポイントへのアクセス時にクライアントが認証トークンを提供します。このトークンは、クライアントが認証されたユーザーであることをサーバーに示すために使用されます。 Bearerトークンは、一般的にはOAuthやJSON Web Token(JWT)などのプロトコルや仕様に基づいて生成されます。トークンはクライアントによって保持され、リクエストヘッダーのAuthorizationフィールドにBearerと共にトークンが含まれて送信されます。 例えば、以下はAuthorizationヘッダーのBearerトークンを使ったHTTPリクエストの例です: 上記の例では、Bearerスキームに続いて実際のトークンが含まれています。サーバーはこのトークンを検証し、リクエストを認証して適切な応答を返します。 Bearerトークンを使用することで、APIへのアクセスを制御し、認証されたユーザーのみがリソースにアクセスできるようにすることができます。トークンは一定の期間で有効期限が切れる場合があり、トークンの取得やリフレッシュには対応する認証プロトコルや仕様に基づいた手続きが必要です。 注意点として、Bearerトークンはセキュリティ上の重要な情報であるため、他人に漏らさないように注意する必要があります。また、HTTPSなどのセキュアな通信プロトコルを使用してトークンを送信することが推奨されます。 axiosを使うべきではない場面はあるか axiosは非常に人気のあるHTTPクライアントライブラリですが、特定の場面では使用を控えるべきです。 以上のような場面では、axiosの代わりに他の適切なライブラリや手段を検討することが重要です。選択肢を比較し、プロジェクトのニーズや制約に応じて最適なツールを選ぶことが良い結果を生みます。

【ChatGPT】Vue.jsを使ってAIチャットアプリを作成しよう

ChatGPTを使ってチャットアプリを作ろう

今日はVueフレームワークを使用した簡単なチャットアプリを紹介します。初めてChatGPTを使う人にも分かりやすく基本だけをまとめた簡単なものです。しかし、AIが今までの会話を記憶しているように構築できるので、過去の会話を参考にした質問も可能になります。 もちろん、記録を残したい場合は、別にデータベースなどを作成しないとブラウザがリロードした際にすべて初期化されてしまいます。 完成したコードはGitHubのリポジトリから見てください。 完成したものはこんな感じになります。 先に知っておくべきこと User-Agent エラー 上記の記事で紹介したNodeでChatGDPを使ったCLIではopenaiのライブラリを使いました。しかし、クライアント側で実行できるJavaScriptアプリでnpm i openaiでインストールしたライブラリを使ってOpenAIををコールをかけると下記のエラーが出ます。 これは前回の記事で使用したopenaiライブラリはより安全なNode.jsやPythonなどのサーバー側からのコールを許可したもののみになるからです。 今回はaxiosを使ってコールをかけますが、下記にopenAIのエンドポイントにHTTPリクエストを送るaxiosを使わないサンプルコードを紹介しておきます。 今日の記事では、axiosのライブラリを使って作業をするので自分の好みでコードを変えてください。 Vueのセットアップ ではViteを使ってVueのプロジェクトを作成します。 次にaxiosをインストールします。 では、テキストエディタを開いて、早速コードを書いていきます。 コードを書こう では以下のようにApp.vueにコードを書いていきます。 App.vue 補足: 最後にスタイルを追加して完了です。 アプリの検証とまとめ ではnpm run devのコマンドでアプリを起動してテストしてみましょう。 今日は基本のOpenAI APIの使い方を紹介しました。 OpenAIのAPIを使用すると、さまざまなタスクとアプリケーションを構築できます。以下にいくつかの例を挙げます: このように色々なことに活用できそうなので今後も注目が集まりそうです。

【10分でできる】Node.jsを使ってChatGPTのAPIを使用したチャットCLIを作成

Node.jsでChatGPTを使ってみよう

今日の記事で紹介するChatGPTのAPIキーの取得の仕方はこちらの記事を参考にしてください。 完成したコードはGitHubのリポジトリから見てください。 https://github.com/DanNakatoshi/Node-ChatGPT-CLI 初めに この記事では、Node.jsとChatGPTを使用してチャットアプリケーションを構築する基本的な方法を紹介します。Node.jsのCLIアプリとして動作するチャットアプリケーションを作成し、OpenAIのChatGPTを活用してAIとの対話を実現します。このチュートリアルに従えば、誰でも簡単に始めることができます。 このサンプルコードを利用して、メールの起案や他の文章作成、ドキュメントに関する質問への回答、対話エージェントの作成、ソフトウェアに自然言語インターフェースを与えること、さまざまな科目でのチュータリング、言語の翻訳など、様々な活用方法があります。 この記事では、チャットの完成機能を使ってチャットアプリケーションを構築する基本を学びます。プログラマーの方でも簡単に始められるような内容です。このチュートリアルに従って進めれば、自分でもできると思えるようになるでしょう。 このチュートリアルは、gpt-3.5-turboモデルをベースにしています。 前提条件として、JavaScript、CSS、Node.jsの基本的な知識が必要です。 また、chatGPTがホストされているOpenAIプラットフォームのアカウントも必要です。アカウントは無料で作成できますので、こちらから作成してください。 Node.jsを使用してCLIチャットAIアプリを作成する方法について、以下に焦点を当てて説明します。 まず、プロジェクトのためのディレクトリを作成します: これにより、プロジェクトの詳細を追跡するためにpackage.jsonファイルが作成されます。 以下のコードをファイルに追加します: これにより、ES6モジュールのimport文を使用することができるようになります。 次のコマンドを使用してOpenAIをインストールします: メインのコードが実行できるファァイルを作成します。ファイルの名前はindex.jsとしますt: OpenAIモジュールからConfigurationとOpenAIApiをimportし、readlineモジュールからreadlineをimportします: ※readlineモジュールは、Node.jsの組込みモジュールの1つであり、コンソールやターミナル上でのユーザーの入力を扱うためのインタラクティブな機能を提供します。 次のようにOpenAIの設定を構築します: ※APIKeyは他人とシェアしないこと!また.envファイルの環境変数から呼ぶようにしましょう。 このコードはConfigurationオブジェクトの新しいインスタンスを作成します。その中には、アカウントが組織の場合は企業コードとapiKeyの値を入力します。組織の詳細は「設定」で確認でき、apiKeyの情報は「APIキー」で確認できます。既存のAPIキーを持っていない場合は、新しく作成できます。個人アカウントで作成した場合は、組織のコードは不要になります。 次のコードを設定の後に入力して、OpenAI APIの新しいインスタンスを作成します: これをプロジェクト全体で使用します。 以下のコードを入力してcreateChatCompletion関数をテストします: このコードはcreateChatCompletion関数を呼び出し、エンドポイント(https://api.openai.com/v1/chat/completions)をトリガーします。この関数は、使用するchatGPTのモデルと、ユーザーとAIの間のメッセージの配列という引数のオブジェクトを受け取ります。次のセクションで、チャットの履歴を保持し、アプリを改善するためにメッセージ配列を使用する方法について見ていきます。 各メッセージは、送信者(つまり、メッセージがAIからのものであればassistant、人間からのものであればuserという値)と内容(送信される情報)を含むオブジェクトです。 最後に、以下のコマンドを使用してターミナルでファイルを実行します: 数秒後にAIからの応答が返されます。 これでチャットボットを作成するために必要なものがすべて揃いました! ただし、ユーザーがメッセージの内容をコードにハードコーディングするのではなく、ユーザーからの入力をリクエストしてアプリケーションをよりインタラクティブにすることが望ましいでしょう。readlineモジュールがそのために役立ちます。 インタラクティブにするために、最後に入力したコードを削除し、以下を追加します: このコードは、ユーザーが質問を入力できるようにターミナル上にUIを作成します。 次に、ユーザーにメッセージを入力するように促すために、以下のコードを追加します: 最後に、以下のコードを入力します: 上記のコードでは、 ファイルを実行してAIとの対話をしてみましょう。以下のような画像のようになります: これで対話型のCLIチャットが完成しました。 完成したコードはGitHubのリポジトリから見てください。 https://github.com/DanNakatoshi/Node-ChatGPT-CLI 私のPCはアメリカで設定されているので日本語を入力するとコマンドプロンプトがフリーズしてしまいましたが、環境が日本で設定されている場合は問題がないと思います。(もし分かれば教えてください。) これはエンジニアなど一部の人々にとって有用ですが、サーバーサイドにあるためセキュリティが良好です。 しかし、CLIアプリケーションの使用方法を理解できないかもしれない他のユーザーのために、もっと使いやすく、より良いユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)を備えたアプリケーションが必要になることもあるかもしれません。 次回以降では、クライアント側のJavaScriptやVueを使用してより洗練されたチャットアプリケーションを作成する方法を見ていきます。 ではお疲れ様でした。

【OpenAI】ChatGPTのAPIキーの取得の仕方

ChatGDPのAPIキー取得の仕方

※ChatGPTで使用できるAPIは有料のサービスになります。クレジットカードを登録する必要があるので必要に応じて自己責任で進めてください。 ChatGPTとは ChatGPTは、OpenAIが開発した自然言語処理のモデルです。ChatGPTは、言語の理解や生成に関するタスクを行うことができ、対話型のコンテキストで人間のような会話を行うことができます。 ChatGPTは、GPT(Generative Pre-trained Transformer)というモデルのバリエーションです。GPTは、大規模なテキストデータセットを使用してトレーニングされたニューラルネットワークモデルであり、文章の言語モデリングや文章生成に非常に優れた性能を持っています。ChatGPTは、このGPTモデルを対話型の環境に適応させたものです。 ChatGPTは、ユーザーとの対話を通じて質問に答えたり、情報を提供したり、一般的な会話をしたりすることができます。ユーザーの入力に基づいて適切な応答を生成するため、コンテキストを理解し続けることができます。ただし、ChatGPTは、対話に関する事前の知識や特定のトピックの知識を持っているわけではありません。そのため、一部の質問や要求に対しては、正確な回答や適切な対応ができない場合もあります。 ChatGPTは、様々な用途に活用することができます。ユーザーサポート、情報提供、クリエイティブな文章生成、言語学習、エンターテイメントなど、多岐にわたる場面で利用されています。ただし、注意点として、ChatGPTは人工知能であり、完全な理解力や意識を持っているわけではないことを認識しておく必要があります。 日本でChatGPTを使用している会社 日本でもChatGPTを利用している会社はいくつかあります。以下にいくつかの例を挙げますが、これらはあくまで一部の例であり、他にも利用している会社は存在します。 これらの会社は、ChatGPTを使用して顧客サービスの向上や効率化を図ることを目的としています。ChatGPTを活用することで、自動化された対話システムを導入し、迅速かつパーソナライズされた対応を提供することが可能となります。 ChatGPTの使い方 ChatGPTを使うためには、以下の手順に従うことが一般的です。 以上が一般的なChatGPTの使い方の手順です。ただし、具体的な実装や利用方法は、選んだプラットフォームやツールによって異なる場合があります。 API KEYの取得 OpenAIのAPIキーを取得する手順は以下の通りです。 APIキーは機密情報ですので、他人と共有せず、安全な場所に保管してください。APIキーを持っていれば、OpenAIのAPIエンドポイントにアクセスしてChatGPTを利用することができます。