投稿日：2021-03-06T22:47:36+09:00

フロントエンド開発

フロントエンド開発

会社に入社して3年経とうとしている。
今までは、WEBサービス開発でJavaやPythonを使って実装していたが、
最近アサインされたプロジェクトでは、画面も含めて実装しなければならない。

現在の使用技術はざっこりこんな感じ

バックエンド

・Python(Flask)
・MySQL

フロントエンド

・HTML
・CSS
・JavaScript

ブラウザを使用するフロントエンド側の実装ではもはや、これ以外の選択肢
があるのかわからない。

画面の実装に関して誰かが作った成果物を修正したりする作業の経験はあるのだが、
今回は新規作成になるため、参考情報はあるものの１から作らなければならない。
今まではバックエンド側でjavaやらpythonやらで上から下まで流れるような処理を
記述すればそれでOKだったが、HTML・CSSはそうはいかない。

私の現在の状態はこんな感じ
マークアップ？　スタイルシート？　何それ？　おいしいの？

特にCSS！！

「横並びで表示させるためにはfloatを使う」
と調べて、実際に使ってみたら、floatを適用したタグより下の項目
すべてが横並びに！！！

、、勉強せねば。。。

とある書籍でこんなことが書いてあった。

とある書籍：エンジニアたるもの設計を理解したら、実装イメージが湧いてくるべきである！！

私：「いいえ、湧いてきません」

エンジニアじゃないのかな??

入力項目が２つのフォームがいい感じで表示されるまで1.5時間！！
かかりすぎよね。

Progateしよ

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T21:28:56+09:00

SCSS　まとめ３（コンパイル方法）

SCSSまとめ集

基本文法

関数

コンパイル方法

目次

Live Sass Compilerを使用したコンパイル方法

コンパイル場所を指定する

Live Sass Compilerのsetting.jsonについて

1. Live Sass Compilerを使用したコンパイル方法

公式サイト
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

エディタはVisual Studio Codeを使用。

拡張機能としてLive Sass Compilerをインストールする。

SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。

同一フォルダにcssファイルとmapファイルが作成される。

mapファイルには、参考にしたscssファイルと出力されたcssファイルの情報が記載されてある。

以下、保存する度にコンパイルが自動でされる。

自動コンパイル時に、Successなら成功、Errorなら失敗（コード内にエラーがある）

自動コンパイルをやめたい場合は、「Watching...」を押す。

2. コンパイル場所を指定する

・エディタ自体にコンパイル場所を設定する場合

拡張機能より「Live Sass Compiler」を右クリック→拡張機能の設定をつける

ユーザータブを選択し、Formats→settings.jsonで編集をクリック

例として以下のコードをsettings.jsonに記載する()
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ]
format　コンパイル後のcssファイルの記載方法。expanded, compact, compressed, nestedを指定する
css
/* expanded */
p {
  font-size: 16px;
}

p span {
  color: blue;
}

/* compact */
p { font-size: 16px; }

p span { color: blue; }

/* compressed */
p{font-size:16px}p span{color:blue}

/* nested */
p {
  font-size: 16px; }
  p span {
    color: blue; }
extensionName...拡張子を設定

savePath...コンパイル先のパスを設定

4.コンパイルすると以下のような感じになる。

・プロジェクトごとにコンパイル場所を設定する場合

上記の2.の手順にて、ユーザータブではなく、ワークスペースタブを選択。

ローカルに作成されたsettings.jsonに同じように記述してコンパイルすればOK。

3. Live Sass Compilerのsettings.jsonについて

設定項目内容

Autoprefix 自動でベンダープレフィックスを追加する際に対象とするブラウザの条件

Exclude List コンパイル対象から除外するファイルの指定

Formats コンパイル後のCSSファイルのフォーマットや保存先のパスなど

Generate Map コンパイル時にMAPファイルを出力するか

Include Items コンパイル対象に含めるファイルの指定

Show Output Window 出力パネルを自動的に表示するかどうか

詳しい内容は後で記載。

設定項目	内容
Autoprefix	自動でベンダープレフィックスを追加する際に対象とするブラウザの条件
Exclude List	コンパイル対象から除外するファイルの指定
Formats	コンパイル後のCSSファイルのフォーマットや保存先のパスなど
Generate Map	コンパイル時にMAPファイルを出力するか
Include Items	コンパイル対象に含めるファイルの指定
Show Output Window	出力パネルを自動的に表示するかどうか

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T20:16:24+09:00

SCSS　まとめ２（関数）

SCSSまとめ集

1. 関数とは?

他言語同様、処理を行って戻り値を取得することができる。
あらかじめ用意されてある関数も存在する。

2. 自作関数

@functionで関数を定義できる。

scss

@function myFunction($val){
  @return $val * 100px;
}
.box{
  width: myFunction(2);
}

//トランスパイル後
.box{
  width: 200px;
}

デフォルト値、引数を複数設定する場合

scss

@function myFunction($val1:100px, $val2:200px){
  @return $val1 + $val2;
}
.box{
  width: myFunction();
}

//トランスパイル後
.box{
  width: 300px;
}

