技術的備忘録

基本自分用備忘録

Next.js レンダリング手法まとめ

Next.jsの4つのレンダリング手法について 静的サイト生成(SSG: Static Site Generation) ビルド時にAPIを呼び出しデータを取得、ページを描画して静的ファイルとして生成する 生成した静的ファイルはビルド結果に保持され、ページアクセス時にはその静的ファ…

Flutter ListでのforEach内での非同期処理

Flutterで複数選択されたオブジェクトをforeachで個々に非同期処理をしたい際にちょっとはまったのでメモ 実際のコード Future<void> hogeHoge() async { await Future.forEach(this.hogeIdList, (hogeId) async { // 非同期で行いたい処理 await this.hoge(hogeId</void>…

読みやすかった技術書

現場で使えるFlutter開発入門 Flutterの開発の進め方がだいたいわかる本でした。GitHubからサンプルのソースコードをダウンロードできます。ダウンロードしたソースコードを実際に動かして進められるので、理解がしやすいです。ソースコードも全体が書籍のほ…

Flutter Widgetまとめ① StatefulWidget

StatefulWidget レイアウトやアニメーションを使った場合でも、高速にレンダリングしたい場合に使用する 簡単な処理だけを行うウィジェットでStatefulWidgetを使用し、状態管理する場合はシンプルなコードで読みやすい 処理が増えてきて、ロジックが肥大化し…

Flutter 環境構築

Flutterの環境構築は必要なものが少し多くて、ややこしいのでまとめておこうと思います。 Windows版です。 FlutterSDKのダウンロード 公式サイトからダウンロード・解凍します ダウンロード後、環境変数にPathを通します docs.flutter.dev Flutter doctorコ…

Flutter DropdownButtonにFirebaseから取得したjsonのリストを指定する

DropdownButtonの使い方 api.flutter.dev Firebaseから取得したオブジェクトの形式 { name: 'AAA', order: 1, folderId: 'id' } 実際のコード DropdownButton作成 DropdownButton<String>( value: model.selectFolderId, hint: Text('フォルダ'), icon: const Icon(I</string>…

Flutter theme アプリ共通カラーコード・スタイル設定

Flutterの共通スタイルはMaterialAppのルートウィジェットにthemeを設定する ダークモードにもthemeで対応できる main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: createTheme…

Flutter 汎用ダイアログを表示する

Flutterでのダイアログ表示 Flutterでのダイアログ表示には、showDialogメソッドを使用します。 api.flutter.dev 複数個所で呼び出す必要があったため、別ファイルにメソッドとして切り出して使用しています。 ダイアログ表示 Future<bool> showCommonDialog(Build</bool>…

Flutter Widget ListView

ListView スクロール可能なウィジェットのリスト ListView.builderを使用して作成することで、動的なリストが作成できる ListView.separatedを使用して作成することで、リストの要素の間に区切りを設定することができる api.flutter.dev 普通のListView List…

Dart まとめ2

関数 返り値の型を先頭に記述する 引数のリストを { } で囲むことで、名前付き引数を定義できる 名前付き引数は呼び出し時に指定されてなくてもいい(オプショナル) 名前付き引数の名前指定は必須 普通の引数は名前指定できない 名前付き引数のみデフォルト…

Dart 基本構文まとめ

基本データ型 int a = 77; double b = 77.7; String c = 'abcdefg'; bool d = true; // 型推論 var e = 77; // number // 配列 List a = [ 1, 2, 3, 4 ]; // 値が重複できない配列 Set b = { 1, 2, 3, 4 }; // key value Map c = { 'a': 1, 'b': 2, 'c': 3 }…

Flutter VSCode 環境構築 mac編››

FlutterSDKをインストール 1.公式のmacOSを選択 flutter.dev 2.公式の手順通りにすすめる $ mkdir ~/development $ cd ~/development $ unzip ~/Downloads/flutter_macos_2.2.2-stable.zip 3.bash_profileを編集 $ sudo vi ~/.bash_profile 4.以下の列を追加…

AWS VPC

VPC Virtual Private Cloud AWSクラウドのネットワークからユーザー専用の領域を切り出してくれる仮想ネットワーク 論理的に分離されたセクションを作り、ユーザーが定義した仮想ネットワークを構築するサービス VPCのネットワーク内にAWSリソースを配置して…

サブネットマスク・サブネット

IPアドレス インターネットに接続している機器の住所に当たる数値 IPv4は32ビット グローバルIPとプライベートIPがある ICANNが発行していてNICに割り当てられている - 10進数 255.255.255.0 - 2進数(0で埋めて8桁にする) 11111111.11111111.11111111.000000…

AWS IAM

IAM AWSサービスやリソースへのアクセスを管理する AWSのユーザーとグループを作成、管理し、アクセス権を使用してAWSリソースへのアクセスを許可、拒否する IAMポリシー JSON形式で設定する Effect ”Allow" => 許可 "Deny" => 拒否 Action 対象のAWSサービ…

AWS 概要

AWS

仕組み インフラ/システム機能をオンライン上で、AWSから提供されているサービスを組み合わせて構築する アンマネージド型 スケーリング、耐障害性、可用性を利用者側で設定し管理する 設定が柔軟に可能 管理する手間がかかる EC2とか マネージド型 スケーリ…

AWS Day1対応

Day1対応 AWS登録後に対応すること MFAの有効化 rootユーザーのMFA パスワードポリシーの変更 管理者用のIAMユーザー作成 アクセスレポート IAMユーザーのアクセス情報を解析する AdministratorAccessポリシーを付与した管理者IAMユーザーを作成 Administrat…

Next.jsチュートリアルまとめ

Next.jsのチュートリアルで重要そうなとこ抜粋 ページはファイルの階層そのまま pages/index.jsがルート リンクコンポーネントでページ遷移 import Link from 'next/link' export default function FirstPost() { return ( <> <h1>First Post</h1> <h2> <Link href="/"> <a>Back to home</a> </Link> </h2> …

Meterial-UI スタイル上書き・カスタマイズ

Material-UIで用意されたスタイルを上書きたいとき。 アプリ全体で、指定したMaterial-UIのクラスのスタイルを上書く Meterial-UI側で用意されてるThemeProviderと、createMuiTheme関数を使う クラス名はdevelopperToolsで確認 「MuiGridListTile-tile」Mui[…