webアプリ初心者がTodo管理アプリを作りました
はい、ご無沙汰しています。
Todo管理アプリを作りました。とはいっても、勉強のためです。まだまだ実用に耐えられるものではないです。課題山積み。
Name/Passwordはguest/guestでログインできます。
採用した技術は以下の通りです。
- Ruby on Rails
- Bootstrap
- heroku
Ruby on Railsでwebアプリに最低限必要な機能を一通り実装しました。ログイン・ログアウト機能、ユーザ登録機能、todoの追加・削除機能、ベージネイション(kaminari使用)機能。
Bootstrapで見た目を整えました。しかし、スマホから開いてもレスポンシブ対応されないです。PCから開いてもウィンドウを小さくすると想定通りに画面がレスポンシブに動作してくれるんですが。ここ課題です。
herokuを使用しました。簡単に公開できるので便利です。
もう少しやりたいことがあるのでぼちぼち改良していくつもりです。
某転職サイトの転職セミナーに行ってきたのでメモ
これはメモです。
Rubiestへの転職、がメインのテーマでした。
- Web未経験から転職した人がいてホッとした
- その人にいろいろ話聞いた
- 転職前にweb開発の勉強した、主にRubyを半年ほど
- 転職活動するまでにどのくらい勉強したらいいか不安になるよね
- とりあえず面接受けて自分の現在地を把握したら
- 面接では作ったアプリをgithubに上げて見てもらった
- アプリ作る課題あった、チャットアプリ
- とはいえ、面接でメインに話したのは、前職でのスキルがこのように活かせますよ、ということ
- Rubyについては今はこれくらいですが、あとは入って頑張ります、って感じ
- とりあえず形にすることが大事、と
- 転職するには若い方がいいよね、30前には、ポテンシャル採用あるから
- 英語、大事だよね
以上、とりあえずのメモです
3分でBootstrapを使ってみた
先日Angular JSで作ったtodoListにBootstrapを使ってみました。
先日作ったtodoListはこんな感じです。
下部のテキストエリアと追加ボタンに対してBootstrapを適用しようと思います。
Bootstrapを適用したtodoListはこんな感じです。
テキストエリアと追加ボタンに対してだけなのでこのくらいの変化しかないですが。
とはいえBootstrapを使えば、
簡単に、統一感のある、レスポンシブな、
画面を作成できます。
コードは以下の通りです。
<!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> <title>todoList</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Todo</h1> <div ng-controller="TodoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [<a href="" ng-click="todoList.archive()">archive</a>] <ul> <li ng-repeat="todo in todoList.todos"> <div class="checkbox"> <label> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </label> </div> </li> </ul> <form ng-submit="todoList.addTodo()" class="form-inline"> <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here" class="form-control"> <input type="submit" value="add" class="btn btn-primary"> </form> </div> </div> </body> </html>
formタグに対してclassに値を設定しているだけで簡単に使用できます。以下の通りです。
<form ng-submit="todoList.addTodo()" class="form-inline"> <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here" class="form-control"> <input type="submit" value="add" class="btn btn-primary"> </form>
Bootstrapは公式を見れば大体の使い方はわかるかなあと思います。
英語ですがガンガン読んでいきましょう。
getbootstrap.com
英語に関連して話は変わるのですが、以下のリンクを読んでみて考えました。
d.hatena.ne.jp
やはりプログラミングをやるには英語できた方がいいかなと思います。
もちろん単純に「英語ができればプログラミングできるようになる」とは思いませんが、
できるようになる可能性は大きくなると思います。
ドキュメントの量がどれくらい違うとかはデータがないのでわかりませんが、
公式が英語で書かれているのでそこにダイレクトにアクセスできるかは違いが生まれると思います。
プログラミングに限らず一次情報に接することは一番大事です。
というわけで今回はBootstrapを使ってみました。
まだまだ使いこなしてはいませんがとりあえずアウトプット、
ということでこれくらいの感じでどんどん記事を書いていきたいです。
{{Angular JS Tutorial}} Angular JS でTodoListを作った
Angular JS を始めました。
JavaScript触り始めて3日目くらいですが。
Angular JS とは何か、というところには深く触れません。
私もまだ理解できていないところが多々ありますので、今のところはこれくらいの理解です。
- Googleが作っているオープンソースのJavaScriptフレームワーク
- クライアントでのMVC(Model - View - Controller)モデルを実現できる
- htmlを動的に表示したい時に使うと便利
- なんか流行ってるぽい
まずは公式のTutorialから。
トップページのAdd Some Controlを試してみました。
TodoListの作成をやります。
AngularJS — Superheroic JavaScript MVW Framework
始める前にatomでangularjsのパッケージを入れておきました。
atomから直接パッケージをインストールできました。
GitHubだとここのようです。
GitHub - angular-ui/AngularJS-Atom: An AngularJS package for Github's Atom editor
実装
では始めていきます。
まず、どんなTodoListにするか。
完成イメージはこんな感じです。
必要そうな機能は以下の感じかと。
- todoの一覧を表示する
- todoの総数がわかる
- 完了したtodoの数がわかる
- 完了したtodoをarchiveすることができる（メインのTodoListからOldTodoListへ移動する）
- todoにチェックをつけると、横線が引かれて文字色が変わる（完了したっぽくなる）
- 新しいtodoを追加できる
上記を踏まえてソースを書いていきました。
index.html
<!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> <title>todoList</title> </head> <body> <h1>Todo</h1> <div ng-controller="TodoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [ <a href="" ng-click="todoList.archive()">archive</a>] <ul> <li ng-repeat="todo in todoList.todos"> <label> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </label> </li> </ul> <form ng-submit="todoList.addTodo()"> <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"> <input type="submit" value="add"> </form> </div> </body> </html>
todo.js
angular.module('todoApp', []).controller('TodoListController', function() { var todoList = this; todoList.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false} ]; todoList.addTodo = function() { todoList.todos.push({text:todoList.todoText, done:false}); todoList.todoText = ''; }; todoList.remaining = function() { var count = 0; angular.forEach(todoList.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; todoList.archive = function() { var oldTodos = todoList.todos; todoList.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) todoList.todos.push(todo); }); }; });
todo.css
.done-true { text-decoration: line-through; color: grey; }
感想
JavaScript初心者でAngular js初体験でしたが、そこそこ書きやすいと思いました。
htmlファイルとjsファイルでデータをバインドするところとか直感的で理解しやすかったです。
ただし、少しよくわからないところもあったので後で調べます(ng-controllerを定義するところでのasって何、とか)。
あと、始めるのにハードルが低いところが一番良かったです。
htmlファイルに
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
の１文を加えるだけでAngular jsを利用できるところに感動しました。
こういうフレームワークを使い始めるために環境整えるのが大変で億劫そうだなあ、
と思っていたので拍子抜けしました。私みたいな初心者はハッピーですね。
そんなAngular jsですがAngular js 2が存在するそうです。
speakerdeck.com
こちらのお方のツイートなんかを見ると、どうやら1は覚えにくいことたくさんあるようですね。
Angular2の記法はシンプル。
— 鹿野壮（Takeshi Kano） (@tonkotsuboy_com) 2016年4月22日
Angular1を勉強して苦しかった部分が多くの独自記法(ngClick, ngKeydown, ngKeyup, ...)だったので、とてもありがたいですね。
#html5j #angularjs
今後どうなるかまでは私なんぞにはわかりませんが、できるだけ動向はチェックしたいですね。
Git 始めました
Webエンジニアの世界では使えて当たり前、なGitです。ちなみに私はSVNしか使ったことないです。
まずは定番ドットインストールを一通りやりました。
dotinstall.com
そして、GitHub。こちらも使えて当たり前みたいです。
github.com
ドットインストールにもGitHubの講座はなく、
日本語のチュートリアルでサッとできそうなのが見つけられませんでした。
というわけで公式のチュートリアル。
英語ですが、簡単でわかりやすいので恐れないでください。
10 minute read と書いてますが触りながら読むと15~20分くらいかかりました。
Hello World · GitHub Guides
経験上、多少英語ができるなら中途半端にまとめられた日本語のブログ読むより公式のガイド読んだ方がいい気がします。