可変長引数の場合

scss

@function myFunction($vals...){
  $width: 0px;
  @each $val in $vals {
    $width: $width + $val;
  }
  @return $width;
}
.box{
  width: myFunction(50px, 100px, 150px);
}

//トランスパイル後
.box{
  width: 300px;
}

3. Mixinについて

引数を指定したスタイルの継承を行う。
@mixinで関数を定義、@includeで呼び出す。
@contentで、コンテントブロックを渡すことができる。

scss

@mixin box($width:100px, $bgcolor:#000){
  width: $width;
  background: $bgcolor;
}
.hoge {
  @include box;
}

//トランスパイル後
.hoge {
  width: 100px;
  background: #000;
}

@contentを使う場合

scss(content使用例)

@mixin box($width:100px, $bgcolor:#000){
  width: $width;
  background: $bgcolor;
  @content;
}
.color1 {
  @include box {
    color: red;
  }
}
.color2 {
  @include box {
    color: blue;
  }
}

//トランスパイル後
.color1 {
  width: 100px;
  background: #000;
  color: red;
}
.color2 {
  width: 100px;
  background: #000;
  color: blue;
}

4. 組込関数

あらかじめ用意されてある関数。以下に記載。

文字列
数値
色
セレクタ
その他

文字列

関数	意味
str-index	文字の検索（何文字目かを返す）
str-slice	文字の切り出し
str-length	文字の長さ
str-insert	文字を挿入
to-lower-case	小文字に変換
to-upper-case	大文字に変換
unquote	クォーテーションを取り除く
quote	ダブルクォートを付与する

scss(文字列の関数)

//str-index($string, $substring)
.hoge{
  prop: str-index("abcdefg", "c");   //3
  prop: str-index("あいうえお", "い");  //2
  prop: str-index("あいうえお", "か");  //null
  prop: str-index("abcdefg", "ef");  //5
}

//str-slice($string, $start-at, $end-at)
.hoge{
  prop: str-slice("abcdefg", 2, 4);  //"bcd"
  prop: str-slice("あいうえお", 3);     //"うえお"
  prop: str-slice("zyxcba", -2);     //"ba"
}

//str-length($string)
.hoge{
  prop: str-length("hogehoge");  //8
  prop: str-length("ふがfuga");   //6
}

//str-insert($string, $insert, $index)
.hoge {
  prop: str-insert("abcde", "z", 1);     //"zabcde"
  prop: str-insert("abcde", "zzz", 3);   //"abzzzcde"
}

//to-lower-case($string)
.hoge{
  prop: to-lower-case("ABCDEF");   //"abcdef"
  prop: to-lower-case("あいうEお");  //"あいうeお"
}

//to-upper-case($string)
.hoge{
  prop: to-upper-case("abcdef");   //"ABCDEF"
  prop: to-upper-case("あいうeお");  //"あいうEお"
}

//unquote($string)
.hoge{
  prop: unquote("hogehoge");  //hogehoge
  prop: unquote('あいうえお');   //あいうえお
}

//quote($string)
.hoge{
  prop: quote(hogehoge);  //"hogehoge"
}

数値

関数	意味
ceil	小数点を切り上げた値を返す
floor	小数点を切り捨てた値を返す
round	小数点を四捨五入した値を返す
min	最小値を返す
max	最大値を返す
random	1~指定した数値の範囲内の数値を返す(引数省略時は0以上1未満)
abs	絶対値を返す

scss(数値の関数)

//ceil($number)
$number1: ceil(10.1);   //11

//floor($number)
$number2: floor(10.1);  //10

//round($number)
$number3: round(10.4);  //10

//min($number...)
$number4: min(1,5,10);  //1

//max($number...)
$number5: max(1,5,10);  //10

//random($limit)
$number6: random(100);  //56

//abs($number)
$number7: abs(-100);    //100

色

関数	意味
rgb	RGB値を計算して返す
rgba	RGBA値を計算して返す
red	RGB値のR値を返す
green	RGB値のG値を返す
blue	RGB値のB値を返す
mix	中間色を返す
hsl	HSL値(色相、彩度、輝度)を計算して返す
hsla	HSLA値を計算して返す
hue	HSL値の色相を返す
saturation	HSL値の彩度を返す
lightness	HSL値の輝度を返す

scss(色の関数)

//rgb($red, $green, $blue)
$color1: rgb(111, 123, 254);  //#6f7bfe

//rgba($red, $green, $blue, $alpha)
$color2: rgba(111, 123, 254, 0.4);  //rgba(111, 123, 254, 0.4)

//mix($color1, $color2, $weight)
$color3: mix(red, green, 50%);   //#804000

//hsl($hue, $saturation, $lightness)
$color4: hsl(122, 10%, 55%); //#819882

//hsla($hue, $saturation, $lightness, $alpha)
$color5: hsla(122,10%,55%,0.5);  //rgba(129,152,130,0.5)

