ウェブアプリ開発メモ

とか、フレームワークやライブラリが好きではなく全部素のHTML/CSS/JSで書いたけど、開発速度とアプリの質を上げられたらと最近おもいはじめ、ライブラリなどに手を出し始めたのでメモしていく。何かを新しく使うたびに更新する。
僕みたいな、初心者ではないけど難しいことはさっぱりな人向け。

 

ライブラリ/フレームワーク/サービス名 (内容編集日)
簡単な説明
使った経緯や感想
僕のおすすめの参考リンク
という形で書いていく

 

【フロント】

Vue.js (2017.11.12)
JavaScriptフレームワーク
何にでも組み込める感じ。HTMLやJSを書く量を減らせる
ただ、既に開発済みのものをVueに置き換えてくのはちょっと手間かも
入門だるいなーって思ってたけど、普通に入門できた
ちょちょっとHTMLに挿れて、サラッとJSを書けばそんな感じになる
バインドとテンプレート系の機能を主に使う感じになるのかなあ
Vue絡みでエラーを出すと少しデバッグしづらいけど、Vueに限らずライブラリあるあるな気がする。しらんけど
使い込んだらまた編集します
はじめに — Vue.js

Bootstrap (2017.11.10)
言わずと知れた、デザインがそんな感じになるフレームワーク
HTMLだけを書いた後に、少し見栄えを良くする感じで使うのはかなりアリ
基本的にjQuery必須なのがなあーという感じ
資料の数を気にしないなら Pure とかで良い気もする
だるい入門サイトが鬼のように沢山ある
Bootstrap3の使い方 | CSSフレームワーク覚書
とほほのBootstrap入門

BULMA (2017.11.14)
あるある系のCSSフレームワーク
CSS単体で動くし使いやすかった
Font Awesome icons というアイコン集も使ったことなかったけど良かった
公式のドキュメントをざっと見て使いたい部品を組み込んでいけば良いとおもう
Get started with Bulma | Bulma: a modern CSS framework based on Flexbox

Chart.js (2017.11.10)
可もなく不可もないグラフ描画ライブラリ
Bootstrapと見た目の相性が良さげ
必要最低限のコード量が少ないのが良い
以下の比較サイトで一発で気に入って他のは試してない
JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza開発日誌

Moment.js (2017.11.12)
色々と手を焼きがちなJSの時間周りのことが便利にできるライブラリ
ブラウザ毎にDateオブジェクトの挙動が違ったりする部分や、日にちの計算とかが楽にできるようになった
これアプリつくる際にはかなり必須なライブラリなんじゃないか
moment("フォーマット以外の文字列とか")で警告が出るようになってた
Moment.js | Home (公式)
momentで時間データの操作を楽にする - Qiita

Pushnate (2017.11.10)
ページを閉じててもブラウザでプッシュ通知ができるやつ
自分で実装するのはだるそうだったし、内輪のサービスの通知として小規模に使いたかっただけなので導入した
通知は1ヶ月5万件までという制限はあるが、小規模なら問題ないだろう
その後で同じようなものを実装したが、Pushnateはサーバ周りを任せられたりUIがしっかりしてるので扱いやすいと思った
Pushnate|Webプッシュ通知でコンバージョン率を改善 (公式)

Firebase Cloud Messaging (2017.11.11)
同じくページを閉じててもブラウザでプッシュ通知ができるやつ
Pushnate等のサービスとは違い、こちらは実装にサーバサイドも絡んでくる
Pushnateだとできない個別にプッシュ通知がしたくて実装した
以下、自分の実装メモ
ブラウザのプッシュ通知ができるようになった - 作曲や開発や運営のメモ

 

【サーバサイド】

Flask (2017.11.10)
Python軽量なウェブアプリケーションフレームワーク
フロント部分は全部自分で書きたい人に最適
Flaskに乗ってるテンプレートエンジンJinja2もかなり使える
PHPからFlaskに乗り換えたけど、Pythonは色々楽でサーバサイドでの処理が苦じゃなくなった
node.jsやPHPからはFlaskが学習コスト少な目で乗り換えられる
Ruby on RailsからだとDjangoの方がいいんじゃないだろうか。しらんけど
Flaskの触りは
[Python] 軽量WebフレームワークのFlaskに入門(準備、起動、HTML、静的ファイル、GET、POSTなど) - YoheiM .NET
その後まずはJinja2でできることも把握すると良いとおもう
Jinja2メモ - c-bata web
Flaskで実際にウェブアプリを運用するのは前に記事を書いた
Flaskでhttps - 作曲や開発や運営のメモ
 

【そのほか】
CSSテンプレート比較サイト
CSS書きたくなさすぎ問題2017 - DRYな備忘録

 

試す度にメモと比較を追記する。