RailsエンジニアのためのNext.js入門 - hokaccha memo
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
俺が考えた最強の Reactのステートレスコンポーネントの書き方 - Qiita
/* @flow */ import React from "react" import styled from "styled-components" import pure from "recompose/pure" type Props = {| value: string |} export default pure(function Example(props: Props) { const { value } = props return ( <Container> <Value>{value}</Value> </Container> ) }) const Container = styled.div` width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita
Redux Advent Calendar 2016 23日目 初めてAdvent Calendarに参加させていただきます。 当初はReduxとcreate-react-appを使って、サクッと素振りできる環境構築手順をまとめようと思ったのですが、ここ最近で自分が一番悩んだ「react-redux」についてReduxを始める方へ同じドツボにはまらないようにという願いを込めて投稿させていただきました。 react-reduxとは？ react-redux公式より引用 Official React bindings for Redux. Performant and flexible. React公式のReactとReduxをバインディングするライブラリ パフォーマンスと柔軟性があります ここで出て来る「柔軟性(flexible)」というのがこのライブラリが初見殺しと言われる所以となっており
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
もうNativeOnly開発者はいらないのかもしれない - mobiledev日記
2017 - 01 - 12 もうNativeOnly開発者はいらないのかもしれない 駄文 ReactNativeさえあればもう Android / iOS 固有のスキルはいらないんじゃね？と思い始めてしまいました。 Qiita他を見る限り、 Web専門の人が結構ReactNativeでアプリを組み始めている んですよね。 間違いなく自分のReactNativeより上手に組んでいるでしょう。 となると、もう Java /Swift/Obj-Cでアプリを組む必要ってない＝ガチNativeしか開発できない人はもう不要になるのではないかという気がしました。 OS固有環境(以下ガチNativeと呼びます)とくらべてReactNativeで開発するメリットとして クロスプラットフォーム View構築が楽 間違いなく iOS -AutoLayoutよりは楽 Android でも同じViewの使い回しは
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
Reactハンズオンを主催しました - ムログ
こんにちは、むろです。 先日、Reactハンズオンという勉強会を開催しました。 やることになった経緯 「デザイナーだから…」を言い訳にしてReact書かない(具体的に言うと、JSXは書くけどpropsとかstateとかはエンジニアさんにお任せする)という仕事スタイルに限界を感じていたタイミングで、実務でReact経験があって教えてくれそうなひと( おおきさん・もろみーさん )を見つけることが出来たからです。 「わたしにReact教えてください。あ、ていうかせっかくなのでついでに他にも教わりたい人を呼びましょうか、20人ぐらい。」 という感じです。 当日までにやったこと あくまで、わたしも生徒の気持ちなので当日まではあえて予習していかないようにしていました。 なので、準備はイベントを実施するためのいろいろです。 これまで勉強会は参加するサイドだったのでどんなものを準備したらいいのかわからなく
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
3分で分かるFacebook Flow - teppeis blog
というか3分ぐらいの情報しかまだ出てきてないんだけど。 先月の@Scale 2014で発表されたFacebookのFlowについて、おそらく唯一のオフィシャルな情報であるこの発表動画を見て分かったことを紹介（ざっと見ただけなので間違ってたらごめんなさい）。 JavaScript Testing and Static Type Systems at Scale - @Scale 2014 - Web 静的な型チェックができるトランスパイラ シンタックスはTypeScript互換 なのでnew languageとかaltjsとか言ってない Code Intelligent Server: コンパイラはサーバー型 モジュール毎にインクリメンタルに型解析をアップデートする 高度に並列化していて高速 クライアントツールは、コンパイラサーバーに型情報のクエリを投げる ES6の各種シンタックスをサポート
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
27歳フリーランスエンジニアが1200万稼いでみて、得たものと失ったもの | Permanent Til
Private Presentation