//hue($color)
$color6: hue(#123456); //210deg

//saturation($color)
$color7: saturation(#123456); //65.3846153846%

//lightness($color)
$color8: lightness(#123456); //20.3921568627%

セレクタ

関数	意味
selector-append	セレクタ名を連結して返す
selector-nest	セレクタ名を子孫セレクタとして連結して返す
selector-extend	セレクタ名をカンマ区切りで返す
selector-replace	セレクタ名を置換して返す

scss(セレクタの関数)

//selector-append($selectors...)
$selectors: selector-append("#box", ".content", ".new"); //#box.content.new

//selector-nest($selectors...)
$selectors: selector-nest("#box", ".content", ".new");   //#box .content .new

//selector-extend($selector, $extendee, $extender)
$selectors: selector-extend(".box .text", ".text", ".item");  //.box .text, .box .item

//selector-replace($selector, $original, $replacement)
$selectors: selector-replace(".box .text", ".text", ".item");  //.box ,item

その他

関数	意味
selector-append
type-of	データ型を返す
untitless	単位が含まれているかどうかを返す
length	配列の要素数を返す
append	配列の末尾に追加して返す
nth	配列の値を返す
map-get	連想配列の値を返す

scss(その他の関数)

//type-of($value)
.hoge {
  prop: typeof(123);     //number
  prop: typeof("hoge");  //string
  prop: typeof(true);    //bool
  prop: typeof(null);    //null
}

//untitless($number)
.hoge {
  prop: unitless(100);    //true
  prop: unitless(100px);  //false
  prop: unitless(100%);   //false
}

//length($list)
.hoge {
  prop: length(1 2);            //2
  prop: length("hoge" 1 true);  //3
}

//append($list, $val, [$separator])
//$separatorには"space", "comma", "auto"のいずれかが指定可能
.hoge {
  prop: append("hoge" "fuga" "piyo");  //"hoge" "fuga" "piyo"
  prop: append(1, 2, 3, comma);        //1, 2, 3
}

//nth($array, $index)
$games: ['switch', 'ps', 'xbox'];
$str: nth($games, 1);  //'switch'

//map-get($map, $key)
$urls:(
  google: 'https://www.google.com/',
  yahoo: 'https://www.yahoo.co.jp/',
  amazon: 'https://www.amazon.co.jp/'
);
$url: map-get($urls, google);  //'https://www.google.com/'

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T18:17:22+09:00

SCSS　まとめ１（基本文法）

SCSSまとめ集

1. Sass, SCSSとは？

Sassとは？

CSSを拡張したメタ言語(2006年に誕生)の一種。
記法として２種類（SASS, SCSS）の２種類がある。
勘違いしやすいが、SassはCSSを拡張したメタ言語、SASSとSCSSは記法のこと。

SASS, SCSS それぞれの記法

sass

ul
  margin: 10px
  li
    margin-top: 5px

scss

ul{
  margin: 10px;
  li{
    margin-top: 5px;
  }
}

セレクタ

階層構造で書くことが可能で。
子セレクタに「&」をつける→「&」の箇所が親セレクタになる。
子セレクタに「&」をつけない→親セレクタとスペースになる。

scss

ul{
  margin: 10px;
  li{
    margin-top: 5px;
    &.left{
      margin-left: 5px;
    }
  }
}

//トランスパイル後
ul {
  margin: 10px;
}
ul li {
  margin-top: 5px;
}
ul li.left {
  margin-left: 5px;
}

変数

「$変数名:〜;」で宣言できる。
共通させたいスタイル（色、長さ、フォント等）がある時に使うと効果的。
どこからでも参照可能な変数をグローバル変数、ブロック内のみ参照可能な変数をローカル変数と呼ぶ。

scss

$basic_color: #000000;
$basic_font-size: 14px;
.car {
  color: $basic_color;
  font-size: $basic_font-size;
}

//トランスパイル後
.car {
  color: #000000;
  font-size: 14px;
}

変数を値の一部として使用したい場合

scss

$img_path: '../img/';

.item {
  background: url(#{$img_path}back.png);
}

//トランスパイル後
.item {
  background: url(#../img/back.png);
}

※変数の上書きについて

以下、３種類の上書きについて記載。

グローバル変数はそのまま、ローカル変数によりブロック内部のみ値が変わる

scss

$width: 100px;

.box1{
  $width: 200px;
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
//グローバル変数の値は変わらない
.box1{
  width: 200px;
}
.box2{
  width: 100px
}

!default　同名の変数が既に定義されてある場合、上書きしない

scss(!defaultを使用)

$width: 100px;

.box1{
  $width: 200px !default;
  width: $width;
}

//トランスパイル後
.box1{
  width: 100px;
}

!global　同名の変数が既に定義されてある場合、上書きする

$width: 100px;

.box1{
  $width: 200px !global; 
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
.box1{
  width: 200px;
}
.box2{
  width: 200px;
}

演算

加算、減算、乗算、除算、剰余ができます。

scss

$base_width: 100px;

.base{
  /* 加算 */
  width: $base_width + 10px;
  /* 減算 */
  width: $base_width - 5px;
  /* 乗算 */
  width: $base_width * 2;
  /* 除算 */
  width: $base_width / 2;
  /* 剰余 */
  width: $base_width % 3;
}

//トランスパイル後
.base{
  /* 加算 */
  width: 110px;  //(100px + 10px)
  /* 減算 */
  width: 95px;   //(100px - 5px)
  /* 乗算 */
  width: 200px;  //(100px * 2)
  /* 除算 */
  width: 50px;   //(100px / 2) 
  /* 剰余 */
  width: 1px;    //(100px % 3)
}

インポート

他のSCSSファイルをインポートすることができます。

scss

//色々な書き方が可能
@import url(common.scss);
@import url("common.scss");
@import "common.scss";
@import 'common.scss';

データ型

以下のようなデータ型ある
- 数値(Number)型
- 真偽(Boolean)型
- 色(Color)型
- 文字列(String)型
- 配列(List)型
- 連想配列(Map)型
- 関数(Function)型
- Null型

以下、それぞれの型の例

scss

//数値(Number)型
$number1: 10;
$number2: 1.1;
$number3: 100px;
$number4: 50%;
$number5: 2em;

//真偽(Boolean)型
$boolean1: true;
$boolean2: false;

//色(Color)型
$color1: blue; 
$color2: #ff0000;
$color3: rgba(255, 255, 0, 0.5);
$color4: hsla(110, 100%, 30%, 70%);

//文字列(String)型
$string1: 'Sass';   //シングルクォートで囲まれた文字
$string2: "scss";   //ダブルクォートで囲まれた文字
$string3: auto;

//配列(List)型
$list1: 'hoge' 'fuga' 'piyo';   //スペースで区切る
$list2: red, blue, yellow;      //カンマで区切る
$list3: (10px)(20px)(30px);     //カッコで区切る
$list4: ('hoge' 'fuga' 'piyo'); //カッコで囲んでもOK
$list5: ['hoge' 'fuga' 'piyo']; //カギカッコで囲んでもOK
$list6: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]]; //多重配列もOK

//連想配列(Map)型
$map1:(
  google:'https://www.google.com/',
  yahoo:'https://www.yahoo.co.jp/',
  amazon:'https://www.amazon.co.jp/'
);

//関数(Function)型
@function myFunction($val: 1){
  @return $val * 100;
}

//Null型
$null1: null;

ちなみに、配列(List)型や連想配列(Map)型の値は、以下のような記述で取得できる。

scss(配列)

$colors: red, blue, yellow;

//配列　単体を取得
main {
  color: nth($colors, 1);  //配列のインデックス番号は1からスタートする
}

//トランスパイル後
main {
  color: red;
}

//配列　複数を取得
@each $color in $colors {
    .#{$color}-bg {
        background: #{$color};
    }
}

//トランスパイル後
.red-bg {
  background: red;
}
.blue-bg {
  background: blue;
}
.yellow-bg {
  background: yellow;
}

scss(連想配列)

$colors: (
  color1: red,
  color2: blue,
  color3: yellow
);

//連想配列　単体を取得
main{
  color: map-get($colors, 'color1');
}

//トランスパイル後
main{
  color: red;
}

//連想配列　複数を取得
//ここで書かれてある$key, $colorは、連想配列のKeyとValueに対応してある(任意の変数名を設定可能)
@each $key, $color in $colors {
    .#{$key} {
        color: $color;
    }
}

//トランスパイル後
.color1 {
  color: red;
}
.color2 {
  color: blue;
}
.color3 {
  color: yellow;
}

条件分岐

他言語同様、if~elseを使い条件分岐することができる。
条件演算子、論理演算子は以下の通り。

条件演算子

演算子	意味
==	左辺と右辺が等しい
!=	左辺と右辺が等しくない
>	左辺は右辺より大きい
<	左辺は右辺より小さい
>=	左辺は右辺以上
<=	左辺は右辺以下

論理演算子

演算子	意味
and	かつ
or	または
not	否定

scss

$var: 1;

main{
  @if $var == 0{
    color: red;
  }
  @else if $var == 1{
    color: blue;
  }
  @else {
    color: yellow;
  }
}

//トランスパイル後
main{
  color: blue;
}

繰り返し

他言語同様、繰り返し処理を行うことができる
@for, @while, @eachの３種類。
- @forは、@for ~ through, @for ~ toの２種類がある

scss(for文)

//@for
//@for ~ through
@for $val from 0 through 2{
  .frame_#{$val}{
    z-index: $val;
  }
}
//@for ~ to
@for $val from 0 to 2{
  .frame_#{$val}{
    z-index: $val;
  }
}

//トランパイル後
.frame_0{
  z-index: 0;
}
.frame_1{
  z-index: 1;
}
.frame_2{
  z-index: 2;
}

scss(while文)

//@while
$val: 3;

@while $val > 0{
  .frame_#{$val} {
    z-index: $val;
  }
  $val: $val - 1;
}

