Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
2022.05.25_はじめてのIT勉強会.pdf
Search
obrkn
May 23, 2022
Programming
360
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
2022.05.25_はじめてのIT勉強会.pdf
勉強会のLT資料です
https://lets-go-study-meeting.connpass.com/event/246650/
obrkn
May 23, 2022
Other Decks in Programming
See All in Programming
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
260
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
tomokon
0
500
気持ちぃ〜角丸 Squircle
ryu1013
0
310
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
drumath2237
1
610
Performance Optimization With LLMs
xleitix
0
130
なぜCTOを降りてFDEを選んだのか?〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
gonta
1
220
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
gam0022
0
370
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
iwiwi
1
440
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
790
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.9k
カツオ、ご期待ください
suneo3476
0
190
golang-bob.pdf
iwatsukayura
0
130
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
360
Ethics towards AI in product and experience design
skipperchong
2
440
Building Better People: How to give real-time feedback that sticks.
wjessup
371
20k
How GitHub (no longer) Works
holman
316
150k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
28k
The SEO Collaboration Effect
kristinabergwall1
1
590
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Building a Scalable Design System with Sketch
lauravandoore
464
34k
Practical Orchestrator
shlominoach
192
12k
Transcript
ターミナルを いい感じにしよう 2022.05.25 #2 はじめてのIT勉強会 in 仙台(2022)【オフライン開催】
小原健(おばらけん) 30歳 2020.04 エンジニアへ転向 2022.05 フリーランスへ転向 Rails, Next.js, ReactNative, AWS Twitter:
https://twitter.com/2_obr GitHub: https://github.com/obrkn
今日話すこと • いい感じのターミナルを作る方法 • Macユーザー向け(Windowsは一部異なる) 今日話さないこと • スキルアップにつながる技術的知識 • エンジニアのキャリアに関する体験談
Table of contents ターミナル編 (1)ターミナルソフト「iTerm2」 (2)カラー「Dracula/iceberg」 (3)フォント「Ricty/HackGen」 (4)透明度・フルスクリーン・背景画像 (5)背景「Pokemon-Terminal」 プロンプト編
(6)プロンプト変更の基本 (7)テーマ「Pure/Powerline/Starship/他」 (8)フレームワーク「Prezto/oh-my-zsh」 プロンプト ターミナル シェル
ターミナル編
(1)ターミナルソフト「iTerm2」 IDE ターミナル (Macデフォルト) iTerm2 (Mac) Windowsターミナル (Windows) Visual Studio
Code
(2)カラー「Dracula/iceberg」 iTerm2設定画面 ① ② 背景 文字 ANSIカラー プロンプトで 利用できる(後述) 黒
Black 赤 Red 緑 Green 黄色 Yellow 青 Blue マゼンタ Magenta シアン Cyan 白 White カラースキームの適用
導入方法・・・カラースキームをインストール後、 Import…からファイル(.itermcolors)をインポート。 一覧に追加されるので、選択する。 (2)カラー「Dracula/iceberg」 カラースキーム • デフォルト • Dracula •
Iceberg 他にもたくさんあるiTerm2のカラースキーム一覧 https://iterm2colorschemes.com/ ①③ ② ④
(3)フォント「Ricty/HackGen」 ① ② 特殊文字を伴うプロンプトテーマを使う 場合は、文字化けしてしまうので、 「HackGenNerd」のようなNerd対応フォ ントを使おう。 デフォルトの「Monaco」も悪くないが、日本語が最適化された「Ricty」「白源 (HackGen)」がおすすめ。フォントサイズは大きくしよう。 特殊文字(non-ASCII)のみに違うフォ
ントを適用することもできる。
(4)透明度・フルスクリーン・背景画像 ① ② フルスクリーンをデ フォルトにしておこう Cmd+Enterで On/Off切り替え 透明度 背景画像 フルスクリーン
透明度が高い方が 厨二心をくすぐる Cmd+UでOn/Off切 り替え
(5)背景「Pokemon-Terminal」 Pythonで動作している。 なんと700種類以上ある。 お好みのポケモンもきっとあ るはず。 Pokemon-Terminal https://github.com/LazoCoder/Pokemon-Terminal
Table of contents ターミナル編 (1)ターミナルソフト「iTerm2」 (2)カラー「Dracula/iceberg」 (3)フォント「Ricty/HackGen」 (4)透明度・フルスクリーン・背景画像 (5)背景「Pokemon-Terminal」 プロンプト編
(6)プロンプト変更の基本 (7)テーマ「Pure/Powerline/Starship/他」 (8)フレームワーク「Prezto/oh-my-zsh」 プロンプト ターミナル シェル
プロンプト編
(6)プロンプト変更の基本 環境変数に表示項目や文字色を設定すると、プロンプトを変更できる bashの場合 画面左端 PS1 zshの場合 画面左端 PROMPT、画面右端 RPROMPT 例
(zsh) 出力内容 例 %~ カレントディレクトリ ~/currentdir %D 日付 22-05-25 %t 時間 19:30PM %F{red} 色(赤) Red %(?.A.B) 成功ならAを出力 失敗ならBを出力 ~/.zshrc PROMPT="┌─%F{magenta}%~ %F{white}└─(*'-')< ~ $ " RPROMPT="%F{cyan}%t" 他にもいろいろな環境変数やエスケープ文字がある 環境変数 https://zsh.sourceforge.io/Doc/Release/Parameters.html#Parameters-Set-By-The-Shell エスケープ文字 https://zsh.sourceforge.io/Doc/Release/Prompt-Expansion.html#Prompt-Expansion Generatorサイトで手軽にプロンプトを自作できる! bash https://scriptim.github.io/bash-prompt-generator/ zsh https://zsh-prompt-generator.site/
(7)テーマ「Pure/Powerline/Starship」 最適化されたプロンプトテーマ。Git表示や言語表示があるものもある。 Pure以外はPowerline fontsやNerd対応フォントでないと文字化けする。 Pure ☆11.3k Powerline shell ☆5.8k Starship
☆26.5k Spaceship ☆16.8k (Starshipと同様) Powerlevel10k ☆28.3k (Powerlevel10kは質問に答えていくと、自分好みのデザインが出来上がる) Pureは必要最小限の情報に抑えられており、おすすめのプロンプト。 テーマ一覧 👉 https://github.com/unixorn/awesome-zsh-plugins#themes Githubのスター数は2022/05/25現在
(8)フレームワーク「Prezto/oh-my-zsh」 コマンド入力を補助する強力なプラグインを入れたり、豊富なテーマからお気に 入りのプロンプトを選択したりできる。しかし、他のライブラリ等と干渉することが あるので、慣れないうちの導入はおすすめしない。 Oh my zsh ・・・ 多くの選択肢で美しく強力なプロンプトを作れる https://ohmyz.sh/ テーマはなんと130種類以上ある https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
Prezto ・・・ 軽量なフレームワークで快適なプロンプトを作れる https://github.com/sorin-ionescu/prezto 一覧 👉 https://github.com/unixorn/awesome-zsh-plugins#frameworks
リンク集 iTerm2 https://iterm2.com/ Dracula https://draculatheme.com/ Dracula iTerm https://draculatheme.com/iterm Iceberg https://cocopon.github.io/iceberg.vim/
Iceberg-iTerm2 https://github.com/Arc0re/Iceberg-iTerm2 カラースキーム一覧 https://iterm2colorschemes.com/ Ricty https://rictyfonts.github.io/ HackGen https://github.com/yuru7/HackGen Pokemon-Terminal https://github.com/LazoCoder/Pokemon-Terminal Pokemon一覧 https://github.com/LazoCoder/Pokemon-Terminal/blob/master/pokemonterminal/Data/pokemon.txt bash prompt generator https://scriptim.github.io/bash-prompt-generator/ zsh prompt generator https://zsh-prompt-generator.site/ 環境変数 https://zsh.sourceforge.io/Doc/Release/Parameters.html#Parameters-Set-By-The-Shell エスケープ文字 https://zsh.sourceforge.io/Doc/Release/Prompt-Expansion.html#Prompt-Expansion Pure https://github.com/sindresorhus/pure Powerline-shell https://github.com/b-ryan/powerline-shell Starship https://starship.rs/ja-JP/ Spaceship https://spaceship-prompt.sh/ Powerlevel10k https://github.com/romkatv/powerlevel10k テーマ一覧 https://github.com/unixorn/awesome-zsh-plugins#themes Oh my zsh https://ohmyz.sh/ Oh my zshテーマ一覧 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes Prezto https://github.com/sorin-ionescu/prezto フレームワーク一覧 https://github.com/unixorn/awesome-zsh-plugins#frameworks
終わり 良いターミナルライフを!!! iTerm2 + Dracula + HackGenNerd Console + Pokemon-Terminal
( unown ) + Starship
コマンド入力補助編
プラグイン(zsh) Oh my zshなどのフレームワークを入れなくても、 単体で入れられるプラグインは豊富にある https://github.com/unixorn/awesome-zsh-plugins#plugins https://github.com/topics/autocomplete その中でもおすすめのプラグインを紹介したい! 「zsh-syntax-highlighting」 入力中にそのコマンドが存在すれば緑色で、
存在しなければ赤色でハイライト表示してくれる。 https://github.com/zsh-users/zsh-syntax-highlighting 「zsh-autosuggestions」 入力中に過去のコマンド履歴に基づいて候補を表示してくれる。 “Ctrl + e”でその候補を補完してくれる。 https://github.com/zsh-users/zsh-autosuggestions 「fzf (command-line fuzzy finder)」 入力中に”Ctrl + r”でコマンド履歴を、 ”Ctrl + t”でファイルを曖昧検索してくれる。 候補から”Ctrl + p”で上へ、”Ctrl + n”で下へカーソル移動し、 Enterで決定するとコマンドラインへ補完してくれる。 曖昧検索のプラグインとして、「 peco」も人気がある。 https://github.com/junegunn/fzf
キーバインド・エイリアス シェルにはデフォルトでキーバインドが設定されており、カスタマイズもできる 設定されているキーバインドの一覧は、 bashなら”bind -p”、zshなら”bindkey -L”で確認できる 一覧の見方(zsh)は、 ^ はCtrlキー、 ^[
はEscキー(WindowsならAltキー)を示す Escキーは使いにくいので、 iTerm2の設定で左OptionキーをEscキーに割り振っておこう 表におすすめのキーバインドを紹介したい! Ctrl + a 先頭移動 Ctrl + b 1文字左移動 Ctrl + c コマンド中断 Ctrl + e 末尾移動 Ctrl + f 1文字右移動 Ctrl + h 1文字左削除 Ctrl + k 末尾まで削除 Ctrl + u 先頭まで削除 Ctrl + w 単語削除 Ctrl + y ヤンク(貼付) Esc + b 単語左移動 Esc + f 単語右移動 GitやDocker等でよく使うコマンドは、エイリアスを登録する方法もある 例) lsコマンドを隠しファイル表示の -aオプションと 色分け表示の -Gオプションをつけて上書き登録 ~/.zshrc alias ls='ls -aG' cdコマンド等でパス入力中にフォルダ名やファイル名を忘れた場合は、とりあえず Tabキー を押すと補完or候補提示してくれる コマンド入力中に Option + 左クリック でマウスカーソル位置へ移動できる