基礎の基礎?! HTMLとCSSの文法

今日はhtmlとcssについて今更ながらアウトプットをしようと思います。

hタグ・・・主に見出しに使う。1が最大で数字が大きくなるほど文字が小さくなる。

pタグ・・・段落(paragragh)を表す。pタグで囲んだ文章は改行される。

aタグ・・・リンクを表す。例

<a href="url">サイトに現れる名前</a>

のように使う。

liタグ・・・リストを作る。

また、li要素をul要素で囲むと黒点、ol要素で囲むと連番になります。

続いて、cssについて書いていこうと思います。

cssの基本的な書き方は以下の通りです。

h1 {
color :red;
}

{}の前にcssを適用させたい要素名を書き、{}の中に変更させたい内容を記述します。例ですと色を赤に変更していますね。また、要素名をセレクタ、変更項目をプロパティと言います。

プロパティの例

font-size・・・文字の色

color・・・文字の色

font-family・・・文体

background-color・・・背景色

width・・・横幅

height・・・高さ

次に特定の要素にだけ変更を加える方法です。
例えば、pタグで何個か段落があり、一つにだけ変更を加えたい時、そのような時には要素にclassというものをつけます。

<p class="example"></p>

といった感じです。

この場合、css場では

.example {
変更項目
}

と表します。

また、セレクタがclassの場合は最初に「.」を付けましょう。複数の要素にクラス名を付けた場合、全てに適用されます。

本日は以上です。ありがとうございました。

Railsで掲示板を作ってみた

おはようございます。

 

僕は今ProgateでRailをやっています。

アウトプットとして、掲示板の作り方を載せていきたいと思います。

 

1.新しくアプリを作成するために

ターミナルで$ rails new 〇〇と打ち込みましょう。(〇〇にはアプリ名が入ります。)

このコマンドを打つことでアプリを作成するのに必要なフォルダやファイルが用意されます。

 

2.投稿ページの作成

viewが表示される仕組み

 

ページが表示されるまでの手順は以下の通りです。

ユーザーがURLを打ち込む→ルーティングがそのURLに合致したControllerに渡す→アクション内で変数の定義やデータの取得をしてViewに渡し表示されます。

 

3.controllerの作成

まず、はじめにcontrollerを作りましょう。ターミナルで$ rails g controller posts newと打ち込むことでnewアクションを持ったpostsコントローラーを作成することができました。この投稿作成ページは変数定義やデータの取得はしないのでアクションの中は何も記述しなくて大丈夫です。

 

4.ルーティングの設定とビューの作成

ルーティングはURL => アクション名と記述していきます。

get "posts/new" = "posts#new"

これは”posts/new”にユーザーがアクセスしてきたらpostsコントローラーのnewアクションに飛んでね。ということです。

 

getについてはまた後ほど解説していきます。

 

次にビューの作成です。

投稿フォームのコードは以下の通りです。

<%= form_tag("posts/create") do %>
<textarea name="content"></textarea>
<input type="submit" value="投稿">
<% end %>

 

textareaが投稿を書く欄を作っています。

 

5.投稿を保存する

投稿を保存するアクションに飛ぶためのURLは4で書いたようにform_tagメソッドの中に記述します。

 

ルーティング

posts "posts/create" =&gt; "posts#create"

 

getとpostの違いですが、DBに変更を加えるのがpost,変更を加えないのがgetです。

 

アクション

@post = Post.new(content: params[:content])
@post.save
redirect_to("posts/index")

 

インスタンスを作成し、フォームから受け取ったデータを引数として持たせます。

paramsの中に入っているのがフォームから受けとった内容です。

<textarea name=”content>と記述することでname属性の値をキーとした内容を送信することができます。

その後saveメソッドで保存して一覧にリダイレクトします。

 

6.一覧ページの作成

一覧ページも同じように作っていきます。

まず、ルーティングからです。

get "posts/index" =&gt; "posts#index"

 

アクション

def index
@posts = Post.all
end

 

allメソッドで全てのデータを取得し,@postsに配列としていれます。

