kanacan✨エンジニア成長日記🐣

プログラミング完全未経験からの21歳女性エンジニアによる成長日記

Debianでソフトウェアをインストールする方法

はじめに

フィヨルドブートキャンプの研修内容でDebianをさくらVPSにOSインストールした。 はじめてのLinux環境でビクビクしたが、チュートリアル通りに進めていけば難なくインストールは完了した。

インストール画面

公式チュートリアルを見ながら行った

カスタムOSインストールガイド - Debian 8 / 9 – さくらのサポート情報

Installを選択するとこんな感じでダウンロードが始まる。

f:id:pittsun:20180731190547p:plain

どんどん進んでいき、、、

f:id:pittsun:20180731190713p:plain

aptの設定が始まった!

aptって何?

  • aptは、Debianように開発されたパッケージ管理システム
  • コマンド操作ででソフトウェアをインストールできる✨

まず、Debian上にソフトウェアをインストールしたくても、そもそもコマンドラインしか無いからブラウザから探したりできない! そこでaptコマンドを使うことで、インストールが出来るようになる✨

しかも、aptはパッケージ管理システムなので、インストールだけでなく、競合するような機能を持つソフトウェアがあった場合にどっちを優先させるかなどの設定も行える

どうやってインストールするの?

  • apt-cache search [ソフトウェア名]

で、検索してインストールできる。

検索候補が多すぎる場合は、正規表現を使うことで一致率を高められるので便利💡

  • $ apt-cache search ^vim$

これで「vim」という文字列完全一致で検索ができる。

私はこれを先に実行したらすぐにインストールが完了した。

aptとaptitude

Googleでaptのやり方を調べてるとaptitudeというコマンドがよく出てくる。

調べたところ、aptのあとに出たのがaptitudeで、$apt-getなどのように引数を指定しないでも操作が可能らしい!

いいやん。

参考にしたサイト→LinuxのDebian系パッケージ管理 apt系コマンドの使い方

各コマンド一覧も掲載しようと思ったけど結局全部引用になってしまうので、上記のサイトを見ていただけるとm(__)m

まとめ

CUI操作のLinuxで、世の中に公開されているソフトウェアがインストール出来ると世界と繋がった感じがしてなんだかいい気分。なんでも出来る気がしてきた()

脱Vim恐怖症!Vimチュートリアル結構よかったよってお話し

Vimの画面にもビクビクしないでいられるようにVimチュートリアルやってみた

こんにちは!プログラミング完全未経験から初めて2ヶ月でエンジニアになったkanacanです。 私はすべてを学んでから実務に入ったわけではなかったので、日々悩んで学んでの繰り返しです✍️💨 今日はずっと苦手意識のあったVimを克服したのでそんなブログを書いていこうと思います。

始める前のVimに対するキモチ

とにかくコワイ、、!たまにgitのコミットメッセージ書くときとかRails consoleでDBに入ったときに操作をミスるとVimの操作画面が出てきてめっちゃ焦る。 Vimが開かれちゃうとdeleteキーも効かないしとりあえずquit打っときゃ出られると思っても文字列になっちゃったり、手には負えない!と投げ飛ばしたくなっちゃいます そんな私でもVimをある程度理解して使えるようになるのでしょうか?

なんでVimに手を出してみるのか

関わらないでいいなら難しそうだし避けて通りたかったです!!笑 ただ私が今参加しているフィヨルドブートキャンプという研修ではViの講座がありました。 Viの次がLinuxを学習していくのですが、LinuxではVimを操作していくみたいです。「やだなーー」という声が頭のどこかから聞こえてきましたが、「いつかやらなきゃいけないなら、今やっちゃおう!」と切り替えて頑張ることにしました!

学んだツール

これは、基本的にはダウンロード無しで、ターミナルに$vimtutorを打ち込むことでと開かれるVimチュートリアルです。 これを使えばvimの使い方を実際に手を動かして学ぶことが出来ます。 堅苦しい感じかと思いきや、、

