yuri memo

コーディングとかのメモ帳

JavaScriptでToDoアプリを作る (1)

f:id:yurixxx8:20170607232026j:plain
最近Todoアプリを作るのにはまって(?)ます。
写経するなら絶対ToDoって感じで。実用的だもん。
だいぶ前にVue.jsで書いたり最近はReact.jsで書いたりもしたのですが、いずれにしてもよくわからないので
もうとりあえず素のJSで書こうよって思い、完成するまで書き続けるメモです。
今だったらVue.jsちょっと分かるかもしれないとか思ったけどひとまず置いとこ。

実装したい機能(今のところ)

・登録した日時を表示
・終わったToDoにチェックできる
・削除ボタン

今回やったこと

・追加されたtodoの値を取得してtodoItemとする
todoItemを配列todoItemsに追加していく
・追加されたtodoをli要素として#todoListに表示させる

とりあえず、思いつく範囲で単純なのを書きましたが後から絶対変わりますね・・。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" onClick="submitItem();">Add</button>
  </div>
  <ul id="todoList"></ul>
  <script src="js/todo.js"></script>
</body>
</html>
function submitItem() {
  var todoItems = [];
  var todoItem = document.getElementById('item').value;
  todoItems.push(todoItem);
  for (var i =0; i < todoItems.length; i++) {
    var li = document.createElement('li');
    li.textContent = todoItems[i]
    document.getElementById('todoList').appendChild(li);
  }
}

所感 & 次回

document.getElementById('item').value;
値を取得するパターンがいくつかあって少し迷いました。
nameを使って取得するパターンもありましたが、とりあえずidを使うことに。
今はinputの中身が空でもなんでも通っちゃうので次回対応したいですね。

ストレングス・ファインダーをやってみました

f:id:yurixxx8:20170424214023j:plain

ストレングス・ファインダーは
34の強みの中から、5つ自分の強みを教えてくれる自己分析みたいなやつです。

わたしはこの5つでした。

  • 規律性 Discipline
  • 個別化 Individualization
  • 調和性 Harmony
  • 内省 Intellection
  • 分析思考 Analytical
続きを読む

anyenvを使ってNode.jsのバージョン管理をすることにした

f:id:yurixxx8:20170422140054p:plain

MBPがきた時にnodebrewやらgulpやらもろもろ環境構築したのですが
教えてもらいつつ記事見ながらやったくせに全く記憶に残っておらず、、、
ちょっとやばいと思って環境構築やりなおしたい!って思ってました。
その時に「anyenvいいよ〜」と教えていただいたのでメモです。

ちなみに、anyenvとは複数のバージョンをインストール&管理できる賢い子らしいです。
Node.jsの他にもRubyPHPPythonなども管理できます。

インストール

% git clone https://github.com/riywo/anyenv ~/.anyenv

PATHを通す

% echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(anyenv init - zsh)"' >> ~/.zshrc

シェルを再起動してanyenvの設定を反映させる

% exec $SHELL -l

確認する

% anyenv

anyenv-updateのインストール

anyenvやrbenvのpluginsの更新などをしやすくするプラグインを作った - @znz blog

% mkdir -p $(anyenv root)/plugins
% git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
% anyenv update

anyenv-gitのインストール

anyenvでGitのコマンドを実行できるようにするためのプラグイン
https://github.com/znz/anyenv-git

% git clone https://github.com/znz/anyenv-git.git $(anyenv root)/plugins/anyenv-git

ndenvのインストール

% anyenv install ndenv
% exec $SHELL -l
% ndenv -v
  ndenv 0.4.0-4-ga339097

インストール可能なバージョンの確認

% ndenv install -l

Node.jsのインストール

% ndenv install 6.10.1

グローバルで使用するバージョン

% ndenv global 6.10.1

インストールされているバージョンの一覧を確認

% anyenv versions
ndenv:
  system
* 6.10.1 (set by /Users/***/.anyenv/envs/ndenv/version)
  7.8.0


こんなこともできるみたいです(*´-`)
qiita.com