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
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
WhoMeetsReact#1 に参加してきました。 - yrinda
参加したしたもの WhoMeetsReact 参加理由 このTweetをみて「会場提供なら協力できるかな...」という優しい心が芽生えました。 【募集】ちょっとほんまにお金ないので、今週か来週かの休みの日にでも有料でReactハンズオンやるので、参加してくれる人いません…？ - フロントの人と会話するためにReact知っておきたいデザイナー - フロント少し興味あるバックエンド - Reactから始めたい駆け出し とかくらいの、本業で(続く)— こばしゅん (@ksyunnnn) September 19, 2019 というのが1割で、残りはReactを触るきっかけづくりです。 運営の方々 主催 こばしゅんさん スライドを Figma でつくる強者。 アドバイザー / ヘルプ shotaCoffeeさん 自らを追い込んでレベルを上げる強くてストイックなエンジニア。 あんどさん アイコンそっ
Design Systemへの取り組み 〜Frontend編〜 | メルカリエンジニアリング
この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。 現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。 MercariにおけるDesign System Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
フロントエンドイベント「UIT #6 進化する React.js」を開催しました
UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。 過去には BFF(Backend for Frontend) のような技術にフォーカスした勉強会や、「わたしたちにとってのVue.js」と題した様々な現場での Vue.js の事例など、トレンドを追いながらも地に足の着いた話が多い点も魅力の一つです。 当日の様子 そんな UIT ですが、今回のテーマは「進化する React.js」。 当日は三人のゲストにそれぞれ React.js をテーマに登壇いただきました。以下、登壇順にご紹
React勉強会のノウハウを紹介します
こんにちは！ Air メイトのフロントエンドエンジニアの @sadness_ojisanです。今月から「React 人材をどう育むか」という連載を行います、この記事はその第一弾です。 みなさーん！React 人材の採用はうまくいっていますか？？？私たちはまだまだ足りていません！ そこで最近では、React 人材を登用するために、採用だけでなく育成も試みています。 この連載では実際に行なった育成プランとその効果を紹介できればと思います。 私は社内で 2-30 人規模の React 勉強会の講師をしたり、社外でもプログラミング講座の先生などをやっています。 また、大学院では教育学を専攻していたこともあり、育成はかなり関心がある分野です。 この記事では、React 勉強会を開催しているなか、「この教え方や工夫が効いたよ」といった指導方略や、「受講生はここでつまづいたよ」という経験を紹介します。
React NativeとExpoを用いたクロスプラットフォーム開発入門
オリジナルのスライド https://drive.google.com/open?id=1usMYktUlwjYVZEUfcSbYERe8ZO2mwnSP
React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どういった分野に向いているのかを解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 Androidアプリ開発の経験者 iOSアプリ開発の経験者 前提環境 本記事の内容は、React Native v0.57.4の実
React製 SPA における パフォーマンスチューニング - SSSSLIDE
nodefest@2018.11.23 html5j@2018.11.25
技術書典5で、Firebaseについての本を出します！ - Oh my Buddha!!
どんな本を出すのか？ Firebase についての本を出します。 表紙は、こんな感じです。 表紙のデザイン自体は、Canva というデザインポートフォリオ作成サイトで、作成しました。 www.canva.com 入稿先 日光企画という技術書典と提携している印刷所に申し込みました。 日光企画がよいところ 同人誌作成は、今回が初めてだったのですが、丁寧に説明していただいたのが、好感を受けました 技術書典の会場に直接搬入が可能 印刷代は、技術書典割引なるものがあり、多少印刷代が安くなります。今回僕は、74ページの本を100部オフセット印刷することになり、合計で、¥52,040 でした。 どんなツールを使ったか Gitbook を使いました。大後悔です。ReViewで作るべきでした。。。 Gitbook がイケてないところ・イケてるところ イケてないところ PDF出力したときに、謎の空白ページがで
Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
Webデザイナーがフロントエンドを学ぶためReactを使ってオセロゲームを作った話 | 株式会社ヌーラボ(Nulab inc.)
ヌーラボのスケートボード担当のReoです。プロスケーターとして活動する傍らヌーラボでは当サイトやBacklog / Cacoo / Typetalkのサイト更新を担当しています。 ヌーラボは大半がエンジニアで構成されており、サイト更新をメインで行う担当者がいなかったため2017年10月にWebサイトの担当者として入社しました。 マーケティングチームの所属ではありますが、技術者としてスキルアップを目指せるポジションで入社させてもらい、個人的にもWebアプリを作りたいという気持ちもあります。 そこで本稿では、Webデザイナーだった私がフロントエンドエンジニアを目指すためにJavaScriptとReactを学んでオセロゲームを制作したお話しをします。 はじめに ヌーラボ入社前は未経験のWebデザイナーとして、社長と従業員1人の小さな制作会社に1年ほど雇ってもらい、HTMLとCSS、サイト制作に必
React Native をプロダクションで採用した知見を共有します | Snow Robin's Tech
このたび、スノウロビンでは React Native でのアプリ開発にチャレンジしました。 本記事では入門レベルを超えてプロダクションに採用してわかった知見を紹介します。 どんなアプリをつくったか医者と患者に分かれて、ビデオ通話とチャットができる、医療系ビデオ通話アプリを開発しました。ビデオ通話とチャットにはTwilioの Programmable Video と Programmable Chat というサービスを使っています。 以下の4種類のアプリを開発しました。 iOS 医者アプリAndroid 医者アプリiOS 患者アプリAndroid 患者アプリReact Native を採用した理由4種類のアプリでしたが、 iOS / Android ともにデザイン・基本的な挙動は同じということで、効率よく開発するためにクロスプラットフォーム技術の採用を検討しました。 React Native
デザイナーとエンジニアで考えるReactコンポーネント設計 - KitchHike Tech Blog
コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des
なぜ React×TypeScript の（薄くない）本を書いたのか in #技術書典5｜大岡由佳｜note
「なぜ React×TypeScript の（薄くない）本を書いたのか - くるみ割り書房ブログ」に移動しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからはじめるReact Hooks
デザインシステムを持たない組織のこれまでの取り組みと今後を考える
mizchi on Twitter: "react と hooks らへんの歴史まとめ直したほうが良さそう - VirtualDOM でアトミックな更新からの差分更新が現実的に可能になった - flux/redux でアプリケーションの本質的な状態の局所化を試みた -… https://t.co/qKDb9z0KB6"
宣言的UI
