前書き 会社でデスクトップアプリを作っているんですが、Webのほうが開発速度が速くてネットにも割と情報がたくさん落ちているので、どうにかWebでデスクトップアプリ作れないかなーということで探していたところ、Electronにたどり着きました。Tauriもいいなーと思ってんですが、Windows10向けのアプリが多いためできればWebView2に依存したくないなということで、今回はElectronやっていきます。UIは今もうほぼ一強のReact.js、バンドルはViteとかが流行りですが正直まだプロダクトに使うには厳しいかなということで安定のWebpackです。 この記事では、環境構築、IPC通信でコンソールに文字を表示、コマンドの実行、ファイルアクセス、通知、そしてexeの作成までやっていきたいと思います。 盛りだくさんなので長くなりますが、これを見ればとりあえず基本的なことはできるように

データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。 今回紹介するdanfo.jsは、とても簡単に使えるデータビジュアライズソフトウェアです。 danfo.jsの使い方 danfo.jsの実行例です。データをとってきて、それを3つのパターンでビジュアライズしています。 const df = await dfd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv") df['AAPL.Open'].plot("div1").box() //makes a box plot df.plot("div2").table()

社内のノウハウ蓄積やソフトウェアの説明書としてWikiを導入する場合、Confluenceなどの有料サービスが第一候補としてあげられますが、決して安くはないライセンス料金を支払う必要があります。無料で利用できるオープンソースソフトウェア「Wiki.js」は、Dockerで手軽に構築でき、権限管理や外部サービスの連携も可能な、無料とは思えないほど多機能なWikiシステムです。 Wiki.js https://wiki.js.org/ Wiki.jsはDockerイメージが公開されているので、今回はLinux上のDockerでWiki.jsを構築してみます。まずは下記コマンドを実行してDockerとDocker Composeを導入。 curl -fsSL get.docker.com -o get-docker.sh sudo sh get-docker.sh sudo curl -L "h

こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript

Switchなど、ファミコンを再現するエミュレーター、気になるのは音の違い。記憶の音とは何かが違う。その原因が384kHz音声出力デバイスと音プログラミングで判明！ 44.1kHzでは全然足りなかった。 音は空気の振動。1982年に発売されたCDは、その振動を1秒間を44,100回に分けてデジタル化した（強さは16bit、65536段階）。 40年近く経ち、記憶容量も処理速度も段違い、映像はSDから4K/8K/レティナへと深化したのに音はそのまま44.1kHzが主力。 MacBook Pro、確か高音質化できたはずと思ったら、なんと対応は2013年〜2015年モデルまで。Utility、Audio MIDI Setupでの変更は44.1kHzか48kHzかのみだった。 ショックなのでデバイス探し、コンパクトなDAC（デジタルアナログコンバーター）を発見。設定を変更すれば、そのままWebAu

記事で扱う検索機能 こんな感じの検索機能です。 今回は、shopsというテーブルからnameというカラムを抽出してビューに表示していきます。 ※店舗情報を複数登録済み。そこから任意の店舗を任意のカラムで検索します。 非同期で行う 文字を打つごとに検索を行い、描画する 検索結果をクリックで該当のページにリンクする おそらくですが、初学者のプログラミングにおける知識レベルや常識レベルって経験者の方が考えるそれよりもずっと低い水準にあると思うんです。 なので、自身にできる範囲内で「そんな事まで説明する必要あるの？」という事も書いて行こうかと思います。 開発環境 mac Ruby 2.5.1 Rails 5.2.3 jQuery 必要なファイル まず、実装に必要となるファイルを以下にまとめます。 検索を行うアクションを定義したコントローラーの準備

この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail

この記事は 2020 年 9 月開催の技術書典9 に合わせて刊行された『りあクト！ TypeScript で始めるつらくない React 開発 第3版【Ⅰ. 言語・環境編】』の中の「2-9. モジュールを読み込む」の前半の内容を理解・分解・再構築したものです。 https://oukayuka.booth.pm/items/2368045 私たちは React や Vue.js のコードで気軽に import / export を書いて他のファイルの中身を読み込んでいますが、それができるようになるまでにどんな歴史的経緯があったか、そして実際にはそれがどのように変換され動作しているのかが物語風にわかるようになっています。 なおオリジナルの本では厳密なキャラ付けがなされているのですが、ここでは別の世界線の 2 人の会話と考えてください。

主要なWebブラウザでのWebAssembly対応が整った。これによりJavaScriptを超える高速なWebアプリケーションの実行に加え、JavaScript以外の言語によるWebアプリ開発の選択肢が開かれることになる。 WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットを実現しようと、マイクロソフト、Google、Mozilla、Appleなどの主要なWebブラウザベンダがW3CのWebAssembly Community Groupなどを通じて共同で開発に取り組んでいる技術です。 主要なWebブラウザによるWebAssembly対応が整う 1年前の2016年11月には、各社が足並みをそろえてWebAssemblyの試験的実装を発表し、2017年2月にはWebAssembly APIとバイナリフォーマットについて主要ブラウザ

