HTML+CCSでTOP画面を作成してみた。

本日は、HTMLとCSSを活用して、
簡単なTOPページの作成にあたりました！

デザインがめちゃめちゃ素人くさいですが、、、

学習サイトで勉強しているだけではなく。
１から作ってみる、ことで多くの知見を得ることができました。

特に、検索バーについては、以下を指定して、
「border-radius」による角の丸み
「background-image」を活用した虫眼鏡アイコンを入れてみました！

input {
    background-repeat: no-repeat;
    background-image: url(./icon.svg);
    border-radius: 50px;
}

詳細	進捗
学習時間目標	1,000時間
本日の学習時間	6時間
目標時間まで	986時間

と言いますか、
ブログの書き方を学ぶ中で、コンテンツとして非常に価値の低い、
ただの日記見たくなってしまっているのがよろしくないですね。。。

コンテンツの量と質で見たら、まだまだ量の段階ですが。
これから良質な発信をできるよう他の方のサイトも参考にさせていただきます。

Linuxでショートカット を利用しよう

シンボリックリンクとは

私は今業務でWindowsを利用しているのですが、（私用はMacです）
業務内でフォルダのショートカットを多様してます。

みんな絶対パスを毎回指定するのはとても面倒ですよね。
そこでシンボリックリンクの出番です。

この「ショートカット 」にあたる部分が、
シンボリックリンクというわけです！

CLI操作においては、とても重要ではないかと思います。
※実務事例などコメントいただけると嬉しいです。

実際、本日の学習がなければ全く知りませんでした。。。

実践してみよう

コマンドは、以下で実行します。 ln -s [ファイルパス] [シンボリック名]

では、さっそくやってみましょう。

# まずは、ディレクトリを作成します。
mkdir -p myapp/app/dev

#　以下でシンボリックリンクを作成します。
ln -s ./myapp/app/dev dev

#　ls -l コマンドでファイル詳細を確認します。
ls -l

# 無事できました！
dev -> ./myapp/app/dev

ちなみに！以下は削除コマンドです。
こちらも覚えておきましょう。

unlink [シンボリック名]

最後まで読んでいただきありがとうございました！

詳細	進捗
学習時間目標	1,000時間
本日の学習時間	5時間
目標時間まで	992時間

本日は、ProgateのHTML＆CSS基礎編を学習しました。
なんとなくフロント部分のイメージは湧きました！

昨日の、２時間分は取り返せませんでした、学習時間の借金はいけないので。
週内で返済します！！！

【覚えておきたい】Linux基礎コマンド

Web系エンジニアとして、避けることができないコマンド操作

Linuxコマンドの基礎編として、
まずは以下を抑えておきましょう！

Linux基礎コマンド一覧

コマンド	内容
touch [ファイル名]	ファイルを作成する
cat [ファイル名]	ファイルの中身を表示する
mkdir [ディレクトリ名]	ディレクトリを作成する
mkdir -p [ディレクトリ名]	上位ディレクトリも作成する
cd [ディレクトリ名]	ディレクトリを移動する
pwd	カレントディレクトリを表示する
ls	ファイル・ディレクトリを一覧表示する
mv [移動させたいファイル名][移動先のディレクトリ]	ファイルを移動する
mv [ディレクトリ名][移動先のディレクトリ]	ディレクトリを移動する
mv [現ファイル名][新ファイル名]	ファイル名を変更する
mv [現ディレクトリ名][新ディレクトリ名]	ディレクトリ名を変更する
cp [コピー元ファイル名][新ファイル名]	ファイルをコピーする
cp -r [コピー元ディレクトリ名][新ディレクトリ名]	ディレクトリをコピーする
rm [削除するファイル名]	ファイルを削除する
rm -r [削除するディレクトリ名]	ディレクトリを削除する

プチ知識[ディレクトリ]

*ルートディレクトリ
　L 1番親のディレクトリ

*カレントディレクトリ
　L 自分が今いるディレクトリ

/ 　　　 　<- ルートディレクトリ
　L dir　　<- カレントディレクトリ
　　L dir2
　　L dir3
　　　L dir3-1

最後まで読んでいただきありがとうございました。

詳細	進捗
学習時間目標	1,000時間
本日の学習時間	3時間
目標時間まで	997時間

いきなり、２時間ショートしてしまいました。
この分は明日取り返します！

Web系バックエンドエンジニアになるまでのロードマップ

宣言

　1,000時間（6ヶ月）の学習でWeb系バックエンドエンジニアになる。

これまで

　・漠然と学習をしてしまい、ロードマップや具体的な指標、期間が明記できていなかった。
　・学習順序が明確ではなかった。
　・つまみ食い学習をしていたが、基礎が身についてなかった。

これから

