【Rails 7 + React (TypeScript)】読書好きの方向けの引用共有サービス「引用箱」をリリースしました📚 - LEFログ：学習記録ノート
読書好きの方向けの引用共有サービス「引用箱」をリリースしました 引用箱のサムネイル画像 引用箱 QuoteList はじめに LEF（@lef237）と申します。読み方はレフと申します。2022年からフィヨルドブートキャンプという学習コミュニティに入会し、Web開発の基礎的な部分から順番に学習しておりました。 このたび、ずっと開発を続けていたWebアプリをリリースしました。 名前は「引用箱」というサービスです。 「未知の書籍と出会うきっかけとして、既読した人による書籍の引用から、気になる書籍を探したいが、引用が集まっている場所がない」 という問題を解決するために作った、読書が好きな人向けの引用共有サービスです。📚🔍 ユーザーは書籍の引用を記録することができ、Kindleの共有機能とは違って、自分以外の人の引用記録も見ることができる点が特徴です。 前半ではこのサービスの概要や使い方を、後
Rails 7とReactによるCRUDアプリ作成チュートリアル（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Create a CRUD App with Rails and React · James Hibbard 原文公開日: 2022/04/01 原著者: James Hibbard 日本語タイトルは内容に即したものにしました。 React logo is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0. ほとんどのWebアプリケーションでは、何らかの形式でデータを永続化する必要があります。これは、サーバーサイド言語で作業する場合はシンプルにやれるのが普通です。しかし、そこにフロントエンドのJavaScriptフレームワークも加わってくると、少しややこしくなり始めます。 本チュートリアルでは、Ruby on Rai
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】｜川西発之
※※※※※ 本記事は2018年5月に執筆されました．当時の React Native の環境から変わっている部分もありますので，2020年5月より記事の値段を大幅値下げすると同時に，記事更新や質問等のサポートの対象外とさせて頂きます． m(_ _ )m 1/3 【ウェルカム画面編】：799円 → 199円 2/3 【ホームタブ編】：899円 → 299円 3/3 【プラスボタン編】：999円 → 399円 ※※※※※ 1. ウェルカム画面編 ← 今ココ 2. ホームタブ編 3. プラスボタン編 note.muの中の方からもコメント頂けました！ありがとうございます！ ↑このシリーズの最終完成形 ↑この記事での目標 この記事で得れる物・上図のスマホアプリが作れるようになる ・React Nativeの流れを図で直感的にわかる ・なぜこのようにプログラミングをしたのかまでわかる この記事の対象者
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
React.rb·ReactをRubyで書く MOONGIFT
最近にわかに盛り上がっているReactですが、独自の書き方やHTMLとJavaScriptが密接することに対して何となく避けてしまっている人も多いかも知れません。サーバサイドでも使えると言ってもnodeを使うのが難点に感じる人もいます。 もしあなたがRuby使いで、Reactを使ってみたいならばReact.rbを使うという手もありそうです。 React.rbの使い方 React.rbはOpalを使い、RubyでReactを使えるようにするというかなりチャレンジングなソフトウェアです。 例えばこんな感じです。 class HelloMessage def render React.create_element("div") { "Hello World!" } end end puts React.render_to_static_markup(React.create_element(He
ReactNativeでiOSとAndroidの漫画アプリを同時に作る | Nagisaのすゝめ
はじめに NagisaでiOSエンジニアをしている伊藤です。 今回はReactNativeというスマホアプリのクロスプラットフォーム開発ツールを使った取り組みについて紹介をしたいと思います。 アプリのクロスプラットフォーム開発といえば、以前ではTitaniumやCordovaといったWebViewをベースとしたアプリをイメージするものが多く、純粋なネイティブアプリに比べるとどうしてももっさりとした感覚になってしまい、あまり採用されることはなかったように思います。 ReactNativeではこのもっさりとした感覚はなく、とてもスムーズに動作するアプリを作れます。その理由はWebViewを使用せず、ビューやラベル、スイッチなどで本当のネイティブコンポーネントを使った画面が構成されるところにあります。これにより国内でもにわかに人気が出てきています。 UPTOON!のReactNative化 UP
ReactやwebpackもサポートしたRails 5.1の新機能・変更点 - Qiita
はじめに 2016年のバージョン5.0のリリースに引き続き、2017年の春にRuby on Rails（以下Rails）のバージョン5.1がリリースされました。 Rails 5.0は、APIモードやAction Cableなど、APIやWebSocket周りの新機能を中心としたリリースでしたが、Rails 5.1は、React / Vue.js / webpack / Yarn（npmパッケージ）のサポートなど、フロントエンド周りの新機能を中心としたリリースとなりました。 本記事では、GitHubのRailsプロジェクトのIssuesやPull Requestsの履歴、Railsの公式ブログの記事をもとに、Rails 5.1の主要な新機能・変更点の紹介を行います。 ※ 他のバージョンのRailsの主要な新機能・機能追加・変更点については以下を参照してください。 今から知っておきたいRail
React.jsでFormを扱う - Qiita
今回はReact.jsでのFormの扱いについて書きたいと思います。 例えばReact.jsでは↓のようなことをすると変更出来ないテキストフィールドになってしまいます。どうしてなのかという話ですね。 // ダメ <input type="text" value="initial value" /> // ダメ <input type="text" value={this.state.textValue} /> var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, changeText(e) { this.setState({textValue: e.target.value}); }, render() { return ( <div> <p>{this.st
React 初心者が初級者になるまで - Qiita
はじめに この記事は ACCESS Advent Calendar 2016 25 日目 最後の記事になります。 クリスマスですね、いかがお過ごしでしょうか。 今日は React 初心者が初級者になるまで というタイトルで、初級者になったつもりのわたくし @kasaharu がお届けいたします。 さっそく始めていきます。 2017 年こそ React を触りたい人が知っておきたいこと props props はコンポーネントに渡す任意のプロパティを指す そのときの型は string, number, function, node などが指定できる // 金額を表示する Currency コンポーネントに // 表示する金額のための変数 amount と // 金額を変更するためのイベントハンドラ editAmount() を渡す場合 <Currency amount={amount} on
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
Reactでinputを扱う - Qiita
Reactでinputを扱う(TypeScript版)という改訂版を書きました。 input要素をReactで使うとReactがinputを自分でコントロールするので注意が必要。 var React = require('react'); var ReactDOM = require('react-dom'); var App = React.createClass({ render: function() { return ( <div> <label>value a</label> <input type="radio" name="aradio" value="A" checked="checked" /> <br /> <label>value b</label> <input type="radio" name="aradio" value="B" /> <hr /> <labe
webpack+React+material-uiの環境を最小手順で作成 - Qiita
などをやってください。 以下の内容は古くなりました。 表題通りでReactとmatrial-uiを使ったウェブページをwebpackを使って最小手順で作るための手順をまとめた。 準備 まずはディレクトリを作成してnpmの準備をする。 $ mkdir webpack-exe $ cd webpack-exe $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `np
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
今からはじめるReact.js〜コンポーネントをまとめる〜 - Qiita
前回→今からはじめるReact.js〜初めてのコンポーネント〜 [2016/05/18追記] 当記事のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では 今からはじめるReact.js〜React ver0.14〜 で記載のように実装する必要があります。 複数のコンポーネントを一つにまとめる 前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。 ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。 index.jsを以下のように書き換えます。 var React = require('react'); //ヘッダの定義 var Header = React.createClass({ render: function(){ return ( <h1>ヘッダです</h1> ); } }); //ボデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドを楽にするために
今、我々は、 GUI の設計について 何を考えるべきか
