Steamに出すためのビルドをつくる流れを説明します。 Steamへの登録や申請などについてはこの記事では触れません。 登場人物 name desc

「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と データ削除を行えます。 スプレッドシートは月ごとにシートで管理され、Webアプリと同じように収支の合計も確認できます。 また、カテゴリ別の支出も確認できます。 使用した技術 バックエンド Google Ap

コピペjsしか書けないよわよわコーダーのメモ書きです。 まず確認。 IE11 で使用できる・できない JavaScript の機能 そして以下対応策①。 polyfill.io 古いブラウザでサポートされていない機能を使えるようにしてくれるコードらしいです。 polyfill.io が便利すぎた 対応策②。 Babel.io jsのバージョンES6をES5に変換してくれるみたいです。 ES6の概要と、最新ブラウザに対応させる「Babel」の使い方 Babelはプラグインみたいですがブラウザ上で変換出来るサービスもあります↓↓↓ Babel Try it out ただ、上記ではクラス式およびコンストラクタ？の対応が上手くいきませんでした。 今後の課題。ぬぬー

var selectId = document.getElementById("hoge") var string = selectId.textContent.replace(/\s+/g,''); function truncate(str, len){ return str.length <= len ? str: (str.substr(0, len)+"..."); }; selectId.innerHTML = truncate(string, 5); ポイント ①任意のidを持ったタグの文章を変数stringにいれる。この際、文字列の中の不要な空白を削除したいのでreplace(/\s+/g,'')を記述。 ②真ん中のfunction truncate(str,len)で出力の最大値を調整できるように関数を作成。 ③最後、①を②の制限数分だけinnerHTMLで書き換え。 ま

そもそもなぜSteamで公開するのか この記事ではSteamにフォーカスしましたが、実際はこのゲームはWeb上から直接遊べるし、WebViewでラッピングしてGooglePlayにも公開しています。 SteamとGooglePlayに出した最初の理由は、大きなプラットフォームの力を借りて集客するためです。 LPだけオープンして待っていたとこで誰も遊びに来てはくれないわけです。 なので正直、「Webブラウザで遊べるのに、集客のためだけにわざわざダウンロードしてもらうなんてアホくさいな」、と思っていました。 しかし今となっては、むしろSteam経由で遊んでもらいたい思いのほうが強いです。 Steamのストアに並ぶことは思っていたよりも嬉しくて、 例えるなら、小説を書いたとして、今まではコピー用紙に印刷してホチキスで止めたものを皆に配っていましたが、 今回はちゃんと本になって、カバーがついて、書

Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。 今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。 公式のベンチマーク結果 計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて

図12-10-1-1は「12-9.Node-REDではじめてのフロー」で作成したフローです。このフローは「実行するとデバッグメッセージとしてタイムスタンプを出力する」というものでした。本記事では、このフローにオリジナルの関数を追加する手順を紹介します。

1. ディレクトリ構成 Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。 詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。 2. css作成 publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。 3. javascript作成 publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。 javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、 その点を考慮した実装としておいてください。 4.適用 viewsフォルダに作成した(プロジェクト作成時は1ファイルのみ作成されている)テンプレートエンジンのファイルに読み込みをさせていきます。 4-1. cssの場合 おなじみ、linkタグを使い

初めに 今まで非同期処理の実装はasync awaitを使用してきましたが、根本的な理解ができておらず非同期処理の実装の度に頭にハテナがついて回っています。なのでまずはPromiseの理解を深め、まとめていきたいと思います。 Promiseとは Promise オブジェクトは非同期処理の最終的な完了処理 (もしくは失敗) およびその結果の値を表現します。 PromiseはJavaScriptのビルトインオブジェクトであり、JavaScriptが動作する環境であればどこからでも呼び出すことができます。その実体は非同期処理を抽象化したオブジェクトであり、非同期処理を操作するための仕組みでもあります。 またPromiseはコンストラクタ関数であり、オブジェクトを生成、使用する際にはnewでインスタンス化します。

Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.

「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 読みやすいコードを書きたい 複雑な条件分岐は、書いている本人も、後からそれを読む他人も非常に疲れるものです。 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついつい条件反射でif-elseを書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） if - elseを使わない条件分岐のレパートリーを増やす if - else文が絶対ダメということでは決してありません。 たくさんのレパートリー、つまり引き出しを持っておけば、適切な読みやすいコードをかける可能性が上がるかなと思うのです。 文と式 JavaScriptには「文」と「式」があります。 この2つの違いを意識することが重要ではないかと思います。 「文」は、マシンへの命令です。 「式」は数学的な値

はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer　迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ

Chromiumベースのブラウザー開発を手がけるBraveの最高経営責任者（CEO）Brendan Eich氏は、JavaScriptの中核デザイナーとしても知られている。その同氏の手によって、「Mosaic」から「Internet Explorer」（IE）、そして「Google Chrome」に至るまでのウェブブラウザーにおけるJavaScript誕生後の20年をまとめた文書が公開された。 JavaScriptは、ウェブやブラウザー向けの最も頼れるプログラミング言語となっており、ネイティブなモバイルアプリやデスクトップアプリでも採用されるケースが増えている。 ウェブアプリを開発する上でJavaScriptの知識は必須と言えるだろう。同言語はJavaや、機械学習（ML）の台頭によって普及してきているPythonとともに3大人気プログラミング言語に数えられている。 JavaScriptは1

目的 JavaScriptに複数のファイル名を渡したいです。 bashでサクッと作りたい 環境 MacOS/bash5.0 centOS7/bash4.24 方法 bashで複数ファイル(例えばpng)をfindで取得し整形する。 hoge.jsというテンプレートの変数宣言の場所に1.の結果を入れる JavaScriptの配列定義はfoo = ["a.png", "b.png"]というフォーマットに合わせます。 コード # 結果が何もない場合に備えて空文字を入れておく。 $ lst_png="" ; touch a.png b.png C.png; # ファイル名で検索する。念のためソートしておく。改行を,に変えて文字列にする。 $ lst_png=$( find . -name "*.png" -printf "\"%f\"\n" | sort | sed -z 's|\n|,|g' )

はじめに JavaScript（JSに限らずですが）でコードを書いていく時、誰しもがバグにこんにちはされてしまいます。 その時皆さんはどの様な原因の探り方をしているでしょうか？ バグ（エラー）により無駄な時間を過ごしてしまっている。 エラーの解決方法がわからず嫌になってしまう駆け出しや初学者の方達、今まで違うバグの対処をしていた方々（自分のなれているやり方の方が早いかも）の助けになれば幸いです。 まず最初に大きく2つ、この様なバグの解決方法があると思います。 *エラーとバグは違う意味ですが、こちらでは同じ様な意味で扱わせていただきます。 プリントデバッグ console.logなどで自分が使っている値が正しく動いているかを出力する。 その値が自分の意図していない値であるかを確認し、バグの原因を探る。 コメントデバッグ 原因だと思われる箇所をコメントにし、バグが起こるかどうかを確認する。 そ

一昨日「買って応援！」というサイトをリリースしました。 コロナの影響で打撃を受けている生産者や飲食店、販売店の方々が「廃棄になるよりは･･･」という思いで各所で販売されていますが、情報が散らばっていたのでまとめている【買って応援！】するためのサービスです。 割とモダンな構成で作っているかなと思うので、使用している技術・サービス周りを少しまとめてみました。 Frontend今回は初めてProductionでNext.js(React)を使いました。 元々自分はNuxt.js(Vue)を書くことが多く、いつもだったら「Nuxt.js(Vue) + Firebase + Heroku + Algolia (+ 必要に応じてFastly)」を採用することが多いんですが、直近のNext.js 9.3から強力なSSGサポートが入ったこともあり、個人でやるんだしせっかくなら、ということでフレームワークも

このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは

Denoは、単一の実行ファイルとして提供され、外部コードのフェッチに対応しているので、他のツールを使用することなく任意の動作を定義できる。 コードはWebブラウザと同様にサンドボックス内で実行され、ストレージやネットワークへのアクセスなど、悪意のある行動につながるような操作は、標準では許可されていない。 JavaScriptのコードをスタンドアロンプロセスとして動作させるための取り組みとしては、すでにNode.jsが存在するが、Node.jsは多数のユーザーを抱えていることからシステムの進化が難しく、かつ時間がかかる。また、JavaScriptの仕様変更や、TypeScriptのような派生言語の登場が、今後のNode.jsの開発を困難にする可能性がある。 さらに、Denoの開発者は、Node.jsにおける外部ライブラリとのリンクがNPMリポジトリを介して一元化される点が、Webの理想と一致