最後の行の「いやマジで!」に吹いてしまった笑 結構ラフな感じで勉強できそう!という気持ちで学習をスタートさせることが出来ました。

私が実際にやってみて「これは覚えとこう!」と思ったところ

  • h,j,k,lで左、下、上、右に移動

キーボードのホームポジションって人差し指をポチがあるFとJに置くじゃないですか。そのJが一番よく使いそうな「下」でその隣のKで「上」 つまり、人差し指で下、中指で上に移動できる! わざわざホームポジション崩して右下のカーソルキーに操作しに行かなくていいってってめっちゃスマートじゃん!と興奮しました(まだ慣れないけど)

  • 困ったらとりあえずescキー

つまりそういうこと。焦ってアレコレする前にescキー。ちなみにMacBookProのTouchBar付きモデルを使ってるんですが、最初「escキーちっちゃくて使いずら!!」と思っていました。 実はescキーの左側の余白もescキーとして反応するんです!どっかで教えてもらってめっちゃ感動したので共有します😂

  • iを押したらINSERTモード(挿入モード)

INSERTモードのときは画面下に--INSERT--って出るんですね!そしてINSERTモードから抜け出したいときはこれまたescキー

  • :q!で保存せずにvimを終了、:wqで保存して終了

vimテキストエディタなので、開いて操作したら、保存して終了か保存せずに終了する必要がある。意図せずvimが出てなんか変な文字いっぱい打っちゃたあとでも:q!を打てば保存せずに終了してくれるから安心ですね!

  • 大体のコマンドはコマンド数値モーションを組み合わせて使う

    モーション一覧の一部: w - カーソル位置から空白を含む単語の末尾まで。 e - カーソル位置から空白を含まない単語の末尾まで。 $ - カーソル位置から行末まで。

  • 取り消したい時はcontrol+Zでなくu(undo)

普段「あ、ミスった」ってときにしょっちゅうcommand+Zで取り消してるのでvimでミスった時出来なくて辛い(T_T)と思っていたらありました! uが最後に実行したコマンドの取り消し、大文字のUで行全体の取り消しが出来るみたいです 取り消しの取り消しはcntrol+RRedoのrですね

  • /?で検索できる

/はカーソルより前を検索、?はカーソルより後ろを検索できる。 元の場所に戻るにはcntrol+R逆に進みたいならcontrol+Iで出来ました!

  • :!を使えば普段使っているような外部コマンドが使える

普段ターミナルで打ち込んでいるコマンドが使えるようになる。Enterを打ってvimに戻る 例):!ls :!pwd

  • コピペもypを使えば出来る

yはyank(引っこ抜く),pはputからきてる。 vを押してVISUALモードで範囲を選択してyでコピーされる。貼り付けはpを押すとカーソルの下に貼り付けらる。


とまあ、細かいコマンドというよりは基本操作で必要そうなところをピックアップしてみました。チュートリアルを進めながら書いていたので、間違っていたら教えてくださると嬉しいですm(__)m

Vimチュートリアル終わらせるのにかかった時間

  • 約6時間

多分もっと集中力があれば早く終わるのかと思いますが、私は以下のようなサイトを見ながらやってたり普通に読むスピードが遅くて6時間もかかったのかなと思います😖

さっさと帰りたい怠け者エンジニアは vim をマスターしましょう その1 - 基本と移動 - 強まっていこう

やり終えてVimに対する抵抗はなくなったか

  • Vim怖い」は消えた!!ただ、これからはVimmerになるぞ!という域には達しないかった

Vim怖い」は消えた!!それだけで結構嬉しいです😂でももちろんすべてを理解したわけでは全然ないので、これから徐々に知っていきたいなと言う気持ちにはなりました。 でもいまのところエディタはVS Codeでいいかな、という感じです。

まとめ

