コスプレエンジニア(見習い)の日々勉強

こんにちは~

 

 

私は沖縄生まれ、今は東京のシステム関係の会社でエンジニアの見習いとして働いています。まだ未熟なので日々勉強ということで休みの日でもエンジニアとしてのスキルアップを目論んでいるのであります!

 

今回私が取り組むのはコチラ!

どん”Σ⊂(☉ω☉∩)

 

\N予備校の【無料体験版】プログラミング入門Webアプリ/

 

 

まったくのプログラミング初心者でもWebアプリが作れるようになるという評判が右肩上がりのN予備校のプログラミングコース。

実際どんな感じの内容なのか、本当に初心者でもわかりやすいのか、本当にこのコースを終えるとWebアプリが作れるようになっているのか!?

色々な疑問がありますが、とりあえず無料版で体験してみます٩( ‘ω’ )و

 

ちなみに私は高専卒でプログラミングを習っていたのですが挫折した経歴があります。

ポインタきらい…( ˙-˙ )

Webアプリに関してはほぼほぼ初心者です。

 

それでははじめていきます!

 

 

第0章ではプログラミングとはなんなのか、プログラミングを学ぶ上で重要なことなど、プログラミングの基礎的な話やこれから作っていくものの紹介などが記載されていました(。 ・ω・))フムフム

 

とりあえず本題は第1章っぽいので早速第1章をはじめてみます!ちなみに画面構成はこんな感じ↓

 

 

左に目次、右にコンテンツという画面構成でUI的にはすごく見やすくいい感じです(・ω・)b

 

1番上の「01.プログラミングを体験してみよう」からやっていきます。

最初の説明はなんと、「ブラウザ」の説明から。なんて良心的なんだ…!と衝撃を受けました。これは楽勝だ!興味ない人からするとIEとかGoogle Chromeとかなんのこっちゃだと思うので本当に初心者用に作られているんだなと早めの段階で実感してしまった。

今回のこのコースではGoogle Chromeを使っていくらしいです。

正式名称打つのがめんどくさいので以下Google Chromeのことはクロームと記します。笑

 

クロームのダウンロード方法から説明がありましたが私はすでにダウンロード済みなので飛ばしました。(WindowsとMac両方でのダウンロード手順が載ってた。優しい。)

 

そしていよいよプログラミング体験!

 

言語はJavaScriptの模様。Consoleを使ってプログラミングを実行していきます!

とりあえず資料に書かれている通りコンソールに「alert(25+25);」と入力。

 

 

Enterを押して実行!

 

 

 

おぉ!「50」と表示されました。

これがプログラミングの第一歩となるそうです。

割とこれだけでもプログラミングした感が味わえる。

01の内容はここで終わりなのですが、下の方に練習問題らしきものもあって素晴らしい。

習った内容をすぐ復習って感じですね。

 

それでは続いて「02.はじめてのHTML」に行ってみます!この回を終了するとHTMLのWebページが作れるようになるそうです。

まず初めに簡単にHTMLの説明をして、HTMLを書くための便利なソフトウェアの紹介をしてくれました。

 

 

ここで紹介されたのが「Visual Studio Code」

エディタと呼ばれるソフトウェアなのですが、私は初めて使うエディタでした。

なので初めて使うエディタにわくわく状態o(-ω-o)(o-ω-)o

ここでもVS Codeのダウンロード手順から記載されているから助かる…。

手順に従って実際ダウンロードしてみます。

 

ダウンロードが終わるといざ起動!

 

 

それっぽい画面が出てきます。

いよいよプログラミングが始まる感じがしてきます|’∀’q)。o(ドキドキ)

手順に従ってどんどん進めます。

ファイルを作って、保存して、HTMLを書く準備が整ったら

いざ!HTMLを書いていきます。

まずは「html:5」と入力してTabキーをクリック!

 

 

すると…

 

 

オオーw(*゚o゚*)w

 

自動的にHTMLファイルのひな形が入力されて今日1の喜び…!