@を前につけることでビューで表示できるようになります。

 

ビュー

<% @posts.each do |post| %>
<%= post.content %>
<% end %>

 

ビューでRubyの記法を使う場合<%%>を使います。実際に画面に表示させる時だけ<%= %>を使います。

 

以上で完成です。

また、今回はあくまで投稿の保存とデータの取得、表示をメインに説明させて頂いたのでHTMLについての記述は最低限にしています。

ご了承ください。

 

 

 

 

 

オブジェクト指向について

おはようございます。

今日は僕自身のアウトプットも兼ねて、オブジェクト指向について書いていきたいと思います。

 

1.オブジェクトとは

 

関連する変数やメソッド(動作)をまとめて、その塊に名前をつけたものである。

 

2.オブジェクト指向のメリットとは

仕様の変更を最小限に止めることができるのがオブジェクト指向のメリットだと思います。

 

例えば、車の機能についてプログラムを書いていたとします。

色、値段、スピードなどが挙げられますね。

 

しかし、途中で新たに機能を加えてと言われたとします。

そうすると、全ての車について追記しないといけませんよね。

 

すごい、面倒じゃないですか?

 

これがオブジェクト指向だと、全ての車の種類を書くのでなく、設計図のような物を書き、それを元に沢山の車種について書いていくので、変更は設計図だけで良いのです。

 

とても簡単ですね!!!!

 

 

3.クラスとかインスタンスって何????

ここからは具体的な用語を車に例えて説明しようと思います。

 

クラス・・・2でちらっと出てきましたが、設計図のことです。

 いわゆる骨組みのことですね。クラスを元に実体を作っていきます。

 

インスタンス・・・クラスを元に呼び起こす実体です。プリウスなど。

設計図を元に実際に作ります。

 

インスタンス変数・・・実体の名前、値段などそのものの持つ情報のことを言います。

 

メソッド・・・実体が行う動作のことです。アクセルを踏めば動く。ブレーキを踏めば止まる、などです。

 

設計図であるクラスにどのような情報を持ち、どのような動作を行うか書き、それを元に実体であるインスタンスを作るイメージです!!!!

 

 

今日は以上です。

ありがとうございました。

 

 

 

 

 

 

 

業務未経験の人はポートフォリオを!!!!

こんにちは。

 

前回ではprogateだけでは就職には結びつきにくいよ、と言う話をしました。

何故なら、実績がないから。

では、業務未経験だと転職するのは不可能なのか???

 

 

 

いいえ。

 

決してそんなことはありません。

実績がないなら、作ればいいのです。

 

つまり、一つの作品を自分で作成するのです!!!!

これをポートフォリオと言います。

 

ポートフォリオを作成することで自分のやる気や今までやってきたことを可視化して相手に見せることが出来るのです。

 

 

何作ったら良いのかわからないと言う人は、

ログイン機能、文章・写真投稿機能のある掲示板を作るのがオススメらしいです。

 

とにかく行動しないと始まりません!!!

 

僕はプログラミングスクールにその後から通い始めたので無事順調に作成することに成功しました。

 

次回はその辺りのことを書いていきたいと思います。

プログラミング学習最初のすヽめ

おはようございます。

 

今日は転職を決意してからの話をしようと思います。

転職を決意したので、とりあえずやってみないと話にならないと思い、まずは

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

↑こちらをやってみました。

 

こちらは環境構築などが不要な為、プログラミングでものが動く喜びをすぐに知ることができます。

また、つまづいたらヒントを与えてくれる為、つまづきにくいです。

 

いくつか言語がありますが、web系に転職を狙うならRubyPHPがおすすめです。

この二つの言語は仕事の需要も多く、特段難しいと言う訳でもないので最初に選ぶ言語としておすすめです。

 

僕はprogateでphpを学び、プログラミングの楽しさを知ることができました。

しかし、progeteをやっただけでは転職は残念ながら難しいと思われます。

 

何故なのか、、、?

 

 

 

 

 

それは実績がないからです。

 

