【個人開発】Vueとajaxを使用したWebサービスを作ってみた

3507 ワード
Webサービス JavaScript Ajax PHP Vue.js PHP テキストリンク

はじめまして　きゃっぷ@capgame_です。
ガチャのようなサービスを作るためにVueや非同期通信について学んだので、そのことについて書いていきます。

作ったもの

こんな感じで、ランダムで(投稿された)言葉を組み合わせて、文章を作れるサービスです。
現時点はで100words以上投稿されています。

技術

メイン部分 : JavaScript

言葉を組み合わせて文章を作るってのは

main.js
    console.log(["朝","昼","夜"][parseInt(Math.random() * 3)] + ["佐藤が","田中が","鈴木が"][parseInt(Math.random() * 3)] + ["叫んだ","泣いた","笑った"][parseInt(Math.random() * 3)])

みたいなコードで書くことができ、入門書のサンプルによく使われるほどの簡単なプログラムです。

これに、jQueryの$.get()で言葉を取得しています。

投稿部分 : jQuery

こちらもjQueryの $.get() を使って言葉を投稿しています。

そして、データベースは使っていません。
phpのfile_put_contents()及びfile_get_contents()を使ってファイルでセーブしています。
便利ですがちゃんと . とか / のエスケープは行いましょう。

CSS : SCSS

SCSSを使って書いてみました。
ヘッダー部分とか入れ子になっていると分かりやすいのでかなり書きやすかったです。
SCSS布教活動したいです。

最後に

今までかたくなにライブラリを使わなかったのを後悔するくらいVueで要素いじるのが楽でした。
今回のサイトでは、v-modelとv-bindとv-onくらいしか使ってないので、もっといろいろ学んでみたいと思いました。

あとこのサイトに単語たくさん追加してください🙏