//トランスパイル後
.frame_3{
  z-index: 3;
}
.frame_2{
  z-index: 2;
}
.frame_1{
  z-index: 1;
}

scss(each文)

//@each
$images: 'hoge' 'fuga' 'piyo';

@each $image in $images{
  .box-#{$image}{
    background-image: url(../img/#{$image}.png);
  }
}

//トランスパイル後
.box-hoge{
  background-image: url(../img/hoge.png);
}
.box-fuga{
  background-image: url(../img/fuga.png);
}
.box-piyo{
  background-image: url(../img/piyo.png);
}

スタイルの継承

@extendを使用し、他セレクタのスタイルを継承することが可能

scss(extendを使用)

.box1{
  width: 100px;
}
.box2{
  @extend .box1;
  height: 200px;
}

//トランスパイル後
.box1, .box2{
  width: 100px;
}
.box2{
  height: 200px;
}

@mixinを使用することで引数を指定したスタイルの継承を行うことも可能（関数についてはまとめ2で解説）

scss(mixinを使用)

@mixin box($width: 100px, $bgcolor: #000){
  width: $width;
  background: $bgcolor;
}
.box1{
  @include box;
}
.box2{
  @include box(200px, #ff0000);
}

//トランスパイル後
.box1{
  width: 100px;
  background: #000;
}
.box2{
  width: 200px;
  background: #ff0000;
}

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T17:54:17+09:00

コンポーネント

今回はコンポーネントについて学んでいきます！！
Vue.jsについては後で触っていきます。

①コンポーネントとは

ソフトウェアやシステムを構成する要素のことを言います！
またこれらは、単体ではなく、他のプログラムに呼び出されたりしたときに使います！！
なんでこれを使うかというと、機能の追加・修正・削除などが発生した場合に、コンポーネント単位で対応することができるからです！?

②モジュールとは

コンポーネントと同じ意味をもつ部品にモジュールというものがあります！
モジュールとコンポーネントの違いは、単体で使えるか使えないかみたいです！?

更にここからVueの中でコンポーネントが２つに別れます。
今回はVue.jsをまだ勉強してないのでとりあえずこんなもんなのね。ってことでさらっとだけみていきます。

１）グローバルコンポーネント

全てのルート Vue インスタンス(new Vue)のテンプレート内で使用できることを意味します。

２）ローカルコンポーネント

他のサブコンポーネント内では使用できないみたいです！

今回のはコードを読みたくて調べたメモなので参考にならないと思いますが(^_^;)
必要になったら引き続き戻って追記していきます?

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T17:53:18+09:00

iOSで電話番号がリンクになった時の対処法

備忘録として残します。

iOSで確認したところ、aタグを使っていないのにも関わらず電話番号がリンクとして表示されていたので調べてみました。

なぜリンクになるのか

iOSは、ユーザが電話番号をタップやクリックすると電話を掛けられるように
自動的にaタグを挿入する仕様になっているそう。

対処法

以下のコードをheadタグ内に記述します。
<meta name="format-detection" content="telephone=no">
CSSでは効かないのか？

以下の方法で試しましたが、やり方が悪いのか私の場合は効きませんでした。
a {
  text-decoration: none;
  color: #色;
}
参考：

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T16:54:13+09:00

Vue.jsのテーブルで動的にモーダルを表示させる

状況

Vue.jsでテーブルを作成し、テーブルのデータごとに動的にモーダルを表示させようとするも、何かおかしい。

前提

$ vue --version
@vue/cli 4.5.11

なお、本記事では Vue Materialのテーブルコンポーネント を使用しています。

百聞は一見にしかずということで

状況をアニメーションで貼っておきます。

見ての通り、どのモーダルボタンをクリックしても3番目の要素しか表示されない。
しかも背景がかなり暗い。

出来れば親でモーダルを発火させるボタンを押せて、モーダルの状態を親で管理できるようにしたい。

該当コード

Parent.vue

<template>
  <div>
    <md-table v-model="products">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="ユーザー名">{{ item.user }}</md-table-cell>
        <md-table-cell md-label="アクション">
          <button @click="modalState = true">モーダル表示</button>
          <md-dialog :md-active.sync="modalState">
            <Child :user="item.user" :item-id="item.id" />
          </md-dialog>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">
import Child from './Child.vue'
import Vue from 'vue'

export default Vue.extend({
  name: 'TableContent',
  components: {
    Child,
  },
  data() {
    return {
      products: [
        { id: 1, user: '伊藤' },
        { id: 2, user: '田中' },
        { id: 3, user: '佐久間' },
      ],
      modalState: false,
    }
  },
})
</script>

Child.vue

<template>
  <div style="text-align: center">{{ itemId }} : {{ user }}</div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Vue:Child',
  props: {
    itemId: {
      type: Number,
      required: true,
    },
    user: {
      type: String,
      default: '',
    },
  },
})
</script>

