どうも、ちの(@antiknownins)です。

何か作ってみたいなぁ、でもCとかJavaで何か作るよりブラウザ上で動く

 

RubyとかJavascriptで何か作りたいなぁ。

 

ということで、今回はJavascriptで簡単なメモ帳的なのを作ってみました。

人気記事セレクション

1. 【編入】筑波大学 情報学群 情報科学類に合格しました。対策期間や参考書など....
2. 2回目のTOEICで880点取れたので勉強法や使った参考書をうんぬんかんぬん
3. 【保存版】高額報酬の治験アルバイトについてまとめたみた

 

不満

 

最近、メモを取ることが多くなったのですがメモ帳を開いたり

検索タブに戻ったりするのが面倒だったのでなんか便利なものがあったらいいなぁと思ってました。

例えば、その日に気になったことのメモをしていると

 

f:id:michinoins:20180721162155p:plain

こんな風になってしまい、いちいち新しいタブを開かなければなりません。

知らない言葉があって検索しまくっていると

 

f:id:michinoins:20180721162235p:plain

こんな風になり、「あれ、さっき調べた単語はどこだっけ..」

と調べなおす必要も出てきます。

というわけで、メモ帳というか

自分が直近で調べた単語とそれの簡単な意味をパッと確認できるページを作ってみようということになりました。

 

要件定義

 

・メモと簡単な内容の入力

・それを表示する

・ユーザーの操作を減らしたいのでメモの位置は確定(ドラッグ機能なし)

・一定数を超えたらサイドに溢れたメモを小さく入れる

 

とりあえず、これくらいを実装できるようにしました。

ペーパープロトタイピング

簡単なツール作成でもしっかり手順を踏みました。

 

f:id:michinoins:20180721163942j:plain

先に言っておくと、右のカレンダー部、左のクリックによるcontent表示がまだできていません。

ちょっと詰んで、疲れたので息抜きで記事を書きました。

実装

 

実装に至って

え?変数宣言いらないの?

から始まり、getElementByIdやcreateElement,とりあえず初心者向けのサイトをサーフィンぐしまくってそれっぽく実装しました。

デモ

 

ローカル環境でデモをやりました。

フォームに入力をして"Boost"をクリックします。

 

f:id:michinoins:20180721172123p:plain

すると、メモと内容が表示されます。

f:id:michinoins:20180721172521p:plain

このままメモを増やしていくと、グレー部分がメモでいっぱいになります。

f:id:michinoins:20180721172604p:plain

この状態でメモを追加すると左のエメラルド色のコーナーに"メモ"のみが

表示されます。

このメモをクリックすると内容を表示するようにしたいのですが、うまくできません.

f:id:michinoins:20180721172703p:plain

そのまま進めていき、エメラルドコーナーもいっぱいになるとこれ以上メモができないという表示が出ます。

 

 

f:id:michinoins:20180721172739p:plain

デモはこんな感じでした。

 

感想

 

昨日は極めてシンプルなものばかりですが

「おお、自分で作れた..」

という感覚を得られるので、完成度の良しあしにかかわらず何か作ってみるのは

モチベーションにも自信にも経験にもつながるので良いと思いました。

もっと理解を深めるためにもう少しprogateとかやってみようと思います。

 

今後増やしたい機能

 

・メモの編集機能

・日ごとのメモをデータベースに保存して見られるようにする

・デザインをもう少しましにする

・レスポンシブに対応させたい

 

htmlやcssよりjsを書く量が全然多いなぁと感じました。

@js経験の豊富な方

 

Javascriptを勉強するおすすめの参考書ありましたら教えてくださいm(__)m

 



人気記事セレクション

1. 月々の奨学金返済をブログ収入で賄えるようになったので、ブログのススメをする
2. 学生時代に遊んどけ論を本当に信じたらやばいぞ大学生!!
3. 人の話を聞いて一発で理解できない理由を考えてみた。
4. Amazon プライムとPrime Studentがガチでメリットだらけ。【破格の月額159円】無料お試しもできる!
5. TOEIC860点の人間が英語力がどれくらいなのか調べてみた。診断サイトと言えば...

おすすめの記事
SponsoredLink