タグ

ReactとJavaScriptに関するjsstudyのブックマーク (55)

  • React初心者がReactを学ぶために使用したサイトや書籍

    Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない 注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。(私もまだちゃんと理解はしてない。。) ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち

    React初心者がReactを学ぶために使用したサイトや書籍
  • Recoil について勉強した

    Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:

    Recoil について勉強した
  • Vercel

    Vercel@rauchg|April 21, 2020 (5y ago)51,036 views Also available in: English. 訳註: Next.jsの生みの親の一人で、Vercel社のCEOを務める@rauchgによる記事の翻訳です。原文はこちら。訳者はVercelエンジニアであり、ハンス・ロスリングほか著『FACTFULNESS』の共訳者でもある上杉周作(@chibicode)。ちなみに、Vercel社はこのたび社名をZEITから改名しました。公式発表はこちら。 日、私達は社名をVercelに改め、2100万ドルの資金調達を実施したことを公表しました。資金調達においては、錚々たる顔ぶれのVC(Accel、CRV)や個人投資家の方々(Jordan Walke、Nat Friedman、Pete Hunt、Jessie Frazelle、Soleio、Nav

    Vercel
    jsstudy
    jsstudy 2020/04/25
    私達は、Jamstackのウェブサイトを作り・試し・公開する仕組みの質を極限まで追求し、ゆくゆくはフロントエンド開発の体験を再定義したいと考えています。
  • JMOOCのJavaScript講座 - JavaScript勉強会

    無料で学べる「JMOOC」というオンライン講座があります。 JMOOCの中に、JavaScriptの講座もありました。 JMOOC https://www.jmooc.jp/ www.jmooc.jp ja.wikipedia.org 一般社団法人日オープンオンライン教育推進協議会(Japan Massive Open Online Courses Promotion Council)は、2012年より米国で始まった無償教育サービス「MOOC」(オンラインで大学レベルの授業を無償で公開し、終了条件を満たした受講者に修了証を提供する)の日語での無償提供及びその普及・拡大を目的とし、2013年11月に設立された非営利団体である。 略称は「JMOOC(ジェイムーク)」。 JavaScript講座 https://www.fisdom.org/F00000125/ www.fisdom.org

    JMOOCのJavaScript講座 - JavaScript勉強会
  • React Native ~JavaScriptによるiOS/Androidアプリ開発の実践

    2020年5月30日紙版発売 髙木健介,ユタマこたろう,仁田脇理史 著 A5判/688ページ 定価4,378円(体3,980円+税10%) ISBN 978-4-297-11391-9 ただいま弊社在庫はございません。 Gihyo Direct Amazon 楽天ブックス 丸善ジュンク堂書店 ヨドバシ.com 電子版 Amazon Kindle ブックライブ 楽天kobo honto 書のサポートページサンプルファイルのダウンロードや正誤表など このの概要 「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと,速度やUIがネイティブより劣ってしまいがち」 こんな課題は,React Nativeを使えば解決できます。 React Nativeは,iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラ

    React Native ~JavaScriptによるiOS/Androidアプリ開発の実践
    jsstudy
    jsstudy 2020/04/15
    "ReactやTypeScript,アプリ設計・開発,テスト,リリースまで,React Nativeによるアプリ開発のすべてを解説。" 688ページ
  • 2020年のウェブフロントエンドエンジニアが学び実践すべきこと|erukiti

    先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。 今回の記事は、その先にあるものです。 モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ(HTTP/HTML/JS/CSSその他)によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。 ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。 ソフト

    2020年のウェブフロントエンドエンジニアが学び実践すべきこと|erukiti
    jsstudy
    jsstudy 2020/04/06
    「公式を読め」→正論(普通は読む)=この人が書いた本も読まなくてOKなの?(金にならないから路線変更?)最新のJS事情は英語で学ぼう。WebAssemblyはまだ来ない?FBはReasonMLも開発=好きなAltJSをトランスパイルすればOK
  • 静的サイトジェネレーター Gatsby - Qiita

    静的サイトジェネレーターとは? Static Site Generator(SSG) WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり

    静的サイトジェネレーター Gatsby - Qiita
  • 現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti

    この記事は、ウェブ技術の開発者(Java, PHP, Ruby, Go... 全て含む)のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。(Noteさん!その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです!) 対象読者は、Java, PH(以下略)などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ

    現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti
    jsstudy
    jsstudy 2020/03/31
    ちなみにTypeScriptの言語デザイナーであるアンダース・ヘルスバーグ氏は過去の技術も熟知している。「巨人の肩の上にのる」=改善とは過去の上に構築される差分だから。https://www.infoq.com/jp/news/2016/05/anders-hejlsberg-compiler/
  • 入門GUI ーWebブラウザで作る本格インタラクションー:複雑GUIの会

    書は、Web ブラウザにおける格的な GUI の入門書です。 Web ブラウザに期待される役割は年々増してきています。 ネイティブアプリ顔負けのデザインツールや、ドラッグアンドドロップでの操作が必要なフォームを作りたくなったとして、我々は何に気をつけるべきなのでしょうか? そうでなくとも、これまで HTML / CSS / JavaScript で実装するのが大変だった UI をどう実装するべきなのでしょうか? この点を書は重点的に扱います。 書では定番のセレクトボックスやヘッダーレイアウトの他、バウンディングボックスやツリーといったドラッグを伴う UI なども実装していきます。 苦しくも楽しい、Web ブラウザの複雑 GUI の世界がここにあります。皆さんもエディタとブラウザを開きながら、足を踏み入れてみましょう。 関連ワード: GUI, 複雑GUI, SVG, React, V

    入門GUI ーWebブラウザで作る本格インタラクションー:複雑GUIの会
  • Next.jsのドキュメントを全部読んでみた - $shibayu36->blog;

    最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか!ただ全部吸い込まれるのは使いづらそう https://nextjs.org/docs/routing/shallow-routing router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう import { useEffect } from 'react' imp

    Next.jsのドキュメントを全部読んでみた - $shibayu36->blog;
    jsstudy
    jsstudy 2020/01/16
    "最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。"
  • TypeScriptを使って嬉しかったこと - Qiita

    新人「先輩、TypeScriptのコーディングできました!」 先輩社員「どれどれ」 先輩社員「いやそこら中コンパイルエラーだらけ...なのは型システムが働いてる証拠だ!」 先輩社員「そうだろ?」 先輩社員「型は...ガードレールだ」 先輩社員「進むべきじゃない場所へ進もうとしたら、ちゃんとブロックしてくれる...」 (ぺこぱ風) ってことで、静的型付言語って良いですよね。 今回はTypeScriptを使ってみて嬉しかったことを書いてみます。 登場人物 ワイ・・・ワイ(36歳) 社長・・・社長 ハスケル子・・・インターンの中学2年生 今日から新しいプロジェクト開始 社長「おーい、やめ太郎、ハスケル子ちゃん」 社長「新しいお仕事を獲得してきたで」 社長「技術記事投稿サイトを作る案件や」 ワイ「おお〜、さすが社長はんや」 社長「おおきにやで」 社長「ほんで、そのお仕事の話なんやけど」 社長「クラ

    TypeScriptを使って嬉しかったこと - Qiita
    jsstudy
    jsstudy 2020/01/14
    ワイ「型ってなんか、コメントみたいな効果もあるんやね」「このプロパティには文字列を入れてくださいな、みたいな」 ハスケル子「しかも、ちゃんと守らなきゃ前に進めない...」「強制力を持ったコメントですよね」
  • 2020年にJavaScriptフレームワークをちゃんとはじめるために。|榊原昌彦

    結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日語化されており、入門書もでているJavaScriptフレームワークにはAngularReactVueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLJavaScriptTypeScript)を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。

    2020年にJavaScriptフレームワークをちゃんとはじめるために。|榊原昌彦
    jsstudy
    jsstudy 2020/01/05
    すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。・Angularは、HTMLとJavaScript(TypeScript)を分割してかきます。・Reactは、JavaScriptの中にHTMLを書きます。・Vueは、HTMLにJavaScriptを書きます。
  • JSフレームワーク事情2020年始め|erukiti

    この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日ではVueReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは

    JSフレームワーク事情2020年始め|erukiti
    jsstudy
    jsstudy 2020/01/04
    シェアを参考にしつつも、最終的には実際に使ってみて一番使いやすいと思ったツールを採用すべき。ReactはTypeScriptの他に、Facebookが開発しているReasonMLというAltJSとも相性が良い? https://reasonml.github.io/reason-react/
  • Elmをプロダクトで一年書き続けた感想 - Runner in the High

    この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「?」になるかもしれない(というか、昔の自分がそうだった)が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う

    Elmをプロダクトで一年書き続けた感想 - Runner in the High
  • 歴史から学ぶ現代のフロントエンド

    フロントエンドカンファレンス福岡2019 の資料です。 https://frontend-conf.fukuoka.jp/

    歴史から学ぶ現代のフロントエンド
  • そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。|榊原昌彦

    「jQueryはオワコン」「いや、jQueryは便利!」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life(公式に廃止)が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj

    そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。|榊原昌彦
    jsstudy
    jsstudy 2019/11/15
    jQueryとその後のJSフレームワーク(React、Vue等)の顕著な違いはDOMの仮想化。jQueryの使い方を理解できる人ならVue.jsも使えるはず。
  • Gatsby - daily-dev.net

    jsstudy
    jsstudy 2019/11/08
    NetlifyCMSで、記事の作成を行い、Gatsbyで、ビルド中にNetlifyCMSからデータを取得して、静的ファイルに変換します。 NetlifyとGatsbyを組み合わせれば、特定のブランチにpushすれば、自動でビルドして、サイトを更新できます。
  • Next.jsの人気記事 1254件 - はてなブックマーク

    要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APINext.jsAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。2週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま

  • Google Search

    If you're having trouble accessing Google Search, pleaseclick here, or sendfeedback.

  • Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか

    静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMスタック」です。JAMスタックとは何なのか、なぜJAMスタックが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JAMスタックとは JAMスタックを使用する利点 JAMスタックはなぜ人気があるのか まとめ JAMスタックの有用なリソース はじめに 最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをは

    Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか
    jsstudy
    jsstudy 2019/11/06
    NetlifyはJAMstackという新しい用語を発表しました。JAMstackは静的なHTMLサイトで、コンテンツを更新するたびに自動的に再構築され、CDNに直接デプロイされます。ちなみにJAMstackのJAMは、JavaScript、API、Markupの頭文字です