えんたまの理

〜エンジニアを目指す男の成長日記〜

今日の学び:HTML/CSSの基礎

こんにちは、えんたまです。

昨日、もう1記事書こうとしましたが断念してしまいました。

学んだことをもっとまとめないと、記事だけでとても時間がかかってしまう•••

物事の説明ではなく、シンプルにしようと思います。

 

学んだこと

・HTMLの超基本的な構造

・htmlファイル、cssファイルの作り方

 

とりあえず、ページに文字を出すことに成功しました😆

カリキュラムの説明がそこそこ飛んでいるので、ついていくのが精一杯です。

 

commandキー + n
command+s

 

この二つは何回も使うし、覚えておかないとついていくどころじゃなかったのでメモ。

 

このままの調子でカリキュラムが進むと考えると末恐ろしい・・・

今日の学び1:プログラミングの学習未経験者が押さえておきたい3つのポイント+雑感

こんにちは、えんたまです。

学習前の心構え的なことが書いてあったのでまとめます。

また、いよいよ本格的にプログラミングについて学ぶことになりそうなので、

全部一度にまとめず、2記事に分けることにしました。

 

プログラミングの学習未経験者が押さえておきたい3つのポイント

とにかく書くこと
一度解説を読んでもわからない場合でもとりあえず見て写すそのあとに意味を考える
イメージ的には勉強よりも練習

 

とにかくエラーを経験することで上達する
知識と経験を小刻みに繰り返すことで、身体で覚えていく

 

 

最初から厳密性を求めて全てを網羅することは不可能
自分を中心に出来ることが面で広がっていくイメージ
色々な文法や書き方、ライブラリやイディオム、ノウハウなど出来ることが繋がって、年輪のように知識と経験を積み重ねていくイメージ

 


メンターに質問する前に
カリキュラム箇所の特定
エラー内容(エラー文)を共有すること
エラーが起こる前の学習状況を伝える
最終確認
サーバーの再起動が必要な際にターミナル上から再起動ができているか
テキストエディタでのコードの保存漏れはないか

 

以下雑感

Macの操作に慣れず悪戦苦闘中。。。

chrome上で、複数箇所の文書の選択のやりかたが全くわからず。

この記事を書く際にも、複数文書を選択して同時に文字の大きさを変更しようとしたけど、どうにもうまくいかない。

このブログを始めて良かった事の一つは、Macの超基本動作を少しづつ覚えられる点かもしれない。

ショートカット一覧をメモにまとめたので、それを見ながら覚えていくしかなさそう。

そしてメモを起動して思ったのが、Windowsのメモと全然違うという事。

一つのファイルとしてデスクトップに保存できないのが衝撃でした。

付箋扱いになるのかな?

めちゃくちゃ便利だと思ったのが、複数窓を開いている状態で、いちいち窓を選択しなくても、ロールオーバーされている窓のスクロールができること。

Windowsでこうなれば良いのに、と思っていた事がMacで出来るようになっててありがたい。

今日の学び:Webアプリケーションを構成する要素etc...

こんにちは、えんたまです。

昨日手も足も出なかったWebアプリケーションのマインドマップ

今日はそのWebアプリケーションについて学んだことを書いていきたいと思います。

 

そもそもWebアプリケーションとは?

ブラウザから使用可能なアプリケーション・サービスのこと
クライアント(使用者)側のブラウザ側とサーバー側のアプリケーションサーバなどのプログラムが、互いに通信を行うことでサービスを実現する


一般的なクライアントとサーバーの構成

f:id:masa-def91:20181113234221p:plain

画像出典:http://rucio.o.oo7.jp/VBhtml/HTML06.htm

クライアントでは、IEFirefoxなどのWEBブラウザが動作。 ブラウザがユーザとのインタフェースとなる

サーバでは、データの蓄積のためにデータベースサーバが動作

これらのデータを処理するロジックとして、アプリケーション (及び、それを動作させるプラットフォームとして、アプリケーションサーバ) が動作

サーバは、ブラウザから受信したリクエストに応じて処理をおこない、 ユーザに提示すべき内容などをレスポンスとしてクライアントに送信

 


Webアプリケーションの構成要素

・HTML/CSS

Webページの見た目を形づくるマークアップ言語と呼ばれるもの
HTMLで表示する文字や大まかな構成を決定
CSSで文字のフォントや大きさ、領域の高さや横幅を決定

 →HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語

 →CSSCascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語

 

サーバーサイドスクリプト

→ユーザーからリクエストがあったときにWebサーバー上で動作
 HTML文書を作り出すプログラム
 URLが示すHTMLファイルの名前やHTTPの情報をもとに
サーバーサイドスクリプトを実行してその場でHTMLを作成してWebブラウザーに渡す

 

クライアント-サーバ間の通信