問題の原因

初歩的なミスをしていました。
modalStateにテーブルごとのユニークな値を与えていなかった為、ボタンを押すと全てのモーダルがtrueとなり、全て重なって表示されており、背景も暗くなっているということでした。

コード修正

Parent.vue

<template>
  <div>
    <md-table v-model="products">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="ユーザー名">{{ item.user }}</md-table-cell>
        <md-table-cell md-label="アクション">
          <button @click="$set(modalState, item.id, true)">モーダル表示</button> <!-- テーブルごとのmodalStateを制御 -->
          <md-dialog :md-active.sync="modalState[item.id]"> <!-- ユニークな値を追加 -->
            <Child :user="item.user" :item-id="item.id" />
          </md-dialog>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">
import Child from './Child.vue'
import Vue from 'vue'

export default Vue.extend({
  name: 'TableContent',
  components: {
    Child,
  },
  data() {
    return {
      products: [
        { id: 1, user: '伊藤' },
        { id: 2, user: '田中' },
        { id: 3, user: '佐久間' },
      ],
      modalState: {}, // 定義をオブジェクト形式に変更
    }
  },
})
</script>

無事動的にモーダルを表示することができました！

参考

https://stackoverflow.com/questions/49580396/vuetify-how-to-open-and-close-dialogs-within-a-data-table
https://vuematerial.io/components/table

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T15:59:43+09:00

