2021-06-26

Typescriptあれこれ

初めに

　rymです。今回はこちらのリポジトリを読んで勉強させていただいたことをまとめます。

注目したコード

　名前の通り引数のオブジェクトxが、nameのプロパティを保持しているかをチェックするメソッドです。

export function hasProperty<K extends string>(x: unknown, ...name: K[]): x is { [M in K]: unknown } {
  return x instanceof Object && name.every(prop => prop in x);
}

注目したポイント

unknown型 x

タイプセーフなany型のようなもの。型アサーション等用いずに使用するとコンパイルエラーになる。

TypeScript 3.0のunknown型 - タイプセーフなany

可変長仮引数 name

hasProperty({},'hoge','piyo')などのように引数を与えると、'hoge'、'piyo'がnameに配列要素として格納される。

戻り値の is

booleanで返すと、メソッドの呼び出しもとで型推論が効かない。isを使えば、メソッドの戻り値が is で指定した型であることを呼び出し元に認識させ型推論されるようにできる。

TypeScript の"is"と"in"を理解する

戻り値の [M in K]

TypescriptのMapped Typeという構文。MがKの部分型であることを指定する。

【TypeScript】inを使った構文まとめ

Mapped Typesのあれこれ

prop in x

xがオブジェクトの時、オブジェクトが指定したプロパティを持っているときはtrueを返す。

MDN

結び

　typescriptへの理解がまたひとつ進みました。参考にさせていただいたコードや記事の作成者様ありがとうございました。

2021-06-07

DFSに入門する

Ruby AtCoder DFS

始めに

　今日はDFS(深さ優先探索)に入門しようと思います。先日atcoderのABC204 に挑戦してみたのですが、C問題を見た瞬間「これDFSや～」と分かって諦めてしまったので、ABC204 C問題の解説を見ながらDFSを勉強します。

DFSとは

　wiki引用。　頂点から底まで探索するのを全件試してみるって理解でしょうか。

深さ優先探索（ふかさゆうせんたんさく、英: depth-first search, DFS、バックトラック法ともいう）は、木やグラフを探索するためのアルゴリズムである。アルゴリズムは根から(グラフの場合はどのノードを根にするか決定する)始まり、バックトラックするまで可能な限り探索を行う。「縦型探索」とも呼ばれる。

ABC204 C問題

有向グラフと捉え、全ノード分DFSを回せばいいようです。解説のPythonのコードをRubyで書き直したのがこちら。

n,m = gets.split.map(&:to_i)

# towns[i]からいける都市のリスト
# Rubyのグローバル変数は$を接頭辞にする
$towns = Array.new(n){[]}
m.times do
  a,b = gets.split.map(&:to_i)
  $towns[a-1] << b-1
end

# DFS
def dfs(v)
  # 一度訪れた都市は探索を終了させる
  return if $temp[v]
  $temp[v] = true
  # DFSの醍醐味
  # 再起関数を使って底まで見ていく
  # グラフなので無限ループに入る恐れがあるが、上記のreturnで途切れるので問題なし
  $towns[v].each{|vv| dfs(vv)} 
end

ans = 0
n.times do |i|
  # iから各都市に行けるかどうか真偽値の配列でカウントする
  $temp = Array.new(n,false)
  dfs(i)
  ans += $temp.select{|el| el}.count
end

puts ans

結び

再帰関数への苦手意識がどうも抜けません。類似問題で要練習ですね。

2021-06-05

Whimsicalでフローチャートを作る

Whimsical

初め

投稿頻度の遅れを取り戻す！rymです。
今回は、Whimsicalでフローチャートを書いていこうと思います。
前回は、フローチャートやワイヤーフレームをぶっ飛ばして、XDでVuetify UIキットを使う方法をご紹介しましたが、ちゃんとアプリ開発の順を追って取り組んでいこうと思います。

WhimsicalにSign in

Whimsicalはブラウザ上でフローチャートやワイヤーフレームを作成できるアプリケーションなので、何はともあれ会員登録です。以下、リンクから公式トップに飛べるので各自会員登録お願いします。

whimsical 公式

触ってみる

ログインすると各自のworkspaceに飛ばされます。
そこに、「Getting Started」なるものが準備されているのでまずはこれを触ってみます。
オブジェクト・コネクタの生成、zoom in/out、grouping、オブジェクトの前後位置の変更が学べます。

よく使いそうなショートカットのご紹介