WEBアプリケーションの場所を示したり、WEBアプリケーションに対して値を渡す場合にはURL(Uniform Resource Locator) が使用される

URLは、一般的に以下のような形式で表現される

絶対URL表現
http://(サーバ名)[:(ポート番号)]/(絶対パス)[?(クエリ)]

相対URL表現
(相対パス)[?(クエリ)]

絶対URL表現 とは、サーバの場所からパスまで、リソースの識別に必要なすべての情報をURLとして記述する方法 
ユーザがブラウザにURLを入力しリソースにアクセスする場合は、絶対URL表現によってリソースの位置が指定される 
また、あるリソースから別のサーバにあるリソースを参照する場合なども、絶対URL表現が使用される 

相対URL表現 とは、あるリソースを起点に別のリソースの相対的な位置をURLとして記述する方法 
主に、あるリソースから、同じサーバにある別のリソースを参照する場合に使用される

 

リソースとは•••ウェブサイトを構成するもの一般(文書(HTML,CSS)・画像・動画・音楽その他諸々のデータファイルなど)

 

 

HTTP
クライアント-サーバ間のリクエスおよびレスポンスは HTTP(HyperText Transfer Protocol) に則って表現される。
リクエスおよびレスポンスは、一般的に以下のような形式で表現される。
リクエス
(メソッド) (リクエストパス) HTTP/1.1
(ヘッダ名): (値)
...
(メッセージ本体)

レスポンス
HTTP/1.1 (ステータスコード) (ステータス文字列)
(ヘッダ名): (値)
...
(メッセージ本体)

リクエスト・レスポンスともに、大きく分けてヘッダ部とメッセージ本体の2箇所からなる
ヘッダ部にはリクエスト・レスポンスに関する情報が文字列で記述され、
メッセージ本体にはリクエスト・レスポンスのデータが記述される

 

今日やった事のメモ

Sublime Textの設定

変更した内容は「command + s 」で保存
以下のパッケージをインストール
HTML5 ・・・ HTMLタグの入力を補完

CSS Snippets ・・・ CSSの入力を補完

・TrailingSpaces・・・不要な半角、全角スペースに色を付ける

Ruby Debugger ・・・Rubyの構文をチェックし、間違った箇所を指摘

 

 

 

今日の学び:学習に意味を見出すetc...

こんにちは、えんたまです。

今日の学び、という形でその日学んだことを書いていこうと思います。

自分の備忘録 兼 成長の証となれば。

 

●学習に意味を見出す

価値があると認識しながら学習する

 

✒️今プログラミングを学習していることが、将来どのように役立つか

作文のお題があったのでやってみます。

そもそも自分が転職にあたりプログラミングを選んだ理由の一つが

・自分で何かを作り出したい

という気持ちがあったからです。

プログラミングを学ぶことでアプリの制作やサーバー構築などができるようになるのは、その夢を叶えられることに繋がります。

また、今現在営業職をやっている理由が、

「お客さんと対話ができて、役に立てること」

だったので、エンジニアとしてお客さんの要望を聞き、その要望を自分の仕事によって叶えることができるようになるというのはとても魅力に感じます。

ゆくゆくは、自分の周りの人に感謝されるようなものづくりが、エンジニアという職種ならできるのではないかと思うので、それらの夢を叶えるために役に立つと考えています。

 

以上、作文

 

メタ認知による感情の制御

メタ認知•••自らの思考についての思考

自らはどう感じているか・それは何故かという自問

マイナス感情に陥った際にメタ認知を行い、その感情と向き合うことで、モチベーションの回復を図る。

 

●ポモドーロ・テクニック

25分集中して5分休憩する、集中力の発揮方法

 

以前出会ったエンジニアの方が言っていた、50分集中して10分休憩するというのはこれだったのか・・・

 

マインドマップの作成

自分の思考の整理をするために活用

f:id:masa-def91:20181112234335p:plain

現在自分が知っている、「Webサービスの作り方」について関連マップを作ってみましょう

というお題に対して、今の自分の限界がこちら

全く何もわからない 笑

 

●前日に自分が学んだ内容について自分の言葉で説明できるようにする

●検索練習

2−3日前に学習した内容を5〜10分かけて思い出す。それぞれの関連を思い出せる限り書き出す。その後、自分自身で解くための問題を作成する。

 

 

ここまで書いてみた感想。

要点をまとめるつもりが、長くなりすぎてしまったような感じ。

勉強時間の圧迫にならないように、もっとまとめることを心がけないといけないかも。

自己紹介

初めまして、えんたまです。

営業職のサラリーマンをしていますが、エンジニアになり転職することを決意しました。

エンジニア業界は全くの未経験で、30歳を目前とした挑戦となります。

このブログではそんな自分がエンジニアになるまでの学びを書いていきたいと思います。

 

まずはこのブログの名前を共に考えてくれた後輩に感謝。

f:id:masa-def91:20181112215225j:plain