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

フレームワーク - Reactの記事一覧

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

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

もっと見る

List

  • 2020/11/15

Resume builder - JSONから履歴書/レジュメを生成

日本でいえば履歴書、海外ではレジュメは就職や転職の際によく使われます。一般的な履歴書では情報が足りないのか、多くの場合業務経歴書なども求められます。開発者の場合、経験が重視されることが多いので、どういったプロジェクトにどういったポジションで関わっていたのかを明記することでしょう。今回紹介するResume builder...

List

  • 2020/10/09

SmartBlock - ブロックベースのReact用WYSIWYGエディタ

ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。## SmartBlockの使...

List

  • 2020/10/03

Arwes - サイバーパンクな世界を再現するWebデザイン

開発者であれば、誰しもSFに興味を持つはず(個人の意見です)。近未来を舞台にした映画は数多くありますが、その多くで電気的な、かつ薄暗い世界が描かれています。粗暴な人たちがいたり、裏路地のような看板が並ぶ中、デバイスや乗り物だけは進化している世界です。そんな世界観にぴったりなWebデザインフレームワークがArwesになり...

List

  • 2020/08/20

React Guitar - ギターのコード表示と音の確認ができるReactコンポーネント

コロナ禍にあって、自宅で過ごす時間が長くなっている中、新しい趣味を見つけている人が大勢います。そんな中にはギターなどの楽器をはじめてみたという人もいるのではないでしょうか。ハイレベルなものではなく、趣味としてはじめてみるのはよさそうです。そんなギターの練習としてReact Guitarを使ってみてください。いわゆるギタ...

List

  • 2020/08/18

Grid - スプレッドシート風にもできるReactのグリッドコンポーネント

表計算ソフトウェアは様々な場面で使われています。日本においてはExcel職人と呼ばれる人たちによって、あらゆるドキュメントやアプリケーションがExcel上で展開されたりします。ちょっとしたデータベースとして使ったり、BIツールのUIになったりと大活躍していることでしょう。そんな表計算インタフェースを自分のアプリケーショ...

List

  • 2020/08/13

Spaceboard - Markdown対応の付箋紙サービス

アイディアを集めたり、まとめる時に付箋紙を使っている人は大勢います。ブレインストーミングなど、チームで使っている人もいるでしょう。そうしたサービスも幾つかありますが、大抵テキストしかサポートしていません。そうした点に不満を感じている方はSpaceboardを使ってみましょう。Markdownをサポートした付箋紙サービス...

List

  • 2020/07/11

Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ

HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。## Grid.jsの使い方...

List

  • 2020/06/01

React Flow - Reactでノード型インタフェースを実装する

ノード同士を連結するインタフェースは色々な場面で使えます。ビジュアルプログラミングであったり、マインドマップのような思考整理、ノーコーディングプラットフォームでも使えるでしょう。そうしたノードベースのビジュアルインタフェースを作る際に使えるのがReact Flowです。Reactで開発する際に便利でしょう。## Rea...

List

  • 2020/05/24

styled-icons - 13,500種を超えるアイコンフォント集

Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。## styled-i...

List

  • 2020/04/22

Raycast - HTML5でレイキャスティングを楽しむコンポーネント

3Dゲームでよくあるのがレイキャスティングによる表示です。壁などが垂直に表示されて、前後左右に動いたり、視点を変えると見える映像が変わるというものです。DOOMなどでよく知られている表示形式です。そんなレイキャスティングをReactで再現したのがRaycastになります。HTML5でも十分に3Dゲームが楽しめそうです。...

List

  • 2020/04/07

FlowTask - React製。モバイルデバイス対応のカンバン

カンバンはタスク管理する際によく使われるツールになっています。ステータスを横に、各タスクは縦に並ぶので、各ステータスにおいて、どれくらいのタスクがあるのかが一目で分かります。ただ、どちらかといえば広い画面向きの表示といえそうです。そこで使ってみたいのがFlowTaskです。スマートフォンなど小さな画面でも使えるタスクボ...

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を使ったデザインを行えます。#...

List

  • 2020/02/26

drop.lol - WebRTCを使って任意の相手とファイルの送受信

ファイルを送受信というのは意外と面倒です。特に目の前の相手にファイルを送りたい時です。メールアドレスを聞くのも面倒ですし、そのためにソーシャルメディアを交換するのも手間です。ファイル共有サービスを使おうにも、そのURLを通知するのはどうしたらいいでしょうか。そこで使ってみたいのがdrop.lolです。共通のURLを介し...

List

  • 2020/02/18

Jira clone - React製のJiraクローン

JiraといえばAtlassian社が提供している課題管理、プロジェクト管理になります。大規模な開発をサポートし、企業規模の大きなところで使われているイメージがあります。他のAtlassian製のサービスと連携できるのも強みです。そんなJiraのクローンを目指すのがJira cloneです。新しいテクノロジーを使ったモ...

List

  • 2020/01/28

React Spectrum - カラフルなテキスト用プレースホルダーを生成

Webやアプリのデザインを行う際に、アテで文字列を適用します。同じ文字を繰り返す、小説の一文を使うなど様々な方法がありますが、むしろテキストでない方がいいこともあるでしょう。そんな時に使ってみたいのがReact Spectrumです。カラフルなプレースホルダーを生成します。## React Spectrumの使い方生成...

List

  • 2019/12/28

Markdown Editor - シンプルなWebベースのMarkdownエディタ

Markdownエディタは多数存在します。それらを使うことで、自分のWebアプリケーション内にMarkdownを使った編集機能を簡単に追加できます。特に開発者向きのWebサービスで役立つでしょう。今回紹介するMarkdown EditorはそんなMarkdownエディタの一つです。シンプルですが、使いやすいエディタです...

List

  • 2019/11/17

Mobile First Animation in React - React製のスマートフォンアプリ風UXコンポーネント

Webがどんどんネイティブアプリに近い体験を提供できるようになっています。WebブラウザのAPIもそうですが、アニメーションの高速化によって、スマートフォンアプリのようなUXも実現できます。今回紹介するMobile First Animation in ReactはモバイルWeb向けにアニメーションを提供するReact...

List

  • 2019/11/11

TinaCMS - React製のWebサイト編集ツール

Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目...

Missing

  • 2019/10/26

React SlideShow UI - Slideshare/Speakerdeck風の表示を行うReactコンポーネント

スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。今回紹介するReact SlideShow UI...