fvmの使い方
fvm を使用したプロジェクトの作り方
mkdir [projectフォルダ] cd [projectフォルダ] fvm use [flutterのバージョン] --force fvm flutter create .
バージョン確認
flutter doctor ではfvmで作成したプロジェクトのバージョンを確認できない。そのため、以下のコマンドを使用する。
fvm doctor
参考
役に立たないvimコマンド紹介
対象の数字をインクリメントするコマンド
数字にカーソルを合わせて、Ctrl+Aで対象の数字を1つインクリメント、反対にCtrl+Xでデクリメントすることができます。
用途
わかりません。何か使える場面があれば教えてほしいです。
背景画像を横幅100%でレスポンシブ表示する
レスポンシブで背景画像を横幅いっぱいに表示する方法です。
background-image: url("ここで画像を指定"); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 0; padding-top: calc(画像の高さ / 画像の幅 * 100%);
参考
vimのインサートモードからノーマルモードに切り替えるとき、自動で日本語入力から英数入力にする方法
vimのインサートモードからノーマルモードに切り替えるとき、自動で日本語入力から英数入力にする方法
使用環境
普段VSCodeをvim操作で扱っているのですが、コメント等を日本語で入力してインサートモードからノーマルモードに戻ったとき、日本語入力のままでvim の操作を受け付けてくれないのが煩わしかったため今回の方法を導入しました。
やりたいこと
普段vimのインサートモード->ノーマルモードの切り替えを「Ctrl + c」で行っているため、「Ctrl + c」でエスケープすると同時に、日本語入力の切り替えも行ってほしい。
導入方法
- Google日本語入力をインストール
Mac でGoogle日本語入力を使用するのは気が引けましたが、Google日本語入力をインストールします。
- デフォルトのIMEをGoogle日本語入力に変更
「システム環境設定>キーボード>入力ソース」からデフォルトのIMEを削除する
- 「日本語入力->英語入力」のショートカットを設定する
Google 日本語入力の「環境設定>一般>キー設定>キー設定の選択」で「編集タブ」から「エントリーを追加」を選択。
「入力文字列なし」「Ctrl c」「キャンセル後IMEを無効」を追加し、「OK」を押す。
以上で完了です。
Docker + Laravel + React + TypeScript
Docker で React × TypeScript × Laravel の環境を構築する
流れ
laravel のリポジトリを clone する。main ブランチには node が入っていないので、 1.x ブランチから clone する。
git clone -b 1.x https://github.com/ucan-lab/docker-laravel.git cd docker-laravel make create-project
React 環境構築
make npm docker-compose exec app composer require laravel/ui docker-compose exec app php artisan ui react --auth
ビルド
make npm-install make npm-dev
TypeScript インストール
cd backend npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev
touch tsconfig.json
{ "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", "jsx": "react", "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es6", "lib": ["es2016", "dom"], "allowSyntheticDefaultImports": true }, "include": ["resources/ts/**/*"] }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"></div> </body> <script src="{{ mix('/js/index.js') }}"></script> </html>
import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> <p>こんにちは</p> </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); }
npm run watch
FLOCSS 勉強会( 3日目 )
経緯
↓1日目
https://mikka-tech.hatenablog.com/entry/2022/03/17/041037
↓2日目
https://mikka-tech.hatenablog.com/entry/2022/03/18/134136
今回は3日目 (最終日) です。
やったこと
友人と3人で制作物を見せ合いました。 ついでに grid でのレスポンシブについても相談し合いました。
感想
今回の形式(1日目勉強の方針決め、2日目各自で調べる、3日目全員でソース・情報の共有)がめっちゃいい感じに刺さった。
「一人で自分のペースで勉強する楽しさ」と「人とスケジュールを合わせて期限を決める重要性」の両方のいいとこ取りができるので、とても効率の良い学習体験だと思いました。
1日目記事を見てただけだと全然理解できなくて不安だったけど、2日目実践してみたら思ったよりすんなり書けて良かった。
あと、今回一人FLOCSSを先に勉強していた人がいたので自分がみんなに返せるものが無いかもしれないという思いがあったけど、自分だけが見つけた・気づいたことを広めたり、他人のコードの変なところを指摘したり、意外と善戦できて嬉しかった。
わかったこと
- 記法はチーム内で合わせてサイト全体で統一されていればある程度は自由
- p-top-visual__title (block-element__modifier)
- p-topVisual__title (block-Element__modifier)
- p_top_visual--title (block_element--modifier)
- 人に口頭でやり方を教えるのは難しそう。今回やったことを全員にやってもらうのが一番かも知れない。
- マルチクラスとして .is-active を持たせるのはあり。
- 注意 : is-active そのものに style を当てるのは禁止
- .p-topVisual__title.is-active に style を当てる
- サイトが小さいとほとんど project に詰め込むことになりそう?
- component はサイト全体で使いまわせるものを最初に見繕う
- component は @extend を活用すべし
.c-button{ white-space: nowrap; padding: 8px; width: 100%; border: 1px solid #000; text-align: center; &__rounded{ @extend .c_button; border-radius: 100px; } }
FLOCSS勉強会 ( 2日目 )
経緯
↓前回の記事を参照
https://mikka-tech.hatenablog.com/entry/2022/03/17/041037
今回は2日目です。勉強会(個人戦)
FLOCSSの流れ
記述する前に
最初にカンプに手書きでクラスを書いていきました。まだ理解が浅いので後々結構変更しましたが、多分やった方がいい気がします。
作成手順
まずfoundationの準備
- reset.scss 追加
- color.scss 追加
- base.scss 追加
htmlにクラスを記述
- どこがlayout, component になりそうかあたりをつけておく
- htmlにlayoutクラスを記述
- htmlにcomponentクラスを記述
scss作成
- scssファイルを作り、逐次 style に @import
- scssファイルは ファイル名の前に _ (アンダースコア) を書く
- 最初に layout を記述して大まかな形を作る
- 基本的には project に記述する(?)
- font-size や margin など単一のプロパティのみを記述したい場合は utility に記述する
勉強後のFLOCSSの認識
- 記法はBEMで書く
- style は全て class で指定
- BLOCK_ELEMENT_ELEMENT は禁止
- l-nav などの left は見た目依存だからよくない。main-nav 等にすべき。セマンティックな命名(見た目ではなく、目的や役割に基づいた命名)