　・1日6時間の学習時間を確保する。
　・学習順序
　　　1. コンピューターサイエンス
　　　2. Linux
　　　3. HTML/CSS/JavaScript
　　　4. Ruby
　　　5. SQL
　　　6. Git/Github
　　　7. Rils
　・学習順序について、参考にさせていただいたのは勝又さんの以下の動画。

Railsでポートフォリオを作るまでの学習順序と具体的な教材について

ということでさっそくプロゲート有料プランへ申し込み完了しました！

最後まで読んでいただきありがとうございました。

Railsサーバーが切れない。。。

意気揚々とrailsサーバーを立ち上げたのですが、 今度はサーバーが切れない、ことになりました。。。

自分用メモでもありますが、解決策を書いておきます。

解決方法

◆パターン1
psコマンドを使い、railsプロセスを見つける。
該当IDをコマンドを切ります。

ps -ax | grep rails

kill -9 プロセスID

◆パターン2
lsofコマンドを使い、使用中のファイルやポートのプロセスを表示します。
該当IDをコマンドを切ります。

lsof -i:ポート番号

kill -9 プロセスID

私の場合、今回はパターン2で解決しました。
皆さんの事例やそれぞれ、どう言った時に起きたか、
などなどご意見がございましたらコメントお待ちしております。

ここ最近、エラーや対処方法が非常に多いのですが、
これが成長していることなんだ！と前向きに捉えて引き続き学習していきます。

最後まで読んでいただき、ありがとうございました！

Railsサーバーが立ち上がらない

本日は、Railsサーバーが立ち上がらなかった時の対処方法を書いていきます。

◆環境
MBP16
OS :macOS Catalina(10.15.4)
メモリ :16GB
SSD :512GB
シェル :zsh
Rails :6.0.3

初心者あるある第3弾となってしまいました。。。
過去の失敗談はこちら。 challenger-soft.hatenablog.com challenger-soft.hatenablog.com

先日、導入したRailsを立ち上げようとしたところ！
なんとエラーが出てしまいました。

それがこちら

Webpacker configuration file not found /Users/ユーザー名/Desktop/アプリ名/config/webpacker.yml. 
Please run rails webpacker:install Error: No such file or directory @ rb_sysopen

助けてGoogle先生、ということで例によりいろいろ調べたところ、
Rails6から「Webpacker」が導入され、これをインストールする必要があることが分かりました。

ここからは、以下のコマンドを流すだけ！

brew install node
brew install yarn
rails webpacker:install

再度、サーバーを立ち上げてみたところ。。。

rails s   

おなじみの画面が出ました！！！

環境構築で挫折する人が多いという気持ちがわかりました。

ただし！私は何事にもチャレンジする、エラーが出ることは解決可能！と
諦めず、対応したことで自力での問題解決ができました。

最後まで読んでいただきありがとうございました。

Railsがインストールできない。。。ときの解決方法！

今回は、Rubyの環境構築で躓き、
Railsでも躓いた点をまとめてみました。

Rubyの環境構築はこちら =>
challenger-soft.hatenablog.com

初心者あるあるなのか、、、
困っている方の助けになれば嬉しいです。

それではいきましょう。

Railsインストール

インストールはとっても簡単！

以下のコマンドを流し、必要に応じてバージョン宣言してあげましょう。
今回は「6.0.2」としてみました。

（めちゃ簡単！Rubyの時とは大違い。と思っていた私）

gem install rails -v "6.0.2"
# ~中略~
Installing ri documentation for sprockets-rails-3.2.1
Parsing documentation for rails-6.0.2
Installing ri documentation for rails-6.0.2
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, zeitwerk, activesupport, rack, rack-test, mini_portile2, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, mimemagic, marcel, activestorage, actionmailbox, actiontext, thor, method_source, railties, sprockets, sprockets-rails, rails after 30 seconds
40 gems installed  # <= インストール完了です！

さっそく、バージョンを確認してみましょう！

rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

あれ？参照できない。。。
sudoで実行してくれと書いてある。。。

原因

ググること１５分。

先日、Rubyの開発環境でインストールした「rbenv」が悪さをしている模様です。
rbenvとgemの参照先の不一致によって起こるようです。

以下のコマンドを流すと参照先が違うのが確認できます。

which ruby
/Users/ユーザー名/.rbenv/shims/ruby

which rails
/usr/bin/rails

確かに。。。それぞれ階層が違う。

　解決法

rbenv rehashを実行します！ gemからインストールした場合は、必ず必要のようです。

これでバージョン確認を行ったところ、

rails -v
Rails 6.0.2

無事に、バージョンが変更されました。
Windows端末でインストール後に再起動必要な場合が多いですが、
参照する際にはアプリの再起動を一度行ってみるのも手ですね。

最後まで読んでいただきありがとうございました。