オブジェクトの生成 : s
コネクタの生成 : c (オブジェクトをフォーカスすると表示されるコネクタのマークをクリックしてもOK)
テキスト挿入 : t (オブジェクトにテキストを挿入するときはオブジェクトをダブルクリック)
zoom in/out : z + 左クリック / z + 右クリック
zoom reset : z + 0

終わり

オブジェクトの生成からコネクタを生やすところがストレスなくスラスラ動かせて使いやすそうな印象です(これを直感的とか言うのでしょうか)。
次は、同じくWhimsicalでワイヤーフレームを作っていこうとおもいます。

2021-06-05

Adobe XDでVuetify UIキットを使う

Vue Vuetify Adobe XD

初めに

お疲れ様です。rymです。
週一投稿を初回から無視する計画性の無さに驚きを隠せません。

最近はVue.js + TypeScriptにはまっており、何かアプリ作りたいな～とか考えています。
といった訳で画面設計していくため、今回は表題の通り、Adobe XDでVuetifyのUIキットを使う方法を書こうと思います。

Vuetify UIキットをローカルへダウンロード

Vuetifyの公式サイトが準備してくれているUIキットをダウンロードします。zip形式ですので解凍をお忘れなく。

Vuetify 公式

adobe XDで開く

XD起動 > 「ファイル」 > 「コンピュータから開く」 > 「AdobeXD-Light-Theme.xd」などのUIキットファルダ内にあるxdファイルを開きます。
すると、以下のようなVuetifyのコンポーネント群が表示されます。後は、これを利用して好きなように画面を作っていけばいいですね。 f:id:rym99:20210605165137p:plain

結び

今回のような、n番煎じのサクッと終わってしまうようなものも今後は記事にまとめていこうと思います（備忘録ですし）。

P.S.

企画書や機能一覧はPower Point使ったのですが、何かいいフレームワークないものですかね？

2021-05-19

GitHubにSSH接続する

GitHub

初めに

初めまして、rymです。今年の目標は、「書き出す。書き残す」。考えたり悩んだりしたらすぐにペンを走らせる。やったことは雑にでもいいから（出来れば人目につくところに）アウトプットして置く。ということで、自分の技術的な学びをこの場に書き残していけたらなと考えております。ゆる～く毎週末に１つくらい追加していきます。

その第1弾はgithubへのssh接続。「あれ？ssh接続の設定してなくね？」とふと思い確認してみたところ案の定だったので、今回はこれを題材にしようと思います。

今回参考にさせていただいた記事をこの２つ。
GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~
お前らのSSH Keysの作り方は間違っている

※追記
rsaよりed25519の方が安全面と性能面で上回るみたいです。
SSH認証に最強の「Ed25519鍵」を使おう

鍵生成が以下のようになること以外はrsaと手順は同じで大丈夫です。

ssh-keygen -t ed25519  -C "your_email@example.com"

秘密鍵・公開鍵の作成

まず、ssh接続に必要な秘密鍵と公開鍵を作ります。
鍵の置き場から、

mkdir ~/.ssh

そして鍵の生成

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

-C : コメント。参考にした記事によるとgithubに登録してあるメールアドレスを入れておくのが一般的みたい。
-b : 鍵のビット数。デフォは2048。
-t : 鍵の暗号化方式。デフォでrsa。

公開鍵のgithubへの登録

公開鍵をクリックボードへコピー（clipコマンドは初めて知りました。）
コマンドプロンプトの場合

clip < ~/.ssh/id_rsa.pub

Powershellの場合

 cat .\id_rsa.pub | clip

※PowerShellはファイル入力のリダイレクトは出来ないみたいです。

github 「Settings」 > 「SSH and GPG keys」 > 「New SSH key」の順でページを開き、公開鍵をペースト。
画像のKeyのところにCTRL + V でまるっと張り付ければいいですね。 f:id:ryomar:20210516134129p:plain

疎通確認

最後に鍵の設定が上手くいったか確認します。

ssh -T git@github.com

-T : 仮想端末の割り当てを禁止する。（逆に -t は割り当てるみたい。）

以下のように出力されれば成功です。

Hi <name>! You've successfully authenticated, but GitHub does not provide shell access.

結び

以上で、githubにssh接続する設定は終わりです。今まで勉強の際にREADMEに書き残していたものもこっちに移していけたらと思います。以上。

rymの技術ログ

書き出す。書き残す。