プログラミング言語 - TypeScriptの記事一覧
graphql-cli - GraphQLを使った開発時に便利なCLIツール
GraphQLは注目度が高い技術であり、周辺ツールが充実してきています。それらのツールを組み合わせることで、GraphQLを使った開発がさくさくと進められるようになるでしょう。今回紹介するgraphql-cliは名前の通り、ターミナル上で便利なGraphQLツールになります。## graphql-cliの使い方初期設定...
GraphQL Zeus - GraphQL用のクライアントライブラリを生成
GraphQLの最も優れている点はWeb APIながらスキーマが用意されている点ではないでしょうか。それによってREST API以上に関連ツールが作りやすくなっています。動的にスキーマを読み込んでも良いですし、あらかじめコードを生成することもできます。今回紹介するGraphQL Zeusは後者に該当します。スキーマファ...
Argdown - 文章構造を可視化する記法
文章を構造化して書くのは難しいものです。特に長文になったりすると全体像を一目で把握するのが難しくなり、読み飛ばしてしまったりすれば意味を取り違えてしまうことになります。そこで使ってみたいのがArgdownです。文章構造を解析し、ビジュアル化してくれるソフトウェアです。## Argdownの使い方例です。左側が文章、右側...
Moveable - マウスでドラッグ/リサイズ/回転を実現
Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...
GraphQL Editor - Webブラウザ上でGraphQLを設計
GraphQLではAPIをスキーマとして表現します。データベースのテーブルと対になることも多いですが、それ以外のデータも扱えます。また、すべてのカラムを公開すれば良いわけではないので、入力制御も必要でしょう。そんなGraphQLのスキーマをWeb上で設計できるのがGraphQL Editorです。## GraphQL ...
Jay - 高機能なJavaScript用REPL
Node.jsではインタプリタを用意していますが、あまり機能的ではありません。ライブラリを別途用意したり、ネットワークなどの非同期処理を書くのも面倒だったりします。それならばとスクリプトをファイルに書いて実行している人も多いでしょう。そこで使ってみて欲しいのがJayです。標準のものに比べると圧倒的に高機能なREPLです...
Scene.js - JavaScriptでタイムラインベースのアニメーション
アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。## Scene.jsの使い方JavaScr...
TradingView - ファイナンス系グラフライブラリ
世の中には様々なグラフ、チャートがあります。その一つとしてファイナンス系があります。FXや株などで表示されるグラフは特殊で、さらにデータをリアルタイムに処理するのが重要です。今回紹介するTradingViewはまさにそういった用途で使われるグラフライブラリになります。## TradingViewの使い方ローソクチャート...
Terminus - TypeScript製のターミナル
AtomやVisual Studio Codeの登場によって、Web技術を使っても十分ローカルアプリケーションとして利用できるというのが分かっています。そこで様々なソフトウェアがHTML/JavaScript/CSSで作られています。今回紹介するTerminusもその一つです。よりモダンなターミナルを提供します。## ...
ぺぺロミア - React Native製の旅行計画アプリ
旅行の計画を立てるのはとても楽しいですよね。計画を立て始めた時、実際にでかける前から旅行ははじまっていると言えるでしょう。それはプライベートに限らず、出張なども同様です。移動などでミスして出張した意味がなくなるようなことがないよう、きちんとした計画を立てるべきでしょう。そんな旅行計画を立て、Web上でも共有できるスマー...
ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント
ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。そんなケン・バーンズ効果を手軽に実現できるWeb...
Mongoku - クールなUIのMongoDB管理
MongoDBはNoSQL、ドキュメント型データベースとして注目を集めました。位置情報を扱うのに便利なデータベースでしたが、現在はMySQLやPostgreSQLも扱えるようになり、絶対にMongoDBでないといけない場面は減っているかも知れません。とはいえ個人的には今なお使っているのでMongokuのような管理UIは...
barba.js - スムーズなページ遷移を実現
Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリ...
OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介しま...
GraphQL Playground - Webとデスクトップ版が用意されたGraphQL実行環境
GraphQLはREST APIが抱えた問題を解決するAPIとして注目を集めています。開発者にとって便利なのが、スキーマが公開されていることでクエリの設計時に参照することができる点です。さらに必要なフィールドを増減できるので、API側を拡張する必要がありません。そんなGraphQLを試し、設計するためのIDEがGrap...
WWA Wing - Webブラウザで遊べるドット絵風RPG
World Wide Adventure
GitHub Viewer - GitHubのリポジトリを検索
GitHubがないと仕事にならないという開発者は多いでしょう。社内ではGitHub Enterpriseを使っていても、ライブラリはGitHub.com上で公開されていたりします。万一にもGitHub.comが落ちたりすると参照やインストールもできず詰んでしまったりします。そんな開発者の命とも言えるGitHubを検索す...
Editor.js - ブロック単位で編集するWYSIWYGエディタ
WYSIWYGなエディタは長い歴史があります。CKEditorのような重厚なものが好まれた時期もあれば、現在はWebページ上でインラインで編集できるものが好まれる傾向にあります。様々なソフトウェアがありますが、今なお決定的なものがありません。今回紹介するEditor.jsはブロックベースという特徴を持ったWYSIWYG...
Mprove - SQLを使ってダッシュボードを構築
企業においてデータの可視化は重要です。トレンドの変化などをグラフによって顕在化させることで次の一手を打ちやすくなります。しかし、そのためのシステムを構築するのは大変で、バックオフィス系のシステムはつい後回しになってしまいがちです。そこで使ってみたいのがMproveです。SQLを使ってダッシュボードを作成できます。## ...
Quirk CBT - 認知行動療法をサポートするAndroid/iOSアプリ
認知行動療法という心理療法があります。専門家ではないので詳細は省きますが、患者が意識し、自覚された思考や視覚的イメージに注目します（via 認知療法とは | 日本認知療法・認知行動療法学会