Terapadやsublimeでべた打ちしてた自分はなんだったのか…

VS codeのEmmetという機能らしいです。便利すぎる。これ誰でもできるんじゃね?

エディタの知らなさを痛感し落ち込みながらもどんどん進めていきます。

ひな形で書かれたプログラムの説明も1から記載されているので理解できないなんてことはないだろうと思いました。

初心者にとってはうれしい説明ばかりですね。

今度はひな形を使用して色々編集してみます。

指示に従ってプログラムを編集していきます■_ヾ(・・ ) カタカタ

 

 

できたら保存してHTMLを表示します。

 

 

お!上手く表示ができました。

これでとりあえずHTMLが書けるようになりました!

 

最後にHTMLのしくみについて記されていました。入れ子構造についてもイラストで説明されていてわかりやすい!ここでも一番下に練習問題がありました。ありがたい。

 

どんどん進みます。

次は「03.さまざまなHTMLタグ」です。

今回この回で習ったタグは以下の6種類

・hタグ

・pタグ

・aタグ

・imgタグ

・ulタグ

・tableタグ

 

資料に従ってガシガシHTMLをカキカキ。

タグの説明も1つ1つしっかり書いてあるので相変わらず優しさが身に沁みます。

 

この回で一番おぉ!となったのはtableタグの説明のところ!

「table>(tr>th*)2+(tr>td*2)*6」

という呪文のような文字列を入力してtabキーを押すと自動的にテーブルが入力されるんです。これも最初に出てきた「html:5」と一緒でEmmetと呼ばれるVS codeの機能。驚き。Saasみたいなものなのかと思いながら、便利だけど使いこなすのにはもう少し時間がかかるなと思いました。使いこなせれば効率よくHTML書いていけそう…。

 

さぁ!どんどん行きます!

次の回でHTMLの回は終了!気合い入れていきます٩( ╹▿╹ )۶

「04.HTMLで作る自己紹介ページ」

この回ではYouTubeなどと連携した自己紹介のページを自分で作れるようになるらしいです。楽しそう。

 

まず最初はどのようなページにするかの構想を練るところから。

今回は上から

・アイコンの画像

・ハンドルネーム

・私の情報

・年齢

・性別

・都道府県

・趣味

・SNSへのリンク集

・好きな動画

が表示されるように作っていくらしい。

 

とりあえず手順に従って書いていこー!ということで黙々と書いていきます。

表示したい項目別に丁寧な説明とサンプルコードがあるので迷うことなく書いていける。

そして完成したソースコードがコチラ!

どん”Σ⊂(☉ω☉∩)

 

 

おぉぉぉぉ!それっぽい…!

 

ここで無駄な画像を一枚・・・

 

 

話を戻しまして、、、

 

かけてる!プログラミング出来ちゃってるよ!

という感覚になるぐらいの量を書きましたね。

Tableタグやulタグなどを使ったのでEmmet機能の練習もここでできました。

どんどん書き方わかってきたヽ( ゚∀゚)ノわーい♪

ということで無事HTMLの回が終了しました。

今回はキリがいいのでとりあえずここまで。

次からJavaScriptを学ぶ回にはいっていきます!

 

とりあえず、初めてN予備校を体験してみて思ったことは…

無料体験版なのに内容がすごく充実している!

圧倒的に初心者に優しい!

という2点でした。

 

内容に関しては基礎の基礎から教えてくれるので本当に初心者でもつっかかることなく資料を進めていくことができるのではないかと。

ダウンロード手順からあるのは助かりますね…。

 

まだ序盤ですが挫折することなく続けていけそう!と思ったN予備校のプログラミングコースでした。

また次回「JavaScriptの回」でお会いしましょ~ヾ(´・ω・`)ノ”

 

非対応ブラウザ

申し訳ございません。当サイトではご利用のブラウザは非対応となっております。
下記のリンクより最新のブラウザをインストールしてご覧ください。