Riverpod Providerまとめ
プロバイダを利用する理由
- VueXのように、アプリの様々な場所からステートにアクセスできるようになります。VueXのsotreのようなもの。 プロバイダはシングルトンや、依存性注入（テストがやりやすいということ）、あるいは InheritedWidget(Flutterのパーツ) を完全に代替することができます。
生成
グローバルとして生成する
final myProvider = Provider((ref) { return MyValue(); });
プロバイダを利用するには、Flutter アプリのルート（root）に ProviderScope を置く必要があります。
main.dart
void main() async { WidgetsFlutterBinding.ensureInitialized(); await FlutterFlowTheme.initialize(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(ProviderScope( child: ThaiDic(), )); }
プロバイダの宣言
final dbProvider = Provider((ref) => FirebaseFirestore.instance); final authProvider = Provider((ref) => FirebaseAuth.instance);
利用時はreadを利用
CollectionReference<Map<String, dynamic>> collectionRef() { //readで呼び出し return read(dbProvider).collection(collectionName); }
現在のところ、修飾子は2種類あります。
.autoDispose はプロバイダの監視が終わったタイミングで、プロバイダに自動でステートを破棄させることができるようになります。 .family はプロバイダ外部の値を用いてプロバイダを作成できるようになります。
final myAutoDisposeProvider = StateProvider.autoDispose<int>((ref) => 0); final myFamilyProvider = Provider.family<String, int>((ref, id) => '$id');
参考にさせていただきました。
Fontawsome 表示されない font-weightが問題だった
fontawsomeが表示されない問題
解決 font-weight:900 を当てる
.blg_show_topic_quote p::before {
font-family: "Font Awesome 6 Free";
content: "\f10d";
display: inline-block;
//ここ
font-weight: 900;
}
MAC 新規インストール 初期設定やインストールアプリ手順
Google Chrome
これがないと何もできない
Google IME
デフォルトのAppleのことえりだと、日本語の入力ができないに等しいため
App Cleaner
定番で必須のアプリ
HomeBrew
「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」. 基本ビルドするし、依存関係のインストールもmacportより少ないので、人気です。 これ入れておかないと、何もできない
M1では下記にインストールされる
/opt/homebrew for Apple Silicon
Git
コードのバージョン管理システム。 仕事に必要です。 brewでインストールします git-scm.com
Xcode
仕事で使うため
CocoaPod
Xcodeのパッケージ管理ツール.
brewでインストールしないこと。公式サイトでは gemでインストールするように指示があります。
sudo gem install cocoapods
Monosnap
スクショ取るのに必須のアプリ
git のインストール
brew install git
Vscode
WebStrom
エディタ 月1400円払っても作業スピードが2倍違う、再三は十分にあう
Docker
仮想環境を構築、仕事に必須
Notion
メモ帳につかう 無料版でも、ボタン一つでWEBに公開できるので重宝する
Local
WordPress開発に必要
Postman
APIのテストにも必要
WEB開発には必須のツール
Skype
nodenv
まずanyenvをインストールすること
anyenvが nodenvの親 nodeのバージョンをフォルダごとに自動で、変更可能
yarn
nodeのバージョンに応じてそれぞれyarnをインストールする
npm install -g yarn
Vue CLI
https://cli.vuejs.org/guide/installation.html
yarn global add @vue/cli
firebase-tools
yarn global add firebase-tools
Vue.js + Vuex + でStoreとは？
まずVueXとは？ Vue.jsの問題点を解決するための仕組み
この記事は、下記公式サイトを参照しています。 また画像も下記サイトから転用しています。
Vue.jsの問題点
- アプリが大きくなると、コンポネントの間の親子関係を通して値のやり取りがきつくなる。
- それぞれのコンポネントが、値を書き換えると、そこでのエラーが発生する。
- アプリ全体の状態を保持することができないことはないけど、難しい。どこからでもstateの状態を変更できるので、他のcomponentが、stateの状態を変更中でもできてしまう。バグを発生しやすくなる。
VueXの解決方法
- アプリ全体のstateを１つの場所で管理する。それが store.
- store は Vueのインスタンスと似ている（下記参照)
- componentは、data, methods, computedをもつ
- dataは値、 methodsはdataの値を変更する関数、 computedからdataの値にアクセスする。
いつどこで、どのコンポネントがstateを変更するか予期するために、VueXは４つのパターンを用意した。
- storeはstate , mutations, actions, gettersをもつ
- stateは値、 actionsは、stateの値を変更する(methodsに当たる), gettersは、stateの値にアクセスする
- 値の変更履歴を見るためにactionsは mutationsを通して stateの値を変更する。 ここがgitのような役割をして、stateの変更履歴保持している
- mutationは同期のデータしか扱えない、 非同期のデータを扱うにはactionsを利用 する。保険として、全てactionsを利用したほうが良い。
処理の流れ
- actionsのなかでcommit している。これがmutationを呼び出す。
このcommitが大切で、その前にaxiosでAPI等に問い合わせをして、待ちの状態が発生していることに注目
- 呼び出されたmutationはstateの値を変更する
最後にloadingが完了したら storeのstateの値をgettersでcomponentに移動する
storeの値はgettersで取り出せる
必要な仕組みですね。考えた人賢い!
VSCode Angular 開発 おすすめプラグイン 10選
Angular コード補完など
関連するコンポーネントの作成など一発で可能
Pathを補完してくれる、便利
TSLint フォーマッター
Jsonからオブジェクトをつくる
WEBでは、jsonのやり取りはかなり多いので、重宝する
TypeScript全般 必須コードフォーマッター
リクエストやレスポンスの内容を確認できる
Angular
クロームでのデバッグに必須 google web storeからブラウザにインストール
マテリアルアイコン
あってもなくてもいいけど、結構気に入っている。ファイルの種類別に、アイコンが表示される。jsとかHTML,jsonとか
rails6 heroku デプロイ
Bundler2のインストール前に確認
そして、「vendor/bundle」以下にGemがインストールされるようにオプションをつけて、「bundle install」コマンドを実行します。
$ bundle install --path vendor/bundle
これによってRailsアプリケーションで扱うGemを、個々のアプリケーション別に分けて扱うことができます。
アプリを作成する時はこのようにGemをインストールすると、アプリごとでGemを自動で切り替えてくれるようになります。
bundler2へupgradeする
//rubyは2.3.0以上 % ruby -v ruby 2.6.1p33 //gemは2.5.0以上 % gem -v 3.0.1 //実行 bundle update --bundler Using web-console 4.2.0 Bundle updated!
[Ruby] bundler 2 へのアップグレード方法 | DevelopersIO
bundle exec rake db:seed bundle exec rake db:migrate
bundle exec rake db:migrate でエラー
//マイグレーションファイルの状態を確認 upになっていたら削除すると大変 bundle exec rake db:migrate:status Status Migration ID Migration Name -------------------------------------------------- up 20190204121722 Devise create users up 20190204125329 Create requests up 20190204125917 Create th words up 20190204125925 Create jp words up 20190204125930 Create en words up 20190204130000 Create sentences up 20190204130043 Create th word sentences up 20190204130935 Add column to user up 20190204131737 Add column to th word sentences up 20190501150418 Create downloads up 20190501151520 Add file down 20191020041100 Change stury to binary down 20201016045316 Change column to user
downになっているので削除
その後
bundle exec rake db:migrate
rails s でエラー
This model adapter does not support fetching records from the database.
調査するとcancan canのバージョンを3以上にしなさいと、、、
本家サイト
cancancan | RubyGems.org | your community gem host
rails s で
OK
まだまだこれから
Herokuへデプロイ時 エラー対応
まず mainブランチでないとだめになったようだmasterだったので、切り替える
git checkout -b main
Cloud9からだったので、環境変数を追加しなさい
bundle lock --add-platform x86_64-linux
エラー
! remote: ! Failed to install gems via Bundler. remote: ! Detected sqlite3 gem which is not supported on Heroku: remote: ! https://devcenter.heroku.com/articles/sqlite3
sqlite3のgemはそもそもdevelop環境にもインストールしてはいけない
SQLite on Heroku | Heroku Dev Center
https://devcenter.heroku.com/articles/sqlite3
herokuのポスグレのバージョン確認 11.14らしい
heroku pg:info Plan: Hobby-basic Status: Available Connections: 2/20 PG Version: 11.14 Created: 2019-04-10 01:25 UTC Data Size: 13.3 MB/10.00 GB (In compliance) Tables: 9 Rows: 38225/10000000 (In compliance) Fork/Follow: Unsupported Rollback: Unsupported Continuous Protection: Off
MACにポスグレを入れる
Docker今からは面倒なのと、herokuにDockerpushしたことがないため
//インストール可能なバージョン確認
brew install postgresql
==> Formulae
postgresql ✔ postgresql@11 postgresql@13 postgresql@9.5 qt-postgresql
postgresql@10 postgresql@12 postgresql@9.4 postgresql@9.6 postgrest
//11があったのでインストール
brew install postgresql@11
//起動
brew services restart postgresql@11
//DB作成
% bundle exec rake db:create
% bundle exec rake db:migrate
== 20190204121722 DeviseCreateUsers: migrating ================================
-- create_table(:users, {})
-> 0.0190s
rails s
起動する
データ投入
heroku run rake db:migrate heroku run rake db:seed
localのポスグレの起動、終了、確認
brew services stop postgresql@11
MAC Notion 通知されない
原因 集中モードを設定すること
環境設定> 通知 から 集中モードを選択
集中していても通知が来てほしいから、集中モードを設定していないと、逆に通知が来ない.
集中モードって何？
