サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
qiita.com/suin
これは「コードを書いていて困ったときに、suinがチャットで質問に答えたり相談に乗るsuinのプログラミング相談室(仮)」で頂いた質問と僕の回答の要約です。 質問 フロントエンドとバックエンドのリアルタイム通信の選択肢を教えて下さい。その長所短所も知りたいです。 僕の回答 こんにちは。 フロントエンドとバックエンドのリアルタイム通信の選択肢についての質問ですね。 通信方法の選択肢についてご回答します。 1. AJAXポーリング この方式は、GETリクエストなどをAJAXで数秒間隔などでバックエンドに投げ、もしレスポンスのデータに変化があったら、それをフロントエンドに反映するという手法です。 ポーリングの長所は、AJAXが分かれば他に学ぶことがないという点です。実装もかんたんです。また、バックエンドのサーバやプログラミング言語の選択肢も広いです。 短所は、無駄な通信が発生しうるということです
2017-01-05 追記 2016年3月にエラーの標準形式RFC7807「Problem Details for HTTP APIs」が提案され、今日現在proposed standard(標準化への提唱)となっています。こちらも是非ご覧ください。 RFC 7807 - Problem Details for HTTP APIs HTTP APIの詳細なエラー情報をレスポンスに持たせるための仕様 最近はREST APIを提供しているサービスが増えてきていますね!また公開されるAPIだけでなく、Microservicesなアーキテクチャを採用して、バックエンドがWeb APIで通信するケースも増えてきているように思います。 APIを使うときはあまり気にしたこともなかったですが、いざAPIを設計してみるとどんなインターフェイスがいいのか、どんな形式がいいのかといった疑問が次々と出てきます。
本稿では、Google Could Platform(GCP)のGoogle Cloud Functions(GCF)で、Node.jsのロギングライブラリwinstonを使ったログの記録方法を説明します。 この投稿で学べること winstonをGoogle Cloud Functionsの関数に組み込む方法 winstonのメソッドの呼び出し方 winstonでオブジェクトの値をロギングする方法 winstonで記録したログの読み方 この投稿では説明しないこと winstonを使ってStackDriverにロギングする方法 winstonを使ってStackDriverに「重要度」をつけながらロギングする方法 winstonとStackDriverを組み合わせると、より自由度が高く分析しやすい構造でロギングすることが可能なりますが、この投稿ではそれについては説明しません。winstonを単
前回、Google Functions: console.infoやconsole.errorなどとログビューアの「重大度」の関係性という記事を投稿しました。そこではconsole.errorやconsole.infoなどのConsole APIでは、GCP上のログの重要度(severity)は、DEFAULTかERRORの二択になるということを説明しました。 GCP上の重要度はこの2つしか無いわけではなく、以下の9つのレベルがあります。 この投稿では、Google Cloudのロギングクライアントライブラリを使って、Cloud Functionsでも重要度を指定したロギングをする方法を説明します。 この投稿で学ぶこと Google Cloud Function & Node.jsで@google-cloud/loggingを使って重要度をつけたログを記録する方法 そして、その面倒くささ。
Google Functions: console.infoやconsole.errorなどとログビューアの「重大度」の関係性JavaScriptNode.jsGoogleCloudFunctionsGoogleCloud JavaScriptのConsole APIには、ロギングで良く使うconsole.log以外に、console.infoやconsole.errorなど、ログに「情報」や「エラー」といった色をつけるメソッドがあります。 一方、Google Cloud Platform(GCP)のログビューアの「重大度(SEVERITY)」という概念があり、ログごとに「INFO」や「ERROR」などの意味合いを持たせることができます。 では、Console APIとGCPの「重大度」はどのような関係になっているのでしょうか? 実験してみたので、この投稿ではその結果をお伝えしたいと思いま
この投稿では、Google Cloud Platform(GCP)のGoogle Cloud Functions(GCF)のNode.js環境で、console.logを使った最低限のロギング手法について解説します。 この投稿で学ぶこと Google Cloud Functions & Node.jsでは、console.logで最低限のロギングは可能。 2行以上に渡るログは行ごとに分解されるので注意。 jsonPayloadを意識すると、オブジェクトの構造をログに出すことも可能。 GCFではconsole.logでログを残せて、「ログビューア」で確認できる まず、Google Cloud Functionsでどのようにロギングし、そのログをどうやって確認するのかを学びます。シンプルに1行のメッセージをconsole.logで記録してみましょう。
この投稿ではJavaScriptの日時ライブラリdate-fnsでタイムゾーンを扱う方法を説明します。 基本知識 date-fnsはJavaScriptのDateを扱うヘルパー関数のセットなので、そもそもDateについてよく知っておく必要があります。 JavaScriptのDateにはタイムゾーンを表すデータが無い JavaScriptのDateオブジェクトはタイムゾーンを表すデータを持ちません。 実行環境のタイムゾーン設定を変更したとしても、new Date()はUTC時刻になります: $ TZ=Asia/Tokyo node -e 'console.log(new Date())' 2020-07-29T00:27:44.573Z $ TZ=UTC node -e 'console.log(new Date())' 2020-07-29T00:27:50.167Z
この投稿では、GitHubへのgit pushを引き金に、gitリポジトリ内の静的HTMLをNetlifyにデプロイし、サイトを公開する方法を紹介します。 本稿の手法は、Netlify入門者が分かるよう、下記のとおり極限まで単純化してます: 静的サイトジェネレーター不使用 「HTMLをgit pushしたら、Netlifyにデプロイできる」を体験することが本稿の目的です。なので、現実のサイト構築で使うことになる静的サイトジェネレーターは使いません。現実的なデモではないですが、HTMLをデプロイできることが知れれば、静的サイトジェネレータで生成したHTMLもデプロイできることになるので、ここで学んだことは活きます。 作るのはHTML1ファイル & Netlify設定ファイル1つ 作るファイルはHTML1つと、Netlifyの設定ファイル1つだけです。HTMLは「Hello World」の1行
この投稿ではJavaScriptのEventTargetを使って、ブラウザ上でイベントを送信したり受信したりする方法を紹介します。 サーバサイドでNode.jsを使っていると、ビルトインライブラリにeventsがあり、EventEmitterクラスでイベントの送受信ができて便利ですが、これはNode.js固有のものなのでブラウザでは使えません。代わりに、クライアントサイドではEventTargetを使うことで、EventEmitterのようなことができます。 EventTargetは多くのブラウザが対応 EventTargetは、多くのブラウザが対応しており、特に外部ライブラリのインストールを必要としません。 EventTargetの基本的な使い方 まず、EventTargetをnewします。
AltJS製のNodeモジュールをGitHubから直接インストールすると同時に、そのライブラリのビルドを自動化するpackage.jsonの設定JavaScriptNode.jsTypeScriptYARN この投稿では、NodeモジュールをGitHubから直接インストールする際、そのライブラリをインストールのタイミングでビルドする方法を紹介します。 この手法はどういうときに使うか? 普段、yarn add ライブラリ名をすると、npmjs.orgのレジストリにアップロードされたモジュールが、手元のnode_modulesに入ってきます。仮に、ライブラリのソースコードがTypeScriptやBebelなどのAltJSであったとしても、node_modulesにインストールされるのは普通ビルド後のJavaScriptです。これはライブラリ開発者がnpmjs.orgに公開するとき、AltJSか
TypeScript: string | undefinedな配列からundefinedを取り除く処理の型付けをしっかりする方法TypeScript この投稿はTypeScriptで(string | undefined)[]のようなstringとundefinedが入る配列からundefinedを取り除く処理をfilterメソッドで書くとき、filterメソッドが返す型をstring[]にする方法を紹介します。 問題点 次のようなstringとundefinedが入り混じった配列があり、
const pets = ['🐈', '🐕', '🐕', '🐈', '🐈', '🐕'] const [cats, dogs] = pets.reduce( ([cats, dogs], pet) => pet === '🐈' ? [[...cats, pet], dogs] : [cats, [...dogs, pet]], [[], []] ) console.log(cats, dogs) //=> [ '🐈', '🐈', '🐈' ] [ '🐕', '🐕', '🐕' ]
本稿ではPHPのコード解析ツールPsalm(サーム /sάːm/)について紹介する。 本稿の内容 本稿では次の内容を説明する。 Psalmがしてくれること Psalmの導入手順 Psalmの設定 Psalmの実行方法 Psalmがしてくれること PsalmはPHPの静的コード解析(static code analysis)ツールで、PHPコードを解析して問題点をあぶり出してくれる。Psalmで発見できる問題は主に次のものがある: 廃止予定(deprecated)の関数、メソッド、クラスの利用。 配列キーの重複。 型の不整合。戻り値の型宣言と異なる型のreturnなど。 アクセスできないメンバ変数やメソッドへのアクセス。privateや@internalなど。 コンパイル型言語であれば、こうした解析はコンパイラの仕事だったりするが、PHPはスクリプト言語なのでコンパイラが存在しない。こうした
個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。 追加された内容は更新履歴をご覧ください。 書籍 『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』 - JavaScriptからTypeScriptに来た人が読むと、JSとTSの差分を学ぶことができる本。 『JavaScript Primer: ECMAScript 2019時代のJavaScript入門書』 - すでにプログラミング経験がある人が読むとJavaScriptの文法や機能を中心に学ぶことができる本。TypeScriptを書くにもJavaScriptの知識が必要不可欠なので、雰囲気でJSを書いてきた人やちゃんとおさらいしたい
本稿では、Node.jsのバージョンに合ったTypeScriptのコンパイル設定(tsconfig.json)を紹介します。 サーバサイドアプリケーションやCLIアプリケーションをTypeScriptで開発する場合、実行環境としてNode.jsのバージョンを気にすることになります。本稿は、狙ったNode.jsのバージョンに合ったコンパイル設定はどうしたらいいかについて説明するものです。
JavaScriptでx === 'a' || x === 'b' || x === 'c' || ...をシュッとさせるJavaScript
この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します。 実現したいこと 次のようななんの変哲もないHTMLにスタイルを当てて、 <h1>カレーライスの作り方</h1> <div class="steps"> <h2>野菜と肉を切る</h2> <p>いい感じの大きさに野菜と肉を切ります。</p> <h2>煮込む</h2> <p>切った具材を鍋に入れて煮込みます。</p> <h2>味付け</h2> <p>カレールーなど調味料を入れて完成です。</p> </div> 下のように各ステップに1,2,3と連番がついた表示になるようにしたいと思います。 見出しに連番をつけたり、装飾したりして「手順」を表現する方法 いきなりですが、完成形のCSSを示します。細かい説明はコード内にコメントで書いてあるのでご覧ください。 .steps { /* 連番カウンター名の
const str = `foo bar` const str2 = `hoge ${str}` //=> "hoge foo bar" タグ関数とは テンプレート文字列の前に書くことで、文字列を処理できる関数。この関数は受け取った文字列を処理して、文字列を返してもいいし、受け取った文字列を処理して、何らかのオブジェクトを返したりしてもいい。
yarnを使うことになっているプロジェクトでは、npm installを禁止したい場合があります。 この投稿では、プロジェクト単位でnpm installを禁止する方法を紹介します。 npm installを禁止する設定 まず、package.jsonにengines.npmフィールドを追加し、そこに"please_use_yarn_instead"と書きます:
function removeUndefinedFromObject(object) { return Object.fromEntries( Object.entries(object).filter(([k, v]) => v !== undefined) ) } console.log( removeUndefinedFromObject({ a: undefined, b: 0, c: "", d: null, e: { e1: undefined, e2: 1 }, }) ) //=> { b: 0, c: '', d: null, e: { e1: undefined, e2: 1 } } 注意事項 再帰的にはチェックしません 上の実行例で分かるように、ネストしたオブジェクトのプロパティはチェックされません。 対応バージョン ES2017とES2019に未対応の環境では下記関数
TypeScript: index signatureを持つインターフェイスにkeyofして、既知のキーだけを取り出したいTypeScript型レベルプログラミング この投稿では、TypeScriptの次のような問題と理想とその理想を実現する手法を紹介します。 問題点: keyofをインデックスシグネチャを持つインターフェイスに対して使うと、string | numberになってしまう。 理想: string | numberじゃなくて、インデックスシグネチャ以外の既知キーを知りたい。 keyofは良い TypeScriptにはkeyofというものがあり、インターフェイスが持つキーを調べることができます:
本稿では、JavaScriptの正規表現の/gと名前付きグループ(?<name>...)を併用する小技を紹介します。 名前付きグループとは 名前付きグループとは、正規表現のグループ(...)に名前をつけ、グループにマッチした文字列をインデックスではなく、その名前で取り出せるようになるものです。 // 名前がついてないグループ const result1 = 'alice@example.com'.match(/@(.+)/) console.log(result1[1]) //=> example.com // 名前付きグループ const result2 = 'alice@example.com'.match(/@(?<domain>.+)/) console.log(result2.groups.domain) //=> example.com
Docker: MySQLコンテナのポートをMac側に公開せずに、MacからそのMySQLに接続する小技Dockerdocker-composemutagen DockerやDocker Composeで、MySQLコンテナを起動するとき、どうしてもポートをホスト側に公開できないが、ホスト側からはDBにはアクセスしたいことがあります。 この投稿では、Mutagenを利用して、ポートを開けずとも、ホスト側からMySQLコンテナにアクセスする方法を紹介します。 この投稿が解決したいこと この投稿が解決するのは、下記のような制約とやりたいことの板ばさみ状態です。 制約 MySQLコンテナのポートを開けるのが面倒。 例えば、複数のプロジェクトに携わっていて、複数のdocker-compose.ymlがあり、それぞれにMySQLコンテナがある。 それぞれに3306, 3307, 3308, ...と
この投稿では、HTMLでmacOSのオリジナルのスクリーンセーバを作れる方法を紹介します。 macOSのスクリーンセーバを作ってみたいけど、SwiftもObjective-Cも分からない、分かるのはHTMLやCSS、JavaScriptなどウェブ関連技術だけ、というウェブ系プログラマむけの解説です。 ちなみに僕は、この投稿で紹介する方法で、JavaScriptの人気ライブラリをひたすら紹介するスクリーンセーバを作りました: JavaScriptの人気ライブラリを紹介しまくるスクリーンセーバが完成した😌 需要があれば公開するかも pic.twitter.com/tOnUhMIbh8 — suin❄️TypeScript入門書執筆中 (@suin) April 30, 2020 Swiftなどを知らなくても、CSSやJavaScriptでアニメーションを頑張れば、こういった動きのあるスクリー
このprivateキーワードは、TypeScript固有の仕様で、ECMAScriptには無いものです。 ハードプライベートとは? ハードプライベート(hard-private)とは、#でオブジェクトのプロパティの可視性を表現する書き方のことです。 これは、今後ECMAScriptに盛り込まれることが見込まれる「Class fields」(stage 3)の言語仕様の一部をTypeScriptに取り入れたものです。なので、TypeScript固有の仕様ではなく、JavaScriptと共有する仕様となっています。 Class fields - JavaScript | MDN tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals TypeScri
この投稿では、値としては「文字列」なんだけど、単なる文字列ではなく「電話番号型」という意味を持たせた文字列型を定義し、それ使用する方法を紹介します。 TypeScriptで「電話番号型」みたいな、正規表現でバリデーションされるような型は作れるんかな? ElmだとOpaque Typeなんてやり方があったけど。。。 用は型をexportしないで、その型の値を作る方法だけをexportすればええんかな。 — 無職やめ太郎(本名) (@Yametaro1983) April 23, 2020 ↑上のような疑問に対する答えです。 実現方針 方針としては、以下のテクニックの組み合わせです。 公称型で、「電話番号型」を定義する ユーザ定義タイプガードで、文字列型を電話番号型としてコンパイラに認識してもらう 公称型とその実装方法についての基本は下記投稿をご覧ください。 TypeScript: 異なる2つ
Node.jsのchild_processモジュールのforkで起動した子プロセスにて、例外が発生したとき、その例外を親プロセスに送る方法です。 const { fork } = require('child_process') if (process.send) { // 子プロセスの処理 process.on('uncaughtException', error => { process.send(error) // 例外はメッセージとして送る process.exit(1) }) throw new Error('Something wrong') } else { // 親プロセスの処理 const childProcess = fork(__filename, [], { serialization: 'advanced' // このオプションが必須 }) // 例外はメッセージ
Unicodeの絵文字の文字列操作は興味深い。 前提知識 「👨👩👧👦」という絵文字は、そういう1文字(コードポイント)が存在するわけではない。 「👨👩👧👦」は「👨」「👩」「👧」「👦」という4つの絵文字とZero Width Joiner(U+200D)という文字の組み合わせのデータで表現される: console.log( '👨' + '\u{200D}' + '👩' + '\u{200D}' + '👧' + '\u{200D}' + '👦' ) //=> 👨👩👧👦 上記のとおり、「👨👩👧👦」はデータとしては7文字なのだが、表示上1文字分の幅になっているだけなのである。 ちなみにJavaScriptのfor ... ofは文字列をコードポイントごとにループできるので、「👨👩👧👦」をforで回すと構成文字に分
次のページ
このページを最初にブックマークしてみませんか?
『@suinのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く