AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

Baby Engineerはつかまり立ちをした。

Pocket

Pocket

ひよっこエンジニア、ケイティのエンジニア成長記、2回目です。今回はローカルストレージを使ったメモ帳をJavaScriptで作成してみました!今回も本文・日本語訳ともケイティ本人が書いています(日本語は少しだけブログ担当が直してますが)

Fall is by far my favorite season; mainly for all the holidays it holds: Halloween, Thanksgiving, and Christmas. How was your Halloween?
Even if you don’t celebrate this holiday, it’s still entertaining to see all the costumes. What do you think of mine? (You could only grab this mask for a limited time at Tokyu Hands during Halloween.)
秋は私の断然お気に入りの季節です。主に秋には色々行事があります:ハロウィーンや勤労感謝の日やクリスマス。皆さんのハロウィーンはいかがでしたか? ハロウィンを祝わないとしても、誰かが仮装するのを見るのは楽しいです!私の仮装はいかがですか?(このマスクはハロウィンの間、東急ハンズでゲットできたものです!w )

IMG_4107

I have been busy lately with learning how to use Javascript with a little Local Storage thrown in. Two other coworkers and I participated in a class called “Javascript for REAL.” Funnily enough, after completing this course, I believe I have a better grasp of Unicage.
最近は、Javascriptでのローカルストレージの使い方を学ぶことに忙しかったです。私ともう二人同僚と一緒に二ヶ月半の間 「ほんきでJavaScript」 の講座に参加させて頂きました。おもしろいことに、この講座の後ではユ二ケージを前よりもよく把握できたと信じています。

For this class we created our own memo pad from what we learned in class. It was super challenging, and I could not do most of it on my own. My team leader likes to grin and say that he felt like he passed the course even though he didn’t officially take it.
このクラスでは、講座で学ぶ内容を使って自分のメモ帳を作成します。このプロジェクトはとてもやりがいがあり、一人ではほとんどできませんでした。(復習を手伝ってもらったので)私のチームリーダーは「ぼくは講座受けてないけど、これだけやればきっと受けたようなものだね!」とにやりとして言っています。

My memo pad is quite simple; the reason for that is because I wanted to understand how to properly use local storage and see how everything is supposed to flow together.
私のメモ帳はまったく単純なものですが、わざとそう作成しました。理由は、どのようにローカルストレージをキチンと使用して、どのように全体が一緒に流れるべきかを理解したかったからです。

Although my goals have altered a little from what I originally set out to do, I achieved most of them which I’m pleased about.
今回発表するものは、そもそもの目標設定からは少し変更されたけれども、ねらいはほとんど達成したので私は喜びました。

I created two input fields-one for the title and one for the text-which gave me some trouble.
私はtitleとtextの2つのinputフィールドを作成しましたが、それらによっていくつかトラブルが起きました。

At first I had all the code crowded together, but I have since learned it’s better to break it apart into smaller chunks.
最初は全てのコードを一緒に組み込んでいましたが、そのとき、小さいまとまりに分けることが良いとまなびました。

The priority button uses the toggleClass API. I want to find a more practical use for it, but for right now that’s all it does.
重要度ボタンは、toggleClass API機能を使用します。今はそれで終わりですが、私はもっと実践的な使用法を見つけたいです。

If we decide to edit it, the information is pulled into these two hidden input text boxes. Here we can edit and save the changes back to the selected memo. Even if we have multiple memos it always saves to the original selected memo. I’m currently looking into getting the delete button to work the same way.
もしメモを編集しようとするなら、情報は2つの非表示にしたinput textにひっぱられます。ここで選択されたメモに対して、編集、差分の保存ができます。たとえ複数のメモが合っても、オリジナルの選択されたメモに対して保存ができます。削除ボタンも同様に動く方法を探しています。

 

First we input some words, and press add memo where it is automatically saved to Local Storage
最初に、input内に何か言葉を記入し、メモ追加ボタンを押します。それはローカルストレージには自動保存されています。

Currently it only saves the top most memo, but when I incorporate the auto save with numbers perhaps that will change.
現在は一番上のメモのみが保存できますが、私が自動保存機能と数字等を組み込みことができれば、おそらく変わると思います。

Local Storage is really useful, so get out there and start using it if you aren’t already!
ローカルストレージとは本当に便利なものなので、まだ 使ったことがない人は早速使ってみてね !

Pocket

投稿者:

Katherine Muirhead

まいどっ^^ アメリカのテネシー州都出身で現在東京に住んでいます。日本に居住歴は5年目です。英会話講師、セールス、接客業務として働いておりましたがエンジニアになる準備していると思いたくなります。2015年3月入社し、その後にbaby engineerにぴったり嵌まっている。幸せ~★