fvmの使い方

flutter

fvm を使用したプロジェクトの作り方

mkdir [projectフォルダ]

cd [projectフォルダ]

fvm use [flutterのバージョン] --force

fvm flutter create .

バージョン確認

flutter doctor ではfvmで作成したプロジェクトのバージョンを確認できない。そのため、以下のコマンドを使用する。

fvm doctor

参考

FVMでFlutter SDKのバージョンをプロジェクト毎に管理する

2022-06-19

役に立たないvimコマンド紹介

vim

対象の数字をインクリメントするコマンド

数字にカーソルを合わせて、Ctrl+Aで対象の数字を１つインクリメント、反対にCtrl+Xでデクリメントすることができます。

用途

わかりません。何か使える場面があれば教えてほしいです。

2022-06-03

背景画像を横幅100%でレスポンシブ表示する

CSS

レスポンシブで背景画像を横幅いっぱいに表示する方法です。

  background-image: url("ここで画像を指定");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: calc(画像の高さ / 画像の幅 * 100%);

参考

https://www.nxworld.net/css-background-aspect-ratio.html

2022-05-30

vimのインサートモードからノーマルモードに切り替えるとき、自動で日本語入力から英数入力にする方法

vim

vimのインサートモードからノーマルモードに切り替えるとき、自動で日本語入力から英数入力にする方法

使用環境

普段VSCodeをvim操作で扱っているのですが、コメント等を日本語で入力してインサートモードからノーマルモードに戻ったとき、日本語入力のままでvim の操作を受け付けてくれないのが煩わしかったため今回の方法を導入しました。

やりたいこと

普段vimのインサートモード->ノーマルモードの切り替えを「Ctrl + c」で行っているため、「Ctrl + c」でエスケープすると同時に、日本語入力の切り替えも行ってほしい。

導入方法

Google日本語入力をインストール

Mac でGoogle日本語入力を使用するのは気が引けましたが、Google日本語入力をインストールします。

デフォルトのIMEをGoogle日本語入力に変更

「システム環境設定>キーボード>入力ソース」からデフォルトのIMEを削除する

「日本語入力->英語入力」のショートカットを設定する

Google 日本語入力の「環境設定>一般>キー設定>キー設定の選択」で「編集タブ」から「エントリーを追加」を選択。

「入力文字列なし」「Ctrl c」「キャンセル後IMEを無効」を追加し、「OK」を押す。

以上で完了です。

2022-03-24

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

2022-03-19

FLOCSS 勉強会( 3日目 )

github.com

経緯

↓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;
    }
}

2022-03-18

FLOCSS勉強会 ( 2日目 )

github.com

経緯

↓前回の記事を参照

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 等にすべき。セマンティックな命名（見た目ではなく、目的や役割に基づいた命名）

感じたこと

今まで触ってきた技術の中でCSS設計(命名含む)が一番苦手かも知れない
FLOCSS が React 等他のフレームワークで通用するのかはまだ不明
１ページだけのもので練習したので component の理解がまだ足りない