プログラミング言語 - TypeScriptの記事一覧
Prettier - テキストエリア内のコードを見やすく整形
プログラミングについて質問する際に、綺麗なコードで質問するかどうかで回答してもらえる可能性は変わってきます。誰しもインデントも乱れて改行も一定でない汚いコードを解析してまで質問に答えたいと思わないでしょう。そこで使ってみたいのがPrettierです。テキストエリア上でコードを綺麗に整形してくれます。## Prettie...
PeerTube - P2Pを使った分散化動画共有サービス
最近は分散化、非中央化の流れがあります。仮想通貨、ブロックチェーンであったり、Mastodonも分散化技術を特徴としています。分散化によって、ベンダーロックインも避けられ、多様性も生まれるでしょう。今回はYouTubeのような動画共有サイトを分散化技術で実現するPeerTubeを紹介します。## PeerTubeの使い...
Trackless - GoogleアナリティクスをGDPR対応でオプトイン/アウト可能に
EUの個人情報保護施策、GDPRがスタートしました。各社、個人情報をどう保護するか、どう使うかといった対応で大あらわになっています。すでにFacebookやGoogleが訴えられたという話もあります。そんなGDPRですが、Googleアナリティクスで使うための仕組みとしてTracklessを使うと良さそうです。## T...
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。そこで使ってみたいのがVue Designerです。Visual Studio Codeプラ...
はてなブックマーク検索PWA - オフラインでも使えるはてなブックマーク検索
PWA（Progressive Web App）というキーワードに注目が集まっています。Webアプリケーションがオフラインで実行できるようになり、アプリのようにスマートフォンにインストールできるようになる仕組みです。そんなPWAを体感できるWebアプリケーションがはてなブックマーク検索PWAです。はてなブックマークの検...
Vipercard - 懐かしのHypercardを現代に復活
表現したいと思った人が自由にデザインし、アプリケーションを作れる環境として有名だったのがHypercardです。白黒画面の時代から使われており、クリックした時や選択肢によって自由にフローを変えたりしてアプリケーションが作れました。自分で作ったり、人が作ったものをダウンロードして遊んだ人も多いはずです。そんなHyperc...
Graphdoc - GraphQLスキーマからドキュメントを生成
Web APIとしてGraphQLを提供するサービスが増えています。従来のREST APIでは限界のあった、データ構造の自由さに対応するにはGraphQLがベストな選択でしょう。しかしREST APIとは異なるために、求められる情報も変わってきます。そこで使ってみたいのがGraphdocです。GraphQLのスキーマを...
JavaScript Tracker - DOMイベントを捕捉するGoogle Chrome機能拡張
JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。そこで使ってみたいのがJavaScript Trackerです。JavaScriptの...
Stimulus - 素のHTMLを活かしたBasecamp製のJavaScriptフレームワーク
最近のフロントエンドではReact/Angular/VueなどVirualDOMを使ったライブラリが増えています。確かに便利なのですが、それぞれ独自のHTMLタグを使うので学習コストが大きくなります。プログラマは良くとも、デザイナーでは難しいこともあるでしょう。そこで使ってみたいのがStimulusです。既存のHTML...
pxt-microbit - エミュレータもあるmicro:bit向けビジュアルプログラミング環境
最近は数多くのマイコンが登場しています。有名なものとしてはRaspberry Pi、Arduino、mbedなどが知られていますが、それだけに限りません。特定用途であったり、より初学者向けであったりと多様に存在します。今回はその一つ、micro:bit向けのビジュアルプログラミング環境、pxt-microbitを紹介し...
RemoteDebug iOS WebKit Adapter - iOSのSafari/WebViewのデバッグにChromeやVS Codeを使う
iOSのSafariで表示したWebサイトをデバッグしようと思うとSafariが使われます。Safariの開発者ツールも使い勝手は悪くありませんが、Google Chromeのに慣れている方も多いでしょう。また、Visual Studio Codeのデバッグ機能と組み合わせたいと考える方もいるでしょう。そうした方にお勧...
Octohint - GitHub上でインテリセンスを有効に
開発者であればIDEでよく提供されるインテリセンスの便利さを感じることでしょう。関数の概要であったり、引数を表示してくれることで開発のしやすさ、生産性が大きく変わってきます。そんなインテリセンスをGitHub上でで提供するのがOctohintになります。## Octohintの使い方Octohintをインストールすると...
じゃぱりうぉっち - 某アニメのキャラクターを使った懐かしいUIのゲーム
最近のゲーム専用デバイスではリッチなゲームばかりになり、スマートフォンでは予算ばかりかかる割に結局ポチゲーといったものが増えています。そんな中、インディーゲームはアイディアがこらされた面白いものが出ています。今回はノスタルジックで面白い、某アニメのキャラクターが題材になったゲーム、じゃぱりうぉっちを紹介します。## じ...
text-map-kuromoji - Web上で形態素解析&ビジュアライズ
形態素解析は日本語のテキストを扱う上でとても重要な技術になります。しかし環境をセットアップしたり、解析結果からどう情報をピックアップするかなどを分析する必要があります。そうした形態素解析を手軽にWeb上で行い、さらに結果の分析が容易にできるのがtext-map-kuromojiです。## text-map-kuromo...
SlackStream - 複数のSlackチーム/チャンネルのメッセージを一つの画面にまとめる
Slackは幾つのチームに入っていますか。コミュニティであったり、企業であったりと目的に応じてチームを分けて管理していると思われます。個人的には常に10個以内に留めるようにしています（それ以上になると専用フロントエンドでチーム切り替えが面倒になるので）。しかし色々なチームで同時に話していたりすると追いかけるのも大変にな...
GraphQL Playground - Web上でGraphQLを試す
GraphQLはREST APIを越えるかも知れない存在として注目を集めています。どういったデータが欲しいかをクライアント側で指定できるので、必要に応じてデータ構造を変えつつ最適な形で取り出せるのが魅力です。そんなGraphQLを試せる環境としてGraphQL Playgroundがあります。開発のお供にあると便利そう...
Phosphor Float Area - 自由度の高いレイアウト変更ライブラリ
業務システムなどでは情報をいかに分かりやすい整理できるかが作業効率化の肝になります。しかし担当する業務であったり、作業によって必要な幅は違ったりします。そうした時にユーザ毎に好きな配置に変更できる仕組みは便利です。使えるライブラリはPhosphor Float Areaです。## Phosphor Float Area...
AssemblyScript - WebAssemblyに変換できるTypeScriptのサブセット
JavaScriptはWebブラウザ上で実行する際にソースコードが見えてしまう問題がありますが、それはWebAssemblyによって解決できようとしています。しかし、改めて別な言語を覚えるのに二の足を踏んでしまっている方も多いでしょう。そこで使ってみたいのがWebAssemblyです。TypeScript（のサブセット...
Tubutler - とてもシンプルなYouTubeプレイヤー
YouTubeはとても楽しいサービスですが、動画を見るために不要な情報がたくさん並んでいます。コメントや余計なメニューはいらない、とにかく動画を見たいんだと考える人は多いでしょう。そうした人にお勧めなのがTubutlerです。とてもシンプルで使い勝手の良いYouTubeプレイヤーです。## Tubutlerの使い方動画...
Kactus - デザイナー向けのGitクライアント
プログラマーはGitをはじめとするバージョン管理の恩恵を強く感じているでしょう。しかし開発に携わる方はプログラマーだけではありません。デザイナーだってもっとGitを使いこなしたいと思っているはずです。そんなデザイナーの中で、Sketchを使っている方にお勧めなクライアントがKactusです。## Kactusの使い方最...