react

前回は Material-UI のデザインの変更を行いました。今回はその続きとして Theme をカスタマイズする元となるレイアウト作成を行います。ソースコードは前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうように工夫はしておきます。） それぞれの章は以下の流れで書いています。 全体のソースの掲載 部分部分の説明 「全体のソース」は長くなりがちですが、さっと流して読み進めていただければと思います。 シリーズ一覧 初期状態 前回やったこと、今回やること 変更前のソース サイドメニューの追加 Drawer の追加 List の追加 ListItemTex…

React with TypeScript のプロジェクトにて、 Material-UI を使い始めるまでの方法について書いていきます。 簡単な管理画面（ダッシュボード）を作成して完了としたいのですが、当該記事では Material-UI を利用する環境を用意して終えることにします。利用方法については次の記事に任せる構成にします。 シリーズ一覧 前提事項 事前準備 バージョン情報 Material-UI のインストール 簡単な画面の作成（Material-UI 利用前） ディレクトリ・ファイル構成 ページの作成 ルーティング テンプレートの作成 テンプレートの利用 Material-UI の簡…

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

Reactに関してなんとなく…も理解していなかったので 新しく使用するものをきちんと自分で理解して使用していこうと 自分なりに噛み砕いてアウトプットして勉強するタスクの日です。 改めて基礎の基礎から…ReactとはComponent指向型のJavaScriptのフレームワーク Componentとは【部品】という意味合いがあり HTMLではタグでデザインするが、ReactではHTMLのタグに当たる箇所を JSX記述で「JavaScripts」や「関数」「クラス」として定義する。 一度作ってしまえば再利用が可能になるので効率良く開発ができる。 通常ページ遷移する場合DOM(Document Ob…

react 17.0からJSXトランスフォームが実装されているので、本来であればtsconfigにreact-jsxを指定する事が可能です。 ja.reactjs.org これをintelijでロードした場合に、以下のような警告が表示されるケースがあります。 対策としては、以下の「Always download the most recent version of schemas」にチェックを入れることで警告は出なくなります。

セットアップ作業

1. Next.jsの環境を作成する 公式ページの手順で雛形プロジェクトを生成する。 npx create-next-app 2. テスト関係の依存ライブラリを導入する 導入するのは以下のライブラリ。 jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16 Enzymeは手に馴染んでいるので使っているだけなので，必須ではないです。 npm i -D jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16 3. J…

qiita.com わざわざ<React.Fragment>って書く場面あるのかなとか思って全て<>にしてました。ありました。 mapとかでreturnする際にkeyを指定しておく必要ありますが、一番外側に必要なので、その際にFragmentが一番外の場合は<>だとkeyを指定できないので <React.Fragment key={hoge}> </React.Fragment> のようにする必要あるのですね…

昨日の記事なんですけもう少しContextのありがたみをがありそうな題材としてログインする例を考えた。 krazy.tokinia.me ソースコードとか所感 github.com gyazo.com こんな感じに動く。ここからアプリが大きくなるとこのContextでやってるありがたみが大きくなるんだろうなぁ、みつを。 実装してて思ったんですけど useUserContext と UserProvider って別に定義して分けた方が良さそうとか思ったのでやったけど実際筋いいんですかね、わからない...。まあでも .tsx ってついてたら「ああ、君はきっとコンポーネントとそのPropsの型が入っ…

こういう風に投稿すると(左)、esa.ioにこういう感じ(右)で投稿される分報風のアプリを自分用に年末年始に作りました。 作った動機 使った要素技術 Firebase Authentication Firebase Hosting + React Firebase Cloud Functions デプロイ自動化 所感 作った動機 きっと皆さんそうしているように、私も日々ログを残しながら作業をしている。仕事ではscrapboxを使っているが、プライベートではesa.ioを愛用している。プレビューを見つつmarkdownで書けたり、タグとカテゴリがいい感じに使えたりするところが気に入っている。あと…

はじめに Redux Toolkitを調べてみる。 インストール 下記のようにインストールすると、Redux Toolkitをインストールすることができる。 npx create-react-app my-app --template redux-typescript Redux DevToolsインストール Reduxを開発する際はRedux DevToolsをインストールすると実行されたアクションの履歴やstoreの状態を確認できるので開発時には便利なのでインストールした方が良い。 chrome.google.com Redux Toolkitで覚えておく必要がある関数 useSelect…

今年も残すところ後1日になりました。 今年はありがとうございました！！来年もよろしくお願いいたします！！今年はコロナに振り回された1年でした。。。 来年は終息し、平穏な一年になることを切に願います！！一足早いですが、おみくじアプリを作成しましたので、紹介です！！ 来年の運勢を占うために使って見てください。 ■作成したおみくじアプリ ■ソースコード ■画像に回転アニメーション付与 ■最後に ■参考 (adsbygoogle = window.adsbygoogle || []).push({}); ■作成したおみくじアプリ こんな感じになりました！！ アプリについてはこちらに公開しましたので、来…

前回は Material-UI のデザインの変更を行いました。今回はその続きとして Theme をカスタマイズする元となるレイアウト作成を行います。ソースコードは前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうように工夫はしておきます。） それぞれの章は以下の流れで書いています。 全体のソースの掲載 部分部分の説明 「全体のソース」は長くなりがちですが、さっと流して読み進めていただければと思います。 シリーズ一覧 初期状態 前回やったこと、今回やること 変更前のソース サイドメニューの追加 Drawer の追加 List の追加 ListItemTex…

テンプレートから理解した。ボイラープレートって言うのね。 https://github.com/resir014/react-redux-typescript-example reactjs-kr.firebaseapp.com

#BitchVogue Best Of Timeline 2020 TLの皆さん（通称：TL DIVAs）が集計期間内に発表した年間ベストを集計して発表する年初恒例記事『#BitchVogue Best Of Timeline』ですが、今年も発表致します！ 過去開催分 2016年 2017年 2018年 2019年 『#BitchVogue Best Of Timeline 2020』について 集計対象 ポイントについて 称号について TL DIVAsの年間ベスト 『#BitchVogue Best Of Timeline 2020』SONGS部門 WINNER FINALIST BRONZE…

久しぶりの外部の勉強会で、しかもFlutterの話をするのは初なのでなかなか緊張した。登壇者にはFlutterの人たちはもちろんReact Nativeの猛者がたくさんいて、僕はReact Nativeのことを全く知らないので話を聞くだけでも面白かった。TECH STAND #3 クロスプラットフォーム開発 Flutter x React Native - connpass正直なところ、おおっぴらに発表するときに偽物感という言葉が適切か？と思いながらドキドキしていたのだけど、あとでツイッターとかを見たら「わかる」とか言ってもらえていてちょっとうれしかった。ありがとうございます。あとスライドは、…

GitHub Peperomia マイルストーン Peperomia v3.0.0 PeperomiaBackend v3.0.0 PeperomiaWeb v3.0.0 PeperomiaTool v3.0.0 対応内容 [Peperomia]APIの新設計と新デザインに合わせて修正する [Peperomia]新設計に合わせてログイン前をSQLite、ログイン後をGraphQLで取得するcustom hooksを作成 [Peperomia]バックアップのAPI対応 [Peperomia]Expo SDK 40にバージョンアップ [Peperomia]カラーコードを整理する [Peperomi…

「Expo」・・・簡単に扱えるように抽象化されたツール ☆ReactNativeでできること ReactNativeがJavaScriptに対して提供している機能は、大きく分けて コンポーネントとモジュールに分類される ＜コンポーネント＞ ・View レイアウトの基本単位 ・Text テキストを表示・装飾する ・Activitylndicator 処理待ちを表すインジケーター ・FlatList 配列データを省メモリで表示 ・ScrollView 内側のコンテンツが画面をはみ出したらスクロールされる ・RefreshControl ScrollViewに「引っ張って更新」を付与する ・Touc…

現代のWebサービスは、次の３つのプラットフォームに対応づることが求められている。 ・ブラウザ（Webアプリケーション） ・Android ・iOS これらは同じやり方では作れない。 WebアプリケーションとAndroidアプリとiOSアプリの作り方は、考え方として近い部分は随所あるものの、基本的には大きく違うものです。 主な違い ・言語 ・非自動的処理を実現するAPIの使い方 ・日時を計算するAPIの使い方 ・UIを組み立てる方法 ・UIを更新する方法 ・リリースする方法 ・etc... プラットフォームごとに適した標準的なお作法や、仕組み上の課題・問題、それに対するベストプラクティスがあり…

背景 またも新しいプロジェクトを任され、Reactのアプリを作成することに。 世界展開を目指した「店舗でレジをなくすアプリ」という自社開発サービス。 エンジニア歴2年目に任せていいのかい。 もちろんPrettierは勝手に導入済。 ローカルでは問題がないが、AWS上ではエラーになり、半日困っていた。 ※apacheの場合 react-routerを使用した場合にはpublicディレクトリ直下に.htaccessファイルを作成する必要がある。 react-routerを使って静的コンテンツを配信する際のrewrite設定覚書 - Qiita RewriteEngine on RewriteCon…

デベロッパーの成長と課題解決に貢献するメディア「CodeZine」で、グレープシティのJavaScript UIライブラリ「Wijmo（ウィジモ）」の技術記事が公開されました。 今回は、WijmoとJavaScriptフレームワーク、ライブラリを組み合わせてデスクトップアプリケーションを作成する方法を、前編と後編の2回にわたり解説しています。前編ではWeb技術でデスクトップアプリが開発できるフレームワーク「Electron」とJavaScriptライブラリ「React」を利用し、後編ではこの2つに加えさらにTypeScriptを組み合わせてみました。Web技術でデスクトップアプリを作りたい方に…

皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか？ 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多くなっており、そのためJSのバンドルサイズは嵩む一方です。 そうなってくると気になるのはビルド時間です。 私の担当しているプロジェクトでもwebpackのビルドが34秒かかっており、今後さらにプロジェクトが大きくなれば1分越えも夢ではないです... そこで、Snowpack v3をにチャレンジしてみました。 Snowpackとは …

こんにちは。ミツモアでテックリードしております白柳（@yanaemon) です。 ミツモアのプロダクトは TypeScript で、クライアントサイドの React とサーバサイドの Node.js で書かれており、ユニットテストは Jest + Mongo DB + Circle CI を利用しています。 しかし、プロダクトが大きくなるにつれて、全ユニットテストを実行するのに 10 分程度かかり、開発効率が悪くなっていました。 今回は、それを 2 倍以上速度改善した取り組みについて紹介します。 実施したこと いきなりですが、具体的に実施したことと、改善結果になります。 実施内容 改善結果 1…