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上
現場のエンジニアが解説！令和最新版プログラミング独習方法。質の悪いプログラミングスクールの毒牙にかかる前に実践すべきマッチョな学習フロー
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予備校 プログラミングコースは、ドワンゴの現役エンジニアが教えるプログラミング学習サービスです。プログラミング完全未経験者でも前提知識なく始められて、開発現場で活躍できるほどのスキルが身につくカリキュラムを、自分に合ったペースで学ぶことができま
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の流れを図で直感的にわかる ・なぜこのようにプログラミングをしたのかまでわかる この記事の対象者
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
フロントエンドを楽にするために
フロントエンドを楽にするために Qiitaを支えたい技術 at 時雨祭 About HN: mizchi Qiitaの方からきました(入社半年たったらしい) Reactオジサンはそろそろ飽きてきた Angularに興味が無いのでこっちにきた 最近の業務 Kobito for Windows Closedβ中: もうちょい待ってろ お前らウェブエンジニアはWindows使わないのでβユーザー集めにくいんじゃ 省力モード 一昨日がClosedβリリースだったんで察してくれ！！！ ついさっきまでバグフィックス用のビルド作ってた Qiitaを支える技術? 4ヶ月ほどほぼソロ作業 正直カウボーイぎみ OSSでドキュメントガンガン書いてカバー(したい) 業務から派生したOSS mizchi/arda Flux フレームワーク mizchi/stone-skin IndexedDb ラッパー mizch
ReactNativeでiOSとAndroidの漫画アプリを同時に作る | Nagisaのすゝめ
はじめに NagisaでiOSエンジニアをしている伊藤です。 今回はReactNativeというスマホアプリのクロスプラットフォーム開発ツールを使った取り組みについて紹介をしたいと思います。 アプリのクロスプラットフォーム開発といえば、以前ではTitaniumやCordovaといったWebViewをベースとしたアプリをイメージするものが多く、純粋なネイティブアプリに比べるとどうしてももっさりとした感覚になってしまい、あまり採用されることはなかったように思います。 ReactNativeではこのもっさりとした感覚はなく、とてもスムーズに動作するアプリを作れます。その理由はWebViewを使用せず、ビューやラベル、スイッチなどで本当のネイティブコンポーネントを使った画面が構成されるところにあります。これにより国内でもにわかに人気が出てきています。 UPTOON!のReactNative化 UP
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - fastlane/fastlane: 🚀 The easiest way to automate building and releasing your iOS and Android apps
今、我々は、 GUI の設計について 何を考えるべきか