考えてみれば当たり前のことで、新卒と違い転職ではポテンシャルではなく実績が求められると僕は思います。

 

では、前の会社でプログラミングをやってこなかった人はどうすれば良いのか。

 

それは次回以降伝えていこうと思います。

 

今日はここまでです。

ご覧になって頂き、ありがとうございました。

 

 

 

 

 

 

 

laravelを学ぶ理由

おはようございます。

 

今日から何回かに渡り、僕のことについて書いていこうと思います。

ブログを始めてから自己紹介もしていなかったので。

 

僕は現在22歳で四月からITコンサルティング会社に就職する予定です。

その会社は主にERPを取り扱う会社です。

その会社は客先常駐で仕事をしています。

 

そう、SESです。

服装は客先常駐なのでスーツです。

 

僕がIT業界を志望したのは、パソコン一つでどこででも仕事ができると思ったからです。

 

しかし、IT業界のすべての会社がそのように融通がきくわけではないのです。

 

僕はそれを内定を承諾してから知りました。

 

なので、これからIT業界で働こうとする人にはちゃんと知って欲しいのです。

IT業界と言っても様々な形態があることを。

自分のやりたいこととフィットしているか確認していただきたいです。

 

もちろん、その会社に入社するからにはその会社のノウハウ、技術を盗むつもりです。

 

ですが、僕の理想はその先にあります。

 

その理想のためにlaravel(PHP言語)を学ぶ必要が出てきました。

 

これが、昨年の8月です。

 

ここから僕のlaravelの勉強がスタートしました。

 

 

本日はここまでです。

続きは後日書いていこうと思います。

 

見ていただき、ありがとうございました。

 

追記

まだ、社会にも出ていない若者が何を言っているんだと思われる方もいるでしょう。

批判も甘んじて受け入れます。

 

しかし、これは僕の人生なので自分の理想を追いかけていきたいのです。

 

その為には多少の批判は仕方がないと思っております。

 

では、失礼致します。

 

 

 

 

サーバーサイド、フロントエンドの違い

おはようございます。

 

本日はサーバーサイドとフロントエンドエンジニアの違いについて説明していきたいと思います。

 

まず、サーバーサイドについて。

サーバーサイドとは動的な処理を記述する人のことです。

 

具体的にはユーザーからデータを受け取り保存したり、またユーザーの欲しているデータを渡してるプログラムを書く人です。

言語としては、ruby,phpなどがあります。

 

ちなみに僕はphpを勉強しています笑

 

では、次にフロントエンドについてですが。

こちらはユーザーが実際に見る部分(webページ)を手がける人のことですね。

 

ユーザーが見たいデータをDBから受け取り、表示する機能などが例に挙げられます。

cssjavascriptなどがありますね。

 

本日は以上です。

ありがとうございました。

 

プログラミングにおけるエラー解決の仕方

 

 

プログラミングでコードを書いていると、頻繁にエラーが現れますよね。

 

そんな時、どうやってそのエラーを解決したらいいかを説明していきたいと思います。

 

エラー文をよく読む

当たり前のことですが、これがとても重要です。

エラー文が出た時点で戸惑ってしまい、あたふたする。

最初の自分がそうでした。

 

しかし、そこですぐ諦めず、まずはエラー文をよく読みましょう。

 

なぜなら、エラー文を読むと、エラーの原因を特定できることが多いです。

 

例をあげてみます。

ターミナルでホームディレクトリから特定のフォルダに移動するようにコマンドを打つとします。

しかし、no such file or directoryと出てきてしまいました。

 

ここでしっかりエラー文の意味を考えます。

訳すと、

そのようなフォルダやファイルはありません。ですね。

 

つまり、今回のエラーは

1 該当するフォルダ、ファイルが存在しない

2 誤ったフォルダ、ファイル名を入力してしまった

3 階層が異なる

などが考えられますね。

 

このようにエラー文をよく読むことで、エラーの原因を推測することが可能となります。

 

 

参考になりましたら、ぜひお試しください。

 

 

以上です。

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