ITエンジニア/デザイナ向けにオープンソースを毎日紹介

プログラミング言語 - TypeScriptの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2020/05/08

Audio DSL - AudioWorkletを手軽に扱えるDSL

Web AudioはWebブラウザ上で音楽を扱えるAPIですが、処理をメインスレッドで行う必要があります。それに対してAudioWorkletはオーディオ処理に特化したWorkerで、バックグラウンドで音声処理が可能になります。しかしオーディオ自体の処理は複雑なイメージがあります。そうした処理をDSLでシンプルにしてく...

List

  • 2020/05/03

Nautilus - Docker Composeの設定を可視化

開発時にDockerを利用している開発現場は多いでしょう。そして、複数のコンテナを組み合わせる場合、Docker Composeを使って管理しているのではないでしょうか。Docker Composeの設定を細かくこだわると、徐々に複雑なものになっていきます。そこで使ってみたいのがNautilusです。Docker Co...

List

  • 2020/05/03

markmap-lib - Markdownをマインドマップに展開

Markdownでメモを書くのに慣れると、なんでもMarkdownで書き残しておきたくなります。後はMarkdownから別なフォーマットに展開できればいいわけです。グラフィカルな部分が少ないので、コンテンツに集中できるのが大きなメリットでしょう。今回紹介するmarkmap-libはMarkdownファイルをマインドマッ...

List

  • 2020/05/01

Crossnote - VS CodeをMarkdownエディタに

Markdownエディタに求める機能は何でしょうか。例えばファイルが一覧表示になっているのは大切です。さらにタグ付けできたり、タスク管理ができたりするのも便利です。他にも添付ファイルやプレビューなど様々な機能が挙げられます。プログラミングエディタとしてVS Codeを使っている方に試して欲しいのがCrossnoteです...

List

  • 2020/05/01

Theia - Eclipse製のVS Code対抗馬

プログラミングエディタの歴史はAtomの登場で一気に変わったといえます。AtomをベースにVS Codeが登場し、一気に人気を獲得しています。VS CodeはMicrosoft製のソフトウェアですが、これだけ多くの開発者に受け入れられているのは、彼らの変革を象徴する存在ともいえるでしょう。そんなVS Code対抗馬とし...

List

  • 2020/04/30

COVID-19 Japan Web API - コロナウィルスのデータをオープンなWeb APIで公開

コロナウィルス(COVID-19)が世界的に猛威を振るう中、オープンデータ活用も多数行われています。データを可視化したり、予測に使ったりといったことも、元データが出てくればこそです。しかし、そうしたデータが見やすい形になっているかは別です。ExcelやPDFで公表している場合もあるかも知れません。そこで使ってみたいのが...

List

  • 2020/04/29

HTML DOM - 素のJavaScriptでどうDOMを操作するのか学ぼう

jQueryやVue、Reactなどを触っていると、実際のDOM操作をどう行うのか忘れてしまったりします。DOMを作ったり、追加する、変更するといった操作は意外と面倒ですが、直接行う分、高速であるはずです。HTML DOMはそんなDOM操作を素のJavaScriptで行う方法を学べるWebサイトになります。## HTM...

List

  • 2020/04/29

Storybook - フロントエンド開発者向けUIコンポーネント学習サイト

フロントエンドで利用できる技術が多様化しており、それらの使い方を効率的に学ぶ手段が欲しくなっているはずです。大事なのはその場で実行したりして確認できることで、それによって敷居が大幅に下がるはずです。今回紹介するStorybookは各種フロントエンドフレームワークに対応した、UIコンポーネントエクスプローラーです。## ...

List

  • 2020/04/28

Ocula - PWA製のお天気アプリ

天気はごくごく基本的な情報になります。スマートフォン、スマートウォッチなどにおいても天気アプリは必ず入っているものです。今日の天気、明日の天気は誰しもが気になるものでしょう。OculaはPWA(Progressive Web Apps)で作られた天気アプリになります。PWAを学ぶ上でも役立ちそうです。## Oculaの...

