【Rails 7 + React (TypeScript)】読書好きの方向けの引用共有サービス「引用箱」をリリースしました📚 - LEFログ：学習記録ノート
読書好きの方向けの引用共有サービス「引用箱」をリリースしました 引用箱のサムネイル画像 引用箱 QuoteList はじめに LEF（@lef237）と申します。読み方はレフと申します。2022年からフィヨルドブートキャンプという学習コミュニティに入会し、Web開発の基礎的な部分から順番に学習しておりました。 このたび、ずっと開発を続けていたWebアプリをリリースしました。 名前は「引用箱」というサービスです。 「未知の書籍と出会うきっかけとして、既読した人による書籍の引用から、気になる書籍を探したいが、引用が集まっている場所がない」 という問題を解決するために作った、読書が好きな人向けの引用共有サービスです。📚🔍 ユーザーは書籍の引用を記録することができ、Kindleの共有機能とは違って、自分以外の人の引用記録も見ることができる点が特徴です。 前半ではこのサービスの概要や使い方を、後
React vs Hotwire ~ 私とHotwireとその後
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
AWS CDK は React - cockscomblog?
AWS Cloud Development Kit（以下、CDK）というものがあるが、これの提供する抽象化について考えを巡らしていたところ、唐突にこれは React だと気付いた。 CDK と React の類似性 CDK の CloudFormation Resource は、React の DOM Element に対応する。 CDK の Construct は、React の Component に対応する。 CDK でデプロイするという行為は、React における reconciliation に対応する。すなわち、CDK が内部で CloudFormation を利用して差分をとって AWS サービス変更を適用するということは、React が仮想 DOM を利用して差分をとって実際の DOM を変更することに対応している。 このような React との近似性から、CDK の提供す
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 | 東京のWeb制作会社 株式会社クーシー
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 システム開発 プログラミング 今回は、Dockerを使用してReact（React.js）の環境を構築する手順を紹介します。 Dockerでの環境構築は慣れていない人にはやや複雑です。本記事では画像つきで、初心者でもできるようにわかりやすく解説します。 実際に環境構築を行いながら書きましたので、トラブルもありました。その時の対応についてもそのまま載せてありますので、あなたのケースでお役に立つかもしれません。 ではいってみましょう。 React.jsとは？ React.jsはReactと同じもので、「React」と書かれたり「React.js」と書かれたりします。 React.jsは、Facebookが開発したJavaScriptライブラリです。コンポーネントと呼ばれる小さな部品を組み合わせて大きなアプリケー
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で外
現場のエンジニアが解説！令和最新版プログラミング独習方法。質の悪いプログラミングスクールの毒牙にかかる前に実践すべきマッチョな学習フロー
mizchi @mizchi プログラミング独習: 令和最新版 - 月額1000円のN予備校のウェブプログラミングコースでフロントエンドと Node の基本をやる nnn.ed.nico/pages/programm… - jsprimer.net を上から順になぞる - 日大尾上准教授の「Web プログラミング」のReact チュートリアルをやる zenn.dev/likr/articles/… 2021-01-05 13:27:22 リンク N予備校 プログラミングコース 初めてのプログラミングから 現場のプログラミングまで学ぶ | N予備校 N予備校 プログラミングコースは、ドワンゴの現役エンジニアが教えるプログラミング学習サービスです。プログラミング完全未経験者でも前提知識なく始められて、開発現場で活躍できるほどのスキルが身につくカリキュラムを、自分に合ったペースで学ぶことができま
M1 (Apple Silicon) Macで既存のReact Nativeプロジェクトの開発環境が整うまで
M1 Macで既存のReact Nativeプロジェクトを開発する環境が整うまでにしたことをまとめました。 Xcodeをインストール Mac App StoreからXcode 12.2をインストールします。 Homebrewをインストール 公式サイトにあるインストールスクリプトを実行すると、以下のようにRosetta 2を使用するか、他のインストールオプションを勧められます。 Homebrew is not (yet) supported on ARM processors! Rerun the Homebrew installer under Rosetta 2. If you really know what you are doing and are prepared for a very broken experience you can use another installat
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Ruboto
Ruby support can be added to any modern Android application by adding JRuby as a dependency. The Ruboto project aims to add some additional sample code to make the integration between Java, Ruby, and the Android platform a pleasant developer experience. The Apps created thereafter depend on JRuby (jruby-jars) at runtime to provide full access to Android's Java APIs. Installation is straight-forwar
RubyistのためのフロントエンドフレームワークOvto
はじめに こんにちは。yharaです。みなさんはWebアプリを作るとき何を使っているでしょうか？Ruby界隈だと、Railsと答える人が多そうですね。ではフロント側は？React、Vue.js、Angularなどいろいろありますね。 そんな中で、hyperappというフレームワークを聞いたことはあるでしょうか。hyperappはわずか400行のJavaScriptで実装された「マイクロフレームワーク」ですが、そのサイズからは考えられないほど本格的な機能を持っています。 hyperappを見て私は思いました。これはすごい、たったこれだけでReact＋Reduxのかなりの機能が提供できているじゃないか、と。そして、400行しかないのなら、これをまるごとRubyに移植できないだろうか？と。 そうしてできたのがRubyistのためのフロントエンドフレームワーク「Ovto」です。シンプルで高機能なA
Docker環境内でcreate-react-app - Qiita
業務において、開発環境をDockerで提供することになり、 ビルドのために利用しているNode.jsやnpmコマンドもDockerで提供したところ、そのあたりのバージョン管理が楽ちんになったので、 自分で作っているアプリケーションも積極的にDocker化しようかと思っている今日この頃です。 自分はネットワーク周り苦手なのですが、勉強として「Dockerを使ってcreate-react-appを使ったアプリケーションを構築」をしたいと思います。 図や単語の使い方が間違っているかもしれませんが、その場合は指摘して頂けますと幸いです。 イメージは以下のような感じです。 必要なもの Docker for Mac エディタ 手順 1. docker-compose.ymlと、Dockerfileの作成 今回はこんな感じのファイル構成にします。 /path/to/sample-app ├── dock
React Native Facebook公式サンプルソースをビルド、実行するまで - Qiita
#はじめに React Native開発にあたり、Facebook公式サンプルソース F8APP を実行できるまでの手順を書いてみました。習得の近道は公式サンプルソースを解読するのが一番と思ってます。 #Facebook公式サンプルソース F8APPについて Building the F8 App http://makeitopen.com Github https://github.com/fbsamples/f8app Google Play https://play.google.com/store/apps/details?id=com.facebook.f8 AppStore https://itunes.apple.com/jp/app/f8/id853467066?mt=8 #投稿者の開発環境 Mac OS High Sierra v10.13.3 node v9.4.0 y
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】１ - Qiita
その２【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 はじめに 後輩がReact Nativeの入門記事ないかって調べてたら僕の記事を見つけたらしい・・・。 ということで調べてみると僕がReact Nativeはじめたての頃の記事が出てきた！ 僕がちゃんとこの業界に入りだしたのもこのぐらいで、このころはQiitaすらやってなくてQiitaの発音もわからないほどだった。なのでQiitaというよくわかんないけど検索すると出てくるいろいろと記事の書いてあるサイトという認識でしかなかったと思われる。ゆえにサクラドメインでブログを作ったのだと思う。このころはgitの使い方すらわからなかった・・・・。 せっかくなのでこのサイトに書いてあることを掘り起こしつつ最近の書き方を踏襲しつつ、当時の僕でもわかるようにTodoアプリぐらいは作れるようになる
React NativeでARを体感する、Introducing Expo AR - ushumpei’s blog
9月末にExpoがアップデートされてiOSのAR Kit対応が行われました。チュートリアルが公開されたのでちょっと手を出してみました。使用する要素としては、 expo three expo-three のみです。3Dオブジェクトの生成はThree.js、レンダリングはExpo、Expo Threeという構成になっています。 Introducing Expo AR: Three.js on ARKit デモ Introducing Expo AR #1 感想 Expoの制限はあるもののARアプリをJavaScriptでかけるというのは前提となる知識量のハードルが下がるかと思います。 チュートリアルやると満足感が得られてしまうのでやや危険ですね。色々いじってみるのは大切な一歩だと思いますが、一歩踏み出した後に自分の発想が広がっていかないのがなかなか辛いところです。
【両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の流れを図で直感的にわかる ・なぜこのようにプログラミングをしたのかまでわかる この記事の対象者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - fastlane/fastlane: 🚀 The easiest way to automate building and releasing your iOS and Android apps