皆様は循環的複雑度の高いコードを書いていますか？保守していますか？ プロジェクトのコードを見て、やたらややこしいなーと感じたときに、それを定量化するための方法を紹介します。 インストール escomplex という循環的複雑度を算出するプログラムを使います。ただこのプログラムでは TypeScript や JSX などには対応していません。 そこで、Babel でいったんいい感じにトランスパイルしてから escomplex にかけます[1]。 $ yarn add -D @babel/core @babel/plugin-proposal-class-properties \ @babel/preset-env @babel/preset-react @babel/preset-typescript \ @types/babel__core @types/node \ escomplex

JavaScriptといえば、「エディターで書けばブラウザーで動く」という、非常に手軽なプログラミング言語で、ウェブサイトの制作はもちろん、幅広く活用されているプログラミング言語です。 しかし、言語仕様はかなり古く、オブジェクト指向言語としては不完全であったため、長らくこれを根本的に変えるための議論がされていました。 そして2015年に、JavaScriptの国際標準規格として策定している「ECMAScript」が「ES6（ECMAScript 6）」を発表し、言語仕様が現代風のものに一気に置き換わりました。この連載では、そんなES6のJavaScriptの書き方を紹介します。

JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Day.js を使ってきました。 Moment.js のプロジェクト終了が告知され、時刻操作ライブラリに注目が集まっていることなので、今一度 Day.js の採用理由についてまとめてみます。 Day.js について iamkun によって開発されている時刻操作のライブラリです。Moment や date-fns などは Organization によって管理されていますが、時刻操作ライブラリとしては珍しく個人に

const N = 100; for(let i = 0; i < N; i++){ //...なんか処理 } こんなダサいループは書きたく無い。。。 pythonのrange(N)みたいなのがJavaScriptにもあったらなぁ。。。 解決策 英語でググってみたらStackOverflowに良い解決策が載っていたのでご紹介。 世界には頭の良い人がいるものだなぁ。 const N = 100; [...Array(N).keys()].forEach(i => { //...なんか処理(iには0...N-1(=99)が格納される) });

サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。今回はSSRをAWSのサーバーレス、つまりAWS Lambdaでやってみたいと思います。 今回はVue.jsのフレームワークであるNuxt.jsで作ったサンプルアプリのSSRをLambdaで試してみます。 前回のブログでNuxt.jsでの例という説明をしましたが、今回はそこを実際にやっていく感じです。 なお、Nuxt.jsをLambdaで動かす場合の話って実はググってもあまり出てきません。いくつかの記事が出てくるだけです

はじめに markdownを書くと、ソシャゲみたいにキャラと対話してるUIが作れるというクローズドなライブラリを仕事でメンテしています。 ADVゲームのシナリオをエンジニアじゃなくても書けるようにするやつですね。 それのメンテでJSのFunctionのconstructorを使う機会があったので、それの経緯を書き連ねていきます。 markdownでシナリオ markdownでシナリオがどういう感じかというとこんな感じ。 # first-conversation こんにちは、${context.name}さん。 このトークはサンプルです。 # single-select-list 元気ですか？ 選択肢を選んでください。 - [元気です](multiple-select-list?mt.fine=1) - [元気ではないです](multiple-select-list?mt.fine=2) #

Some of the main advantages of Javascript are its community and ecosystem. The ecosystem is huge and it is very easy to get lost, literally. I have bookmarked over time a ton of Javascript resources. Here I put a list with my favourite Javascript Github repositories, which does not include frameworks (Angular, React & Co are most likely known by everyone). Awesome javascript I love the awesome lis

プログラミングボードゲーム「囲みます」の今日の試合、戦況を見ながらリアルタイムに手動でAIを切り替えるプログラムを作ったすずともが優勝。 重要なのは人とコンピューターのコラボ！GUIをHTML/CSS/JavaScriptで、手軽に作るためのライブラリを作りました。 まずはサーバー側。クライアント届くデータを await getで受け取り適当に処理してsendで返すテストをプログラムを作って、test-sync.js として保存します。（この例では500msec無駄に待って、倍返し） import { ServerSync } from "https://code4sabae.github.io/js/ServerSync.js"; import { sleep } from "https://code4sabae.github.io/js/sleep.js"; new ServerSyn

私たちが普段目にしているWebサイトではたくさんのJavaScriptのコードが記述されている。その中のコードの管理方法としては関数を用いるのが有効的である。今回は、そんな関数についてまとめてみた。 今回まとめること JavaScriptでの関数定義 無名関数と即時関数 アロー関数 1.JavaScriptでの関数定義 基本形