VimチュートリアルをやるとVim怖くなくなる!Vimで出来ることをザザッと知れて興味が持てると思います。 私がプログラミング始めたときも「難しそう」「黒い画面怖い」と思ってました。でもProgateをやって「プログラミング楽しい!✨」に変わったおかげで今楽しくエンジニアとしてお仕事ができています。 なので私みたいに「Vim怖い」と思っている人がいたらVimチュートリアルアリかもしれないです😌

HTML&CSSをイチから学び直す

HTMLはデザインするためのものじゃない

私が普段HTMLを書くときはRailsのViewでどう見せたいかを表現するときに書く。 つい「ここはもっと強調させたい」とかをHTMLでやろうとしちゃうけどそれはCSSでやること。

  • ここは見出し
  • ここはリスト
  • ここはテーブル

といったように環境に依存せずにコードの役割を書いていく=マークアップするのがHTMLである。

HTML5で出来るようになったこと

  • header,footer,articleなどでヘッダーやフッター、記事部分がそれぞれどこになるのか区別できるようになった
  • audio,video,canvasタグが使えるようになったおかげで動画編集が出来るようになった

CSSはページの見た目を期待通りに装飾していく

CSSはデザインの部分なのでデザインセンスのない自分には少し億劫な部分でさけていた。 折角の機会なので自力でCSSを書けるようになって苦手意識をなくしたい🔥

Positionで要素の位置を決める

今まで位置を決めるとすれば aline-centerなんかを使っていたので初めて知った

  • positionの値

    • static: デフォルト
    • relative: 現在の位置から相対的な位置を決める
    • absolute: 親要素の位置から絶対的な位置を決める
    • fixed: 画面の決まった位置に固定する

    • 書き方 . test {position: relative}

  • positionのプロパティ

    • top
    • bottom
    • left
    • right

例えばtopの場合、基準の上からの距離で指定する。 基本はtopとleftなど2つ組み合わせて指定する

  • よく見る写真の隅にタイトルが重なっているのは親要素をrelativeで固定して、子要素をabsoluteを載せるとぴったりハマる。

  • fixedを使うとスクロールしても動かないヘッダーが作れる

まとめ

HTMLとCSSは役割を分けてあげることが重要。そうすることでブラウザなどの環境に依存せず伝えたいどおりに表示ができる CSSは奥が深い、、! サルワカというWebデザインのサイトが教材になっていたが、凄くわかりやすくて「こんなこともできちゃうの!?」とかなり興味が持てるようになった。

「ターミナルなんとなくわかる」から、完全理解するための知識をつける(その2)

学んだこと

今まで知らなかった単語の由来や使われ方、意味を知る機会をFJOLDで得たのでメモ的にまとめていく

cURL

  • ネットからファイルをダウンロード出来るコマンド
  • "Client for URLs"の略
  • ブラウザの拡張機能でソースを見たときと同じものが見られる

chown

  • CHange OwNerの略

CHange OwNerの略でファイルやディレクトリの所有者を変更するコマンドです。所有者のユーザー名と変更したいファイル・ディレクトリ名を指定します。-Rは指定したディレクトリより下全部を変更するというオプションです。

バッククォートで囲むと置き換えて実行してくれる

$ls `pwd`とすると $ls /Users/hogehogeを実行してるのと同じ

sh

  • ファイルの中に書いたコマンドを順番に実行

shebang

  • #! shrap bangのこと

「“黒い画面”で実行しようとしたファイルの1行目の最初の二文字が#!だったら、その後に書いてあるコマンドに2行目以降の全てを渡す」

という機能です。

Shell

  • $マークを出してる
  • 一種のソフト
  • ユーザーとの仲介役
  • 上のshはshellの略

bash

  • shの強化版
  • プロンプトを表示して、ユーザーからの入力を待つ
  • 入力されたファイルを開いて終了
  • またプロンプトを表示
  • この繰り返し

まとめ

黒い画面も複数のプログラムのおかげで色々出来るただの入力装置。 むずかしいことが全てターミナルで行われてるように見えてたが実はファイルを開いているだけだった。 自作のコマンドを作って遊ぶことも出来て親しみが出てきた。