文系エンジニアの学習日記

プログラミング未経験からIT業界に飛び込んだエンジニアの勉強日記

Node.jsチュートリアル完了の件

前回の更新からだいぶ時間がたってしまいました。
今回の記事は、Node.jsの学習についてです。
前回の学習日記では、Hello!! World!!を出すのに悪戦苦闘してごねごね書いていましたが、今回はどうなんでしょう?

 

 

●超簡単掲示板を作ろう(実際に完成した)

これです。
・実際は、サンプルコードがあったため、それを丸ごと移しただけなんですけどね......

f:id:yume100kairi:20190106155519p:plain

初期表示

f:id:yume100kairi:20190106155617p:plain

IDを入力した後の画面

f:id:yume100kairi:20190106155717p:plain

内容を入力した後の画面
 
・実際どんな風に動いているの?


Node.jsの実行コマンドnode app.jsを入力
webブラウザ上でhttp://localhost:3000/を入力
◆初期画面◆
画面上でIDを入力(今回のアプリでは、なんでも入力できます。)
フォームに何か項目を入力して、送信ボタンを押下
◆内容を入力した後の画面◆
IDと入力した中身が表示されました。

●もっとこれ足すといいと思ったもの


もっと掲示板っぽくするならこれらに何か足したい。
何を足そう?

下記に挙げてみる
・ログアウト機能
・見た目
・入力項目の追加
・画像も突っ込める?
・複数人がログインできるように!!

◎実際に何を使うとできるかな?
・ログアウト機能
・IDを変更するだけなら、ログイン画面に手入力でアクセスすることで、新しいIDでログインできます。
初期表示の時にIDを入力して、それがそのままデータファイルに保存されている状態になっている。
そのため、出力データとして、取得して、表示しているだけという状態です。
だから、正確なログイン、ログアウトという概念になってないです。
とすると、現在の仕組みでは、ログインページに遷移するためのボタンを用意することで、ログインページにアクセスできそうです。

・見た目
見た目は、スタイルシートで決めています。
スタイルシートの中身を変えることで、すぐに変えられそうです。これをするツールはまあまあそろっています。
(例)
・ Bootstrap4
・ Foundation
・ Materialize
他にもたくさん種類はあります。
(個人的にいじってみたいジャンルの一つ、始めたら、底なし沼なんだろうな多分)

・入力項目の追加
これは、ejs内のフォームに追加して、app.jsのデータ受信処理に値を追加すればできる

・画像も突っ込める?
画像を突っ込むには、ejsファイル内に画像を読み込むためのHTMLコードを入力して、データとして、画像を保管できるようにしておくでできそうです。
データとして画像を保存するには?というのが課題。ただ、次の次の章でデータベースの扱い方に関する章があるから、そこで、画像の取扱いについての理解を深められそうです。

・複数人がログインできるように!!
上記に書いた通りで、データ上は複数人間がログインすることは可能です。
だから、この後の話になってくるかな。
だから、これについては、一旦閑話休題


チュートリアル完了の要因!?


結論から言ってしまうとこの2つかと思っています。
・基本の理解ができたこと
・タスク管理ができたこと

これらについて、詳しいことを書いたのですが結構な量になってしまいました......
でも、書いてしまいます。←結局書いてしまった人
完了した理由について考えた際に思い付いたこともいろいろ混じっています。

・基本の理解ができたこと


前回の記事を書いたとき、ルーティンの概念が全く分からなかった。
現在の理解度で、ルーティンについて定義をすると以下のようになるかと
・どのアドレスにアクセスしたら、どういうコンテンツを出力するかをプログラム上に示すこと。
Node.jsは、サーバーサイドのjavaScriptであると以前書いたと思います。もっと正確にいうと、画面側も、実行環境側もJavaScriptで作れるという意味です。
そのため、アプリを実行するために必要なプログラムがJavaScriptで実装されています。
アプリを実行するを言い換えると、アプリ画面に入力した内容を何かしら加工して、入力した人が求めている形に再度表示するということでしょう。
では、これを実現するためには何が必要でしょう?
簡単な図で示してみます。

●webアプリが動く仕組み
・入力:画面に何か入力して、その内容をサーバーに送る。

・処理 サーバーが入力を受け取り、それに応じた処理を行う。

・出力 処理の結果をサーバーがクライアントに送り表示する

簡単に説明すると上記の通りです。

もうちょっとわかりやすく、詳しく書かれた本もあります。ターゲットにしているのは、職業としてプログラミングをやっている人かな?

 

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

 

 

そもそも、webアプリがどのように動くのかについてあまりにも無知すぎでしたね......
基本がいかに大事かと感じました。

・タスク管理ができたこと


webアプリを一つ完成させるには覚えることがたくさんあります。
これらをすべて理解するためには、勉強するための時間も相当量あります。多くの内容を覚えるためには、計画が必要になってきます。
試験勉強をするにあたって、勉強計画を立てたことがある人は多いと思いますが、これに近いです。
1ヶ月、1週間、1日で何をするか、どこまでやるのか、行動できるまで、具体的に書く。そして、終わったことは終わったとわかるようにしておく、
よく言われていることですが、これをやることで、たくさんのやることをやりきることができるのでしょう。
どういう順番で何をやっていくとよいのかは多くの学習サイトで書かれていますのでここでは割愛。
下に、これはいいかも!!と思ったサイトを載せておきます。

 

www.sejuku.net

webアプリ開発で検索すると結構たくさんの記事が出てきますが、この記事は何するの?にフォーカスが当たっている記事だと思います。


●次は

 

 

ひとまず、Node.jsで簡単なアプリを作成するという段階まではきました。但し、これは、まだチュートリアルが終わった段階の状態です。
この後、フレームワークだったり、データベースだったり、もっと本格的な形にするために、勉強することがあります。
だから、次回の更新では、もう少し難しい内容に入ってくるかと思います。今以上に文章として成り立たなくなる可能性大。