なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w
技術記事を書くまでのステップについて順にコツを解説していきます。 特に、技術記事を書きたくてもテーマ選定が難しい、文章が苦手だ、なぜか筆が進まない、うまくまとめられないといった方に読んで欲しい記事です。 一応、エンジニア歴としては数年以内のジュニアレベルの方を想定しています。 以下のように技術記事を企画して、書いて、公開するためのプロセスごとにちょっとしたコツをまとめています。気になるセクションだけでも読んでいただければ幸いです。 テーマを決めよう 対象読者を決めよう 章立てを決めよう 書こう タイトルを決めよう 【余談】技術記事を書く理由とは 筆者について QiitaとZennにて6年以上の記事発信経験があり、 Qiitaでは5,942Contributionsを記録、 Zennでは3,253Likesをいただいています。 テーマを決めよう コツ：テーマのカテゴリによって執筆のポイントや
Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。
こんにちは！ Tetsukick(菊池哲平)です。 2020年11月現在、インドネシア(PT.AQ Business Consulting Indonesia)でモバイルアプリ開発の技術顧問をしております。 iOS歴5年、Flutter歴1年。個人でもアプリ開発してます。 本記事の対象読者 モバイルアプリ開発者 Flutterの今後の可能性を知りたい方 モバイルアプリ開発案件を検討中で技術選定をされている方 本記事のタイトルが気になる方 序 今回インドネシアでモバイル開発の技術顧問をさせていただく中で、Flutterの提案から導入までを実施し、実際に導入に至ることができましたので、その過程で用いた技術的根拠等々をシェアいたします。 実際に非技術者に対しても提案をしましたので、そのままお使いいただくことも可能かと思います。 PPT素材が必要な方いましたらTwitter_@tpi29までDMい
「エンジニアリングをもっと理解してくれ」はダメ！？ 伊藤直也氏に聞く、ビジネス界で重宝されるエンジニアとは
sponsored by ハウテレビジョン インターネット業界は誕生してからというもの、目まぐるしく変化しながら成長してきた。その影響を大きく受けるのが、いつも業界の中心にいるエンジニア達である。業界の変化とともに、エンジニアを取り巻くキャリアに関する状況も大きく変わってきた。 「ブラック業界」「低賃金」などと揶揄（やゆ）されていたことが嘘のように、今や「ITエンジニアの年収1000万円」などとニュースの見出しが並び、なりたい職業ランキング上位にも名を連ねる。あまりに早い変化に、実態がつかめないという方も多いのではないだろうか？ ハウテレビジョンは昨年実施したエンジニア向け2weeksサマーインターンに、ハウテレビジョンの技術顧問であり、インターネット業界黎明（れいめい）期から最前線で活躍し続けてきたエンジニア・伊藤直也氏を招き、最新のソフトウエアエンジニアのキャリアについて、ハウテレビジ
エンジニアが最初に覚えるNotion活用例！
この記事に書いてあること エンジニアがNotionを使い始めよっかな…って思った時、 意外と何から始めたらいいのか一瞬慣れるまでよく分からない場合もある気がするので、 最低限これだけでもやったら便利だよ！ ってのをまとめます。 私がマネージャーやPM・スクラムマスターとして動くことが多いため、プロジェクト管理寄りの視点が多めかもしれません。 動機 昨今のエンジニアは、いやエンジニアでなくても、日々の情報整理の重要性は爆裂に上がってますよね。 皆さんも日々多すぎる情報や思考の整理に疲れてませんか？ 安心してください。Notionを使えばオールオッケーです！！！ さっそく使用例3選 ①議事録・進捗日誌など とにかく黙ってList View。 リストで情報をまとめたかったらとりあえず思考停止でList Viewを使います。 日記 作業進捗 議事録 やりたいことリスト etc… やり方は簡単。/l
React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、kintone フロントエンドリアーキテクチャプロジェクト (フロリア) に所属している 21 新卒の西川 (@nissy_dev) と左治木 (@sajikix) です。 フロントエンド刷新プロジェクトへの配属から約 1 年が経ち、プロジェクトに関わる中で多くの学びがあったので振り返ってみました。 目次 自己紹介 西川です 左治木です kintone フロントエンドリアーキテクチャプロジェクト（フロリア）とは 配属されてみて実際どう？ プロジェクトから学べたこと 小規模なチームでのスクラム開発 Testing Trophy を意識した QA とのテスト設計 アクセシビリティを考慮した UI の開発 現在取り組んでいること いきなり刷新プロジェクトに配属されるのってどう？ チームに任された裁量が大きく、新卒でも技術選定やより良い設計の提案をしながら開発できる 新規開発した機能に
2019年のテック系ポッドキャスト - フロントエンド・モバイル・WEB・インフラ・アジャイルなど - このすみノート
最近は忙しく、テック系ポッドキャストをあまり聴けていない日々が続いていたのですが、また聴き始めることにしました。 ただ、以前書いた「2017年とテック系Podcast(ポッドキャスト)を、紹介しつつ振り返る」という記事から、すでに1年以上が経過しています。 www.konosumi.net 最近のポッドキャストはまったくわからない状況だったので、新たに購読するポッドキャストを再検討することにしました。 テック系ポッドキャストの探し方 Podcast Freaks テック系ポッドキャストの紹介 アジャイルラジオ テストラジオ Misreading Chat engineer meeting podcast dex.fm w2o.fm 人生fm Researchat.fm UIT_INSIDE Tech系フリーランスが選ぶ最近の気になるトピックス(テクフリ) mozaic.fm プログラム雑談
2019 年は React Native にとってはさまざまな変化があったので、それらを振返りつつこの記事では最近の React Native をめぐる状況と個人的見解について書きます。採用を検討している方、Flutter などのクロスプラットフォーム開発フレームワークと比べたいという方の参考になれば幸いです。 フラットに書くことを意識していますが、いち利用者としてのバイアスがあることをご了承ください。 開発体験 Fast Refresh Auto Linking CocoaPods の標準採用 Expo によるワンストップ開発環境構築 フレームワーク/アーキテクチャ Lean Core Android 最新の React への追随 コミュニティ What do you dislike about React Native? react-native-community 管理下のライブラリ
きれいな動きしてるだろ。ウソみたいだろ。ReactNativeExpoで動いているんだぜ。それで。 - Qiita
ネイティブと同じくらいヌルヌル動く 動画サンプル pic.twitter.com/PZBXGGvIuo — HorieH@ゆうしゃとさんすうリリース (@h0rieh) October 10, 2019 実物のアプリ ※興味があったらインストールして動きを体感してみてください iOS Android Expoとは？ React Native開発で「開発環境、デバッグ環境、ビルド、証明書の作成/管理、スマホアプリに必用な機能」などを簡単にしてくれるやつ。 1ソースでiOSとAndroidとWebの開発が可能。 ReactNative+Expoでスマホゲーム １年間で６本リリースして、合計１万インストール/10万円達成しました。 以下、ReactNative+Expoの知見ではなく、スマホアプリを開発してみて知っておきたかった知見になります。 Webではなくアプリにしてよかった点 Admobが
【書評】2020年にReact Nativeを始めるときの決定版的技術書が出ます！ - フロントエンドの地獄
「React Native ~JavaScriptによるiOS/Androidアプリ開発の実践」の書評になります。 PDF版はこちらで先行発売開始していて、 gihyo.jp 紙の本は2020/5/20から販売の予定です。 React Native ~JavaScriptによるiOS/Androidアプリ開発の実践 作者:髙木 健介,ユタマこたろう,仁田脇 理史発売日: 2020/05/30メディア: 単行本（ソフトカバー） 買おうと思っていた本の献本を頂き、いち早く読ませていだだいたのでせっかくなのでブログにします！ どんな本？ React Nativeの基本・具体的なアプリ開発はもちろん、React Nativeで の開発に必要な TypeScript・React も1冊で解説。登場時からReactNativeを追い続けた著者陣が、 現場実践をふまえて伝授します。 という紹介文にふさわ
doda アプリ開発グループの坂戸です。 今回は doda アプリがどのような技術を使用してアーキテクチャ・設計しているかをお話しします。 前半部分をフロントエンド、後半部分をバックエンドに分けて説明していきます。 フロントエンド doda アプリのフロントエンドはざっくり以下の構成で成り立っています。 ReactNative ReactNativeFirebase typescript ReduxToolkit Realm jest 今回は設計のお話をしたいので、各ライブラリの詳細な説明などは割愛させていただきます。 まずは外観をご覧ください。 dodaアプリフロント概要 Redux フロントエンドで取り扱うデータを格納する層です。 各ドメインの粒度でSliceを切ってデータを管理しております。 ディレクトリ構成は Re-ducks パターンを採用。基本的にはReduxの原則に則って管理
AWS AmplifyといえばAWSが提供しているフロントエンド開発者向けのライブラリやツールセットです。今回はそんなAWS Amplifyについてです。 はじめに おさらい AWS Amplifyはフロントエンド開発者にとっての銀の弾なのか 無理して使わなくてもいいケース バックエンド側のライフサイクルや開発部隊が分かれてる場合 AWSのリソースに直接アクセスしない場合 認証・認可の手段としてCognito使わない場合 Server Side Rendering（SSR）の場合 AWS WAF使いたい場合 Amplify CLIに対応していないバックエンドを利用したい場合 AWS Amplifyがおすすめのケース まとめ はじめに この投稿は2020年10月22の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass
ソフトウエアエンジニアは何をやっているのか
一番身近に聞くであろう単語で分類しました。この記事は何らしらのデバイス(iOSアプリ/Androidアプリ/ブラウザ)で見ていると思いますがそれらをフロントエンドと呼びます。ユーザにとってアプリであろうがブラウザであろうがサイトが見れて使えれば問題ないですがエンジニアにとっては明確に違います。それぞれ異なったプログラミング言語で異なった思想のもと作られたデバイスで動かす必要があります。そのためフロントエンドエンジニアといってもiOSエンジニア、Androidエンジニア、フロントエンドエンジニア(ブラウザ用のフロントエンドを開発するエンジニアをこう呼ぶことが多い気がします)と分けて募集することが多いです。 異なったデバイスのために最低でも3人のエンジニアを採用するのは大変です。そのため1つのプログラミング言語で開発できればプロダクト開発が早まりそうです。そのような技術としてはFlutter,
Nintendo Switchをブラウザから操作する
🚀 はじめに Nintendo Switchをブラウザから操作し、自動化もできるツールPhantomHandを公開しました。 本記事は「PhantomHand」の技術面について書かれています。 使い方や導入方法だけサクッと知りたい方はマクロコンを自作してNintendo Switchをブラウザから操作する【導入編】をご覧ください。 リポジトリ 完成品 💡 何ができるか？ 簡潔に言うと、PCのブラウザに移植されたマクロコントローラーです。 具体的には、以下の機能をReactとArduinoで開発しました。 ブラウザのGUIでSwitchを操作 一連の操作をコマンドとして保存（マクロ機能） 保存したコマンドを呼び出して再現（マクロ再生機能） コマンドをTwitterでフォロワーに共有 偉大なる先駆者たちが作ったマクロツールとの違いは以下の通りです。 OSを問わずに(Windows / Ma
EDIT: DOjS はp5.jsサブセットを実行できる MuJS ベースのJavaScript環境だ。DOM-less。 https://github.com/SuperIlu/DOjS EDIT: SerenityOSを忘れてた: http://serenityos.org/happy/1st/ 自作OSに自前ブラウザというかなりヤバいプロジェクト。ブラウザ部分は最近Qtなクロスプラットフォーム版が出来た https://awesomekling.github.io/Ladybird-a-new-cross-platform-browser-project/ 。 EDIT: Geckoとか ServoとかMosaic系列は省いてしまった。まぁみんな知ってるよね多分。そもそも粗挽きというよりはかなりmature productだし。。 2020 Web Milestones という記事で
タイトルにあるように、弊社ハウスマートが提供する売買マンション提案アプリ "カウル" がiOS/Android共にFlutterでフルリプレイスしました！ 下記サイトよりダウンロードしてみてください。 本記事では、Flutterを採用したカウルの技術的背景の話を紹介していきます。Flutterに少しでも興味がある方、もしくは将来的にFlutterの採用を検討している方の参考になれれば嬉しいです。 技術周辺の話が中心になりますが、コーディングのtipsなどはなく、振り返りの開発後記の様な内容なので、1つの読み物として読んでみてください。 目次 ・はじめに ・技術的な意思決定とFlutter ・スタートアップ特有の技術負債 ・生産性の向上という狙い ・投資に見合ったリターンとリスク ・検証とキャッチアップ、9週でのリリース ・技術検証 ・1週のキャッチアップ ・9週の開発 ・Flutterの技
React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.
なぜGoogleはKotlinが広まり始めたのにまた別のFlutter (Dart) を広めてるんですか？今からAndroidやるにはReactNative等含め、どの手法が良いと思いますか？
回答 (5件中の1件目) Flutterの公開(2017年5月12日)は、GoogleによるKotlinのAdroid開発言語への採用(2017年5月17日)より僅かに前です。Dartの公開(2011年11月)は、Kotlinの公開(2011年7月)より僅かに後ですが、Androidの開発言語へのKotlin採用よりもずっと前のことです。より重要なことは、Kotlinと異なり、FlutterもDartもGoogle謹製であり、Googleによって広めるために生まれてきたことです。従って、Googleが今になってまた別のものを広めている、という認識は的を得ていないと思います。 ここで、F...
FacebookがHermesという組み込みのJSエンジンを公開したようです。 ReactNative用の組み込み用のJSエンジン（最新版だとオプション切り替えで使えるっぽい） MITライセンス プロプラなものとの組み合わせが発生しうる組み込みにおいては正義しかない ES2015をサポート(予定） 現時点ではクラスとかlet/constのブロックスコープは実装途中 Map/Setとかの組み込みクラス系は実装済み サイズの小ささをうたった処理系はES2015への対応はまだまだなのが多いので（Duktapeとか）良い 事前にJavaScriptのソースコードをパースして中間表現（LLVM IRをそのまま利用？）にしておいてロードする モバイルのCPUやバッテリー、メモリーにも優しい なお、エロいというのは強く感情が揺さぶられた結果が出てきたワードであってセクシャルな内容は一切含まれておりません
Web フロントエンドエンジニア(React) がモバイルアプリ開発(Flutter)し始めて思ったこと｜seya
自分は2017年から React と共にキャリアを歩んできたので長らく "フロントエンドエンジニア" としてのアイデンティティを持ちながら仕事をしていたのですが、去年末辺りから仕事で Flutter を使って開発をするようになりました。 始めてビックリ、React とかなり書き味は似ているし、培った経験が活きることが多かったです。 また、詳しくは後述しますが、モバイル開発にも参加できるようになるとキャリアの選択肢も増えるので、今フロントエンドをやっている方が一つの選択肢とし考えられるように「ここは同じだから Web フロントの知見が活かせる、ここは違ってモバイル固有の知識の0からのスタート、モバイルできるようになるとこういうところが嬉しそう」という点を書いていこうかなと思います。 同じところ宣言的 UI な書き方まず React も Flutter も宣言的 UI で作られているというか、
背景 実求人をクロールし、どの言語がどれだけ求人を保有しているか実数を取得し、年収別の求人数から総合ランキングを作成してみました。個人の恣意的な価値観を反映しないよう、エンジニアとしての個人的な主観は可能な限り省いています。(解説のところで少し主観が入っているのでお気をつけください) 調査方法 Web上にある求人サービスから実求人をクローリングし、言語の頻出数から人気言語のランキングを調査しました。 クローリングとは何か クローラーとは、ザックリ言うと、web上でデータを集めてくれるロボットです。webにある色々なサイトを飛び周り、こちらの命令（求めているもの）に該当するページで、データを集めてくれます。集まったデータは、各項目ごとに分別され、それぞれ値が抽出されます。抽出されたものは、何かうまいことやってデータベースに格納するなどします。 初心者でも分かる説明 水泳帽をかぶったロボットが
http://github.com/facebookexperimental/recoil 先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。 ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・？」って個人的になってました。 インターネットでも同じような印象を受けた人はいるらしく、なんやろな〜と思っていた矢先。 MobXの作者である `@mwestrate` 氏が、さくっとTweetしてるじゃありませんか！ なのでこの記事では、そのTweetを引用して、翻訳+ざっくりまとめをしておきます。 元Tweetはこちら #MobX or @recoiljs? Saw a lot of questions on whether they're the same, so a quick t
"デザインシステム"の過度な一般化とその対応について - Continuity is The Father of Success
デザインシステムという単語が、曖昧に、広い意味で使われているように感じるこの頃。 デザインシステムについて見聞きすることが増えてきました。 かくいう自分も、デザインシステムに関してブログを書いたり、参考にしたりしています。 モバイルアプリ業界に、デザインシステム導入や検討の流れが来ているようです。 ただ、デザインシステムの議論には話の筋がとっ散らかっているという印象が拭えません。 「デザインシステムで解決したいこと」や「デザインシステム導入のコスト」、そ「デザインシステムを誰が管理するか」あたりが、特に雑多な印象です。 デザインシステムとはナニで、どう適用されるモノなのか。 そして、特に起きがちなデザインシステムの過度な一般化について、扱ってみます。 デザインシステムの過度な一般化 試みたいこと デザインシステムのカバー範囲の分解 Level 0 Level 1 Level 2(広義のデザ
簡単な自己紹介 18日にポツンと空いていたので、枯れ木も山のなんとやら..で書かせて頂きます。 エンジニアとしてもうすぐ7年目になります。専門はバックエンド(メイン：Java/C#)です。 しかし、少人数開発かつ安定していない現場が多かったため、足りないロールは巻き取って仕事をすることが多く、AWSの構築を一部やったり、アプリ(iOS/Android/ReactNative)の面倒を見たこともあります。 最近１年で一番やって楽しかった仕事は、bitriseでリリースやstgアプリ環境構築したこと。 一番嫌だった仕事は、超レガシーなReactNativeアプリをAndroid64bit対応でバージョンアップしたこと。(なお私はバックエンド担当...) もう完全にバックエンド関係ないですね やらかした案件概要 エンジニアとして２年目の秋になります。 とある、Webサイト構築屋さんにエンジニアと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なかなかアウトプットできないあなたが技術記事を書くときのコツ
GitHubのスターは金にならない - Qiita
モバイルアプリ開発は、Flutter一択なのか？
React Native for Webのこれまでから読み解くReact GUIのこれから
2020 年の React Native 開発 - tomoima525's blog
dodaアプリを支える技術とアーキテクチャ・設計思想 - techtekt
AWS Amplifyを無理して使わなくてもいいケースについて挙げてみる - Sweet Escape
めくるめく粗挽きWebブラウザエンジンの世界 - Qiita
カウルのアプリをFlutterでリプレイスしました｜yamarkz - Kazuki Yamaguchi
FacebookのHermesというJSエンジンがエロい - Qiita
ガチ調査版::2019年プログラミング言語 求人人気ランキング - Qiita
MobX作者による、RecoilとMobXについての簡単なまとめ - console.lealog();
顧客のコンテンツデータを消失させた話 - Qiita