List

  • 2020/04/25

colors.lol - 思わず使いたくなくなるカラーパレット紹介

Web上で表現できる色は1670万色あります。これだけあったら何を選んでいいのか分からないかも知れません。主立った色には名前が付いており、その中から選ぶのもいいでしょう。そうしたカラーパレットもたくさんあります。今回紹介するcolors.lolは一風変わったカラーパレットを紹介しています。なんというか…毒舌です。## ...

List

  • 2020/04/22

CodeJar - Web上で使える小さなコードエディタ

Web上でコードを表示したい場面はよくあります。そのためのコードハイライトライブラリも多数ありますが、それは単に装飾だけ行うものです。ユーザに編集を許可するものではありません。もしWebブラウザ上で使える手軽なコードエディタを探しているならば、CodeJarを使ってみましょう。## CodeJarの使い方表示例です。!

List

  • 2020/04/19

Type Puzzles - TypeScriptの基礎、型について学ぶ

TypeScriptをこれから学習したいと考えていますか。TypeScriptはJavaScriptのスーパーセットなので、基本的にJavaScriptでできることはすべてできます。そして追加される中で最も便利で知っておかないといけないのが型の使い方です。今回紹介するType PuzzlesはTypeScriptの型を...

List

  • 2020/04/18

Fluent UI - Microsoft社製のReact向けUIコンポーネント

HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。もしWindows向けのサービスを開発しているならばFluent UIを使ってみ...

List

  • 2020/04/15

Backstage - 社内用開発者ポータル

開発者用のサービスが広まるのにつれて、チェックすべき情報が増えています。コンテナやネットワークの状態、使い方のドキュメント、各種システムのステータスも監視しなければなりません。そこで使ってみたいのがBackstageです。Spotifyが開発している開発者ポータルシステムです。## Backstageの使い方トップペー...

List

  • 2020/04/14

Uppload - 様々なサービス/画像加工に対応した画像アップローダー

画像アップロードフォームは常に悩ましい問題です。特に最近のようにWebアプリケーションで提供される場合、ファイルアップロードをAjaxで提供したいニーズがあります。ドラッグ&ドロップでファイルアップロードしたい、アップロード前に切り抜きたいなど様々なニーズがあります。今回紹介するUpploadは様々なサービスに対応した...

List

  • 2020/04/13

Airform - お問い合わせフォームをサーバレスで作成

Webサイトでよく使うのがお問い合わせフォームです。他は静的なコンテンツでいいのに、お問い合わせフォームがあるために動的にしなければならない…なんてこともあります。Googleフォームで代用できますが、デザイン的に他と合わないのが問題です。そこで使ってみたいのがAirformです。Airformはメールアドレスだけ指定...

List

  • 2020/03/26

Minesweeper - Angular製のクラシカルなマインスイーパ

Windowsにはソリティアとともに有名なゲームとしてマインスイーパが知られています。ちょっとした時間つぶしのつもりでトライして、気付いたら数時間やっていたなんて経験は誰もがあるのではないでしょうか。そんな時間を奪い去る恐ろしさを秘めたゲームがMinesweeperです。Webブラウザだけで遊べる、恐ろしいゲームです。...

List

  • 2020/03/25

Web Demo Suit - Webカメラの映像にスーツを着せる

コロナウイルスの影響により、リモートワークが行われるようになっています。開発者であれば思ったよりも影響がなかったり、むしろ通勤時間がなくなって仕事がしやすくなったという人も多いのではないでしょうか。そんな中、オンラインミーティングなどでは寝間着や変な格好で出られず、わざわざ着替えたりしているかも知れません。そんな方はW...

None

  • 2020/03/19

Edtr.io - React製のWebページ編集コンポーネント

Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr...

List

  • 2020/03/10

OpenChakra - Chakra UI用のビジュアルエディタ

Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。#...