2024-08-06 TSKaigi サブイベント #1 フロントエンド
はじめに アプリケーションの構成 Electron Vue.js TypeScript 新規アプリケーションのハンズオン 事前準備 Vue CLIの導入 Vueプロジェクトの作成 Electronの組み込み アプリケーションの起動 preloadスクリプトの作成 メインプロセスへのipcMainモジュールの追加 preloadスクリプトの作成 住所検索画面の作成 終わりに はじめに こんにちは、開発本部第2開発部、Webフロント第2グループでフロントエンド開発をしている伊原です。 私が開発を担当しているSafie Entrance2にて、認証に用いる顔認証端末のセットアップができるアプリケーションが欲しい、という要望が上がりました。 そこでVue3とElectronを利用して簡素なアプリケーションを作成しましたので、本記事ではVue3+Electronのアプリケーション構築方法のハンズオン
angular# ng build --configuration production --source-map ⠏ Generating browser application bundles (phase: sealing)... <--- Last few GCs ---> [7954:0x641b0] 241863 ms: Mark-sweep 2009.7 (2085.0) -> 2005.1 (2083.0) MB, 923.9 / 0.1 ms (average mu = 0.771, current mu = 0.186) allocation failure scavenge might not succeed [7954:0x641b0] 244604 ms: Mark-sweep 2022.3 (2083.0) -> 2020.9 (2113.7) MB, 2660
We’re excited to announce that Node.js 18 was released today! Highlights include the update of the V8 JavaScript engine to 10.1, global fetch enabled by default, and a core test runner module. Initially, Node.js 18 will replace Node.js 17 as our ‘Current’ release line. As per the release schedule, Node.js 18 will be the 'Current' release for the next 6 months and then promoted to Long-term Support
Your complete platform for the web.Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. Your complete platform for the web.Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.
という記述があり、おなじみのinstallみたいな何かという勝手な認識だけで進めていました。 しかし、何回かプロジェクト作成を繰り返す中でnpxについて理解していないことに気づき、調べてみたところ便利だと感じたのでまとめてみます。 間違っている部分もあるかと思われますので、ご指摘いただけると幸いです。 What npx npxはnpmバージョン5.2.0より同梱されているコマンドで、ローカルインストールしたコマンドを実行するために使われます。npmのバージョン5.2.0がリリースされたのは、今から約3年ほど前になるため、今主に使われているnpmではほとんど使える状態にあります。 便利な機能を使える状態であえて使わないのはもったいないので是非使っていきたいコマンドの１つです。 もしnpxが存在しない場合は以下のコマンドでグローバルにインストールできます。
参考 Installing from CLI インストール それでは、Strapiアプリケーションをローカル環境で実行してみたいと思います。 --quickstartオプションを指定すると SQLite データベースを利用した構成のアプリケーションがインストールされます。 yarn create strapi-app example-app --quickstart or npx create-strapi-app example-app --quickstart ご紹介したコマンド実行しアプリケーションをインストールします。正常にインストールが実行されると以下のログが表示されます。 success Installed "create-strapi-app@3.0.5" with binaries: - create-strapi-app Creating a new Strapi app
2021-06-06 投稿 2022-02-22 更新AWS EC2でNode.js(Express)+Nginxアプリケーションのホスティング環境をVPC上に構築するAWSのEC2上でNode.jsフレームワークであるExpressで作成したアプリケーション（API）をホスティングする方法を書いていきます。 AWSの仮想ネットワークであるVPCのセッティング方法や、EC2の起動までの流れについても画像付きで丁寧に解説します。 AWSの仮想ネットワークの概要 Node.jsなどで作成したアプリケーションは、AWSの場合はVPCと呼ばれる仮想ネットワーク空間上に作成します。 そのため、EC2を立ち上げる前にまずはその配置場所にあたるVPCを作成することが必要です。 クラウドサービスを利用する場合、実物のサーバーを見ることはできないので、イメージがつきにくいと思います。 VPC関連の機能につい
参考: PM2-スタートアップスクリプトジェネレーター インスタンスが起動したら自動的にNode.jsアプリが起動するようにする やり方 pm2 starup を実行すると、実行すべきコマンドが表示される。それを実行する。 上記を実行すると、/etc/systemd/system/pm2-ec2-user.service が作成された。 pm2 save を実行すると、~/.pm2/dump.pm2が作成（更新）された。 メモ dump.pm2 に、pm2で実行したいプログラムが記録されていた。現在pm2で実行しているプログラムを自動起動させたい場合、pm2 saveを実行したらいいらしい。 pm2 startupで表示されるコマンドは、上記のdump.pm2で記録されているプログラムをpm2で自動起動させるためのコマンド。 新しいNode.jsバージョンにアップグレードする場合は、PM2
こんにちは！小田島です。コロナ第二波が来ましたが、もともと出不精気味なので個人的にはあまり影響はありません。むしろ外出しない理由ができて堂々と引きこもっていられます。 これまで、さくらのナレッジではNode.jsやDenoの話をしてきました。今回は、これらを使う上で欠かせない非同期処理について説明します。よろしくお願いします！ 対象者 本記事は、こんな人が対象です。 JavaScriptの非同期処理はコールバックとかPromiseとかasync/awaitとかあるけど、どう違うの？どう使い分ければいいの？ Node.jsのコールバックって罠が多くて使いにくい Promiseの仕組みがよくわからずになんとなく使っていた async/awaitって中でどういうことをやってるのかわからないけど便利だよね 非同期処理？async/awaitさえ覚えておけばいいんじゃない？ async/awaitっ
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート
画像処理で遊びたいな、と思い立ったので、 以前PythonとOpenCVで作成した画像線画化スクリプトを Node.jsで作成しなおしてみました。 blog.honjala.net OpenCVはPythonと使うのがやはり一番使いやすいのですが、 Javascript用APIも提供されているので、 Webページ上のJavascriptやNode.jsからでも利用することができます。 docs.opencv.org しかし試してみるとNode.jsから生でOpenCV.jsを使うのはcanvasを利用することを 前提にしていたりしてなかなか手強く、うまくいかなかったので、 「opencv4nodejs」というライブラリを使うことにしました。 www.npmjs.com こちらはOpenCVの関数をNode.jsからいい感じで使えるようにしてくれていて、 Pythonで書いた処理をNode.
node.jsでimport/exportで試そうとしてハマったのでメモ。 $ node -v v11.4.0 import / export を使っているファイルの拡張子は.mjsでないとエラー // moduleA.js export const hi = (name) => `Hi ${name}. `; // main.js import {hi} from './moduleA.js'; console.log( hi('星宮いちご') ); $ node main.js SyntaxError: Unexpected token ファイルが.mjsでも--experimental-modulesオプションがないとエラー // moduleA.mjs export const hi = (name) => `Hi ${name}. `; // main.mjs import {h
こんにちは！ フロントエンドエンジニアのほりでーです。 Web制作に関わる方であれば、「Yeoman」というツールをご存知の方も多いのではないでしょうか。Yeomanは、Googleが中心に開発しているnode.jsのツールで、よく「WebサイトやWebアプリケーションのベースを、まるっと簡単に構築してくれるツール」として紹介されていることが多いです。 僕も最近までYeomanのことを開発環境を構築するためのツールだと思っていました。しかし、Yeomanのテンプレート（通称：generator）は、簡単に自作することができるので、汎用的なひな型ツールとしての側面も持っています。 今回は、Yeomanのgenerator-generatorというテンプレートを使い、ちょっとした制作効率アップのためのテンプレートを作成してみたいと思います。 今回作りたいテンプレート 僕はWebサイトのコーディ
概要 ECMAScript 2017、2018 で導入が予定されている機能および開発ツールについて調べました。 ES モジュール 主要ブラウザー、モジュールバンドラー (Webpack、Rollup) でサポートされています。Node.js は v8.5 で実験的な機能として利用できます (--experimental-modules)。古いバージョンの Node.js のサポートのために @std/esm が公開されています。 ES モジュールを利用するメリットは従来よりも読み込む必要のあるコードを減らすことができることです。必要なクラスや関数だけをインポートできます。RxJS の場合、どれだけ変わるのかはこちらの記事をご参照ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く