1年間でpythonで収益化してみた

今日からpythonの勉強を始める
目標としてはこの1年で自分で案件を獲得し収益を生み出すこと

多くのサイトを閲覧しこの1年の大まかな計画を立てる
その中でこのサイトの手順が最も有効だと考えた

【初心者必見】プログラミング未経験から3年間のpython学習ロードマップ

基本的にこの手順に乗っ取って頑張ってみようと思う

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T15:59:43+09:00

1年間でpython収益化してみた

今日からpythonの勉強を始める
目標としてはこの1年で自分で案件を獲得し収益を生み出すこと

多くのサイトを閲覧しこの1年の大まかな計画を立てる
その中でこのサイトの手順が最も有効だと考えた

【初心者必見】プログラミング未経験から3年間のpython学習ロードマップ

基本的にこの手順に乗っ取って頑張ってみようと思う

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T13:17:52+09:00

CodePenを使ってサイト上にコードを埋め込む方法。

はじめに

cssなどで記述したコードの実際の見た目を表示したい時に、便利な方法はないかと探してみると、CodePenというサービスがあったので使い方を自分の復習用にまとめました。

CodePenとは

Webブラウザ上でフロントエンド言語のコーディングができるサービスです。
Webサイトにコードを埋め込むことや、コードを共有することができます。

コードと結果を1画面で表示できるので、コードの説明時に便利です。

CodePenの使い方

まずはCodePenのアカウントを取得します。 CodePen

登録が完了したら、左のバーにあるPenというところを押します。

右上のSettingから利用する言語を選びます。

好きなコードを書きます。次に、完成したコードをサイトに埋め込んでいきます。

Embedというボタンを押すとCopy&Paste Codeという欄があるのでそのコードをコピーします。

コピーしたコードをサイトに貼り付ければ、これで完成です。

以上

使い方は非常に簡単なので、サイト上でビューを見せたい場合などに使ってみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T13:16:44+09:00

[Vue.js]main.jsのimport { createApp } from 'vue'の'vue'って何者？？

（当たり前として捉えられているのかは知らないが）意外とこれ解説してる記事がどこにもなかったので、自分なりの見解を記載。

環境：
PC:mac book pro
バージョン：Vue.js 3
エディタ：VSCode

前提：
・Vue.js環境周りを全て設定完了
・（設定直後で）ファイルは何もいじっていない
・localhost:8080でサーバ起動できる

上記前提を元に以下ファイルを見ていったときに疑問が１つ。

main.js
import { createApp } from 'vue'　⇦こいつ
import App from './App.vue'
createApp(App).mount('#app')
２行目はまぁ、App.vueをmain.jsにインポートしてるってだけの話だからいいとして、
１行目のこいつ。
~~createAppはただの関数名（予約語という訳でもなく）と思われるのでここは問題ない。~~
createAppは関数であるものの、'vue'って何？？
そんなファイルどこにもないぞ？？

何者だこいつ？？？

(18:47 更新　解釈が全然違っていたため。すでに閲覧された方、ご迷惑をおかけしました。)
以下のコマンドを発行時に、my-projectディレクトリが生成され、その下に色々とファイルが生成される。
vue create my-project ※my-projectの部分は可変

その際に、「package.json」というjsonファイルが作成されるのだが、
どうやらその中に「dependencies」という情報が設定されているようで、（中身は環境によって異なる（バージョンやデータなど））その中のvueを使用するためのインポート文として、「import { createApp } from 'vue'」が記載されているらしい。
"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  }
以上。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T10:52:23+09:00

HTML / CSS 覚書 Vol.2 displayプロパティーとflexbox

1...displayプロパティー基礎

①インライン要素

幅と高さは中の要素分だけ。

marginは横にしか効かない。段落を変えるとmargin同志の間に少し余白ができる。

paddingは縦横に効く。縦方向は他の要素を無視して被さる。

段落の有無に無関係で横に並ぶ。

②ブロック要素

幅と高さは指定できて、要素は含まない。（要素の高さが50px、指定した高さが50pxの時高さは100pxでなく50pxになる。）

marginは縦横に効き、他の要素には干渉しない。

paddingは縦横に効くが中の要素は下方に押し出される。

段落の有無に無関係で段落ができる。（横に並ばない。）

③インラインブロック要素

CSSで指定する。

幅と高さはブロック要素と同じ。

marginはインライン要素と同じ。

paddingはブロック要素と同じ。

段落はインライン要素と同じ。

こんな感じ。

④ブロック要素のマージン相殺

ボーダーで囲まれていないブロック要素の上下のmarginは相殺される。
これはインライン要素、インラインブロック要素では起きない。
こんな感じ。

⑤おまけ・・・切れ目の無い半角文字の要素が中にある時

切れ目の無い半角文字の連続は右横からはみ出してしまう。
適度に切れ目を設けると折れ曲がるが、量が多いと下からはみ出す。
切れ目なく折れ曲がらせるには`word-wrap: break-word;を指定する。
こんな感じ。

2...flexbox

①基本の横並べ

横並べにしたい要素の親要素にdisplay: flexを指定する。

初期値は左から右に横に並ぶ。（flex-direction: row;の状態）

省略記法：df=>display: flex;
こんな感じ。

②flex-direction

基本の並べる向きと開始位置

省略記法：
fd=>flex-direction +
c=>column
cr=>column-reverse
r=>row
rr=>row-reverse
こんな感じ。

③横の位置決めjustify-content

省略記法：
jcc=>justify-content: center
jcfs=>justify-content: flex-start
jcfe=>justify-content: flex-end
jcsaro=>justify-content: space-around
jcsb=>justify-content: space-between
こんな感じ。

④縦の位置決めalign-items

省略記法：
aic=>align-items: center;
aifs=>align-items: flex-start;
aife=>align-items: flex-end;
aic=>align-items: center;
aic=>align-items: center;
こんな感じ。

⑤カラム落ちさせるflex-wrap

省略記法：fwr=>flex-wrap + w=>wrap
こんな感じ。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T01:01:17+09:00

slickでスライダーを作ってみた

slickを使ってスライダーを作ってみた。

slickの利用

slickはスライダーのプラグインで、公式サイトからダウンロードできます。
以下のファイルが必須

slick.css

slick-theme.css

slick.min.js

fontsフォルダ

今回はslickの練習としていろいろやってみた。

仕様

調べた中で、できそうなことはとりあえずやってみよう

HTML & CSS
HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <title>SlideBanner</title>
        <link rel="stylesheet" href="slick.css"/>
        <link rel="stylesheet" href="slick-theme.css">
        <link rel="stylesheet" href="test.css">
        <script src="jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <h2 class="slide_title">slickのスライドショー</h2>
        <ul class="slide_show">
            <li><img class="slide_img" src="＃"></li>
            <li><img class="slide_img" src="＃"></li>
            <li><img class="slide_img" src="＃"></li>
            <li><img class="slide_img" src="＃"></li>
            <li><img class="slide_img" src="＃"></li>
        </ul>
        <ul class="thumb">
            <li><img class="thumb_img" src="＃"></li>
            <li><img class="thumb_img" src="＃"></li>
            <li><img class="thumb_img" src="＃"></li>
            <li><img class="thumb_img" src="＃"></li>
            <li><img class="thumb_img" src="＃"></li>
        </ul>
        <p class="slide_text">4秒ごとに自動でスライドします。</p>
        <p class="slide_text">左右の矢印を押下でスライドさせることができます。</p>
        <script type="text/javascript" src="slick.min.js"></script>
        <script type="text/javascript" src="test.js" charset="UTF-8"></script>
    </body>
</html>
CSS
body {
    margin: 0px;
    padding: 0 75px;
    background-color: black;
}

h2, p {
    color: white;
}

.slide_show {
    width: 100%;
}

ul {
    padding: 0px;
}

li {
    list-style: none;
}

.slide_img {
    width: 100%;
    height: 45vw;
    object-fit: cover;
}

.thumb_img {
    height: 20vw;
}
.slick-prev::before, .slick-next::before {
    color: #ffff66;
}

.slick-dots li.slick-active button:before, .slick-dots li button:before {
    color: #ffff66;
}

@media screen and (max-width: 400px) {
    body {
        padding:0 30px;
    }
    h2 {
        font-size: 15px;
    }
    p {
        font-size: 10px;
    }
    .thumb img {
        width: 100%;
    }
}
スライダーの矢印の色とか、ドットの色とか変えてみた。
.slick-prev::before, .slick-next::before {color: #ffff66;}
.slick-dots li.slick-active button:before, .slick-dots li button:before {color: #ffff66;}

画像が大きいので、メディアクエリもやってみた(ブレークポイント１箇所だけど)
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
@media screen and (max-width: 400px)

JavaScript
JavaScript
$(".slide_show").slick({
    asNavFor: ".thumb",
    arrows: false,
    dots: false,
    centerMode: true,
    centerPadding: '5%',
    infinite: true,
});

$(".thumb").slick({
    autoplay: true,
    autoplaySpeed: 4000,
    asNavFor: ".slide_show",
    focusOnSelect: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
})
やってみたこと

初めてのslickだったが、比較的簡単に設定できた。

スライダーの矢印、ドットの色を変える。(上述)

センターモードで表示

centerModeとcenterPaddingを設定

サムネイル付き

thumbクラスを作成し、asNavForでslide_showと紐付け

サムネイルにarrowを付けるため、slide_showのarrowを消す

focusOnSelectでサムネイルを操作できるようにする

slidesToShowを設定してサムネイルを作成

自動再生

autoplayとautoplaySpeedを設定

完成

参考記事

レスポンシブ対応するためのCSSの書き方
 【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
 slickの使い方からカスタマイズまで【スライダープラグイン決定版】
スライドショー(jQueryスライダープラグイン slickを使ってみる)
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
使い勝手の良いslick.jsスライダー（レスポンシブ対応）

画像

フリー画像をお借りしました。
雪景色 (lloorraa Pixabay)
オーロラ (Noel_Bauza Pixabay)
朝焼け (DeltaWorks Pixabay)
スタートレイル (Free-Photos Pixabay)
ビーチ (Walkerssk Pixabay)

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-06T00:06:36+09:00

リアルタイムフィルター作ってみた

JavaScriptを使ってリアルタイムフィルターを作ってみました。

仕様

キーワードにマッチする画像のみ表示できるようにする。

HTML & CSS

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>リアルタイムフィルター</title>
        <link rel="stylesheet" href="main.css">
        <script src="jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <h2>リアルタイムフィルター</h2>
        <p>入力した文字を含まない要素は非表示となります</p>
        <input type="text" class="input_text" placeholder="キーワードを入力してください">
        <div class="exhibition">
            <div class="filter_img">
                <div class="contain_img">
                    <img src="#" alt="airplain">
                </div>
                <p class="keywords">キーワード</p>
                <div class="keyword_list">
                    <p>飛行機</p>
                    <p>ひこうき</p>
                    <p>hikouki</p>
                </div>
            </div>
            <div class="filter_img">
                <div class="contain_img">
                    <img src="#" alt="dolphin">
                </div>
                <p class="keywords">キーワード</p>
                <div class="keyword_list">
                    <p>いるか</p>
                    <p>iruka</p>
                </div>
            </div>
            <div class="filter_img">
                <div class="contain_img">
                    <img src="#" alt="cherry-blossoms">
                </div>
                <p class="keywords">キーワード</p>
                <div class="keyword_list">
                    <p>桜</p>
                    <p>さくら</p>
                    <p>sakura</p>
                </div>
            </div>
            <div class="filter_img">
                <div class="contain_img">
                    <img src="#" alt="train">
                </div>
                <p class="keywords">キーワード</p>
                <div class="keyword_list">
                    <p>蒸気機関車</p>
                    <p>じょうききかんしゃ</p>
                    <p>joukikikansya</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="main.js" charset="UTF-8"></script>
    </body>
</html>

input typeをtextにして入力を受け付け、placeholderを設定してデフォルト入力を入れておく。

CSS

body {
    padding: 0 30px;
}

.input_text {
    width: 100%;
    font: 16px;
    height: 20px;
    border: 2px solid #0d91e9;
}

.input_text:focus {
    border: 2px solid magenta;
    outline: 0;
}
.exhibition {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.filter_img {
    border: 1px solid blue;
    width: 45%;
    height: auto;
    margin: 20px 0;
}

.contain_img {
    width: 100%;
    height: 25vw;
    text-align: center;
    margin-bottom: 20px;
}

img {
    width: 95%;
    height: 100%;
    margin-top: 15px;
}

.keywords {
    margin: 15px 0px -10px 15px;
}

.keyword_list {
    display: flex;
    margin-left: 15px;
    margin-top: - 15px;
}

.keyword_list p {
    margin-right: 1em;
}

:focusでinputに入力するとき枠線の色が変わるようにしてみました。

JavaScript

function Search(text){
    $(".keyword_list").each(function(index, element){
        let keyword = $(element).text();
        if(keyword.indexOf(text) === -1){
            $(element).parent().css("display", "none");
        }else{
            $(element).parent().css("display", "block");
        }
    });
}

$(".input_text").on("input", function(event){
    let text = $(".input_text").val();
    if(text === ""){
        $(".filter_img").css("display", "block");
    }else{
        Search(text);
    }
});

.on("input", function(event){})でキーワードが入力されたときに処理を行う
入力された文字をval()で受け取る。
入力がないときは、全ての画像を表示するようにする。
入力がある時に検索を開始。
.eachで全てのkeyword_listクラスを処理。
検索語がキーワードとマッチしない時（indexOF()が-1)、マッチしていない画像を非表示にする。
それ以外の時は、画像を表示。

完成

参考文献

jQueryで入力中のテキストをリアルタイムで取得する
 jQueryのeachメソッド
 【Javascript】親要素や祖先要素を取得する方法 parentNode/closest

画像

全てフリーです。
飛行機　(ThePixelman Pixabay)
イルカ（Claudia14 Pixabay）
桜　(Couleur Pixabay)
機関車　(Harald_Landsrath Pixabay)

　 Tweet
Qiitaで続きを読む

20210306のCSSに関する記事は14件です。

フロントエンド開発