使って簡単なアプリを作るJavaScriptExpressNode.jsmongodb初心者向け投稿日:2018-12-26最終更新:2018-12-26クロス元の投稿をみる(https://qiita.com/ato...)初めに私のプログラムの先生は、dotinstall先生なのですが、この先生のページには初心者向けとしていろいろなツールの紹介がされていますが初心者向けと謳っていますが、結構マニアックなものも紹介されていたりしますが、そこで勉強している生徒として、これを組み合わせれば簡単なアプリができるはず!とは想像できますが、組み合わせるとなると急に難易度が上がります。組み合わせに挑戦して、なんとか形になったのでそれをアウトプットして共有したいと思います。組み合わせて出来上がっていますので、dotinstall先生のエッセンスが7割くらい入っています。(笑)基礎勉強は正直面白くないのです。それは今勉強していることがどう使えるのかわからないからです。使って、形にしていきたいと思います。最終的に、完成形をherokuにUpして、webアプリにしたいと思います。選んだ簡単なアプリは、最初のほうに学ぶおみくじアプリです。これはボタンをクリックするとおみくじを引けるという簡単なものですが、これを自分なりに改造していきたいと思います。DEMO記事の投稿は、複数回に分けて段階的にUpしたいと思います。いっぺんに完成形を作ってしまうと、混ざってしまって説明がしにくので、フロントエンド側を最初に作り、サーバーサイト側にデータを置き、そしてデータベース側にデータを置くと段階を踏んでいきたいと思います。記事の投稿は、基本的にQrunchにUpして、Qiitaには初回のみクロス投稿にしたいと思いますので、Qrunch側にも足を運んでいただけるとうれしいです。骨組みを作る必要なツールですがこの記事では、インストール方法等は説明しませんので、各自で検索して入れてみてください。私の環境は、Macに各ツールをインストールしていますが、windowsの方は読み替えて見てもらえればと思います。ツールのライブラリは基本近ければ問題ないとおもいますが、JSは比較的あたらしいコードを使用しますので、node.jsはv10以上を使用してください。骨組みを作っていきます。インストールできます。適当なディレクトリでアプリを作って行きます。画面が表示されれば問題なく動いています。フォルダー内とviewフォルダー内です。開発を行う前に、若干設定を変えます。javascriptsフォルダー内に、HTML制御用の,main.jsを作り,style.sass形式は一般的に少ないので、style.scssにリネームをします。リネームに伴ってapp.jsも設定を変えておきます。trueからfalseに変えておきます。これで、初期設定は完了です。index.pugとstyle.scssを作って行きます。ディレクトリツリーを再度Upしておきます。expressを起動してみます。ブラウザーのデバックコンソールでクリックしたときログが流れていることを確認してください。今日の運勢がボタンになっていますので、これをクリックしたら、今日の運勢が出るように実装します。クリックして、今日の運勢が占えたら完成です。これで、フロントエンド側はほぼ完成ですがフロントエンドですべて作ってしまうと,ブラウザーのデベロッパーツールでズルができてしまいます。sをすると、大吉しか出なくなってしまいます。記述していきたいと思います。あとコードを書き換える度に、expressを再起動するのは、面倒なので再起動用のツールをインストールしたほうがいいです。node-dev辺りかと思います。インストールできます。これで、コードを書き換えると、expressの再起動を自動的にしてくれます。あと次回の記事は、QrunchにUp予定ですので、Qrunch側もよろしくおねがいします。ここまでのコードについてコードは、githubにもupしていますので、うまく動かない方は覗いてみてください。https://github.com/atoris1192/omikujiExpress2ダウンロードの仕方もUPしておきます。コミットは、step1.0です。resetで現時点に戻しています。してもらえれば、最新のコードになっているはずです。Qrunch.netサーバー提供フィードバックを送信する。