プログラミング

JavaScript

Nuxt.jsをdockerで動かしてみる

【動作環境】 macOS 【使用するツール】 Docker Docker Compose 作業ディレクトリを作成 $ mkdir nuxt_app $ cd nuxt_app Dockerfileの作...
プログラミング

Bashコマンドの履歴を積極的に活用したら作業効率が上がった

Bashを使っている時に過去に実行したコマンドをもう一度実行したいことが開発をしているとよくあると思います。数回前のコマンドでしたら、↑↓で十分ですがそれ以上前だと大変です。今回は、履歴を積極的に活用した方法を記事にしました。 コ...
JavaScript

Angular.jsを公式チュートリアルで理解しようとしてみた

AngularはTypeScriptを採用したフレームワークです。変数の型を静的に定義できるので、JavaScript特有の原因がわかりにくいエラーが減らすことが可能で、大規模開発に向いているらしいです。 今回は、Angular.js...
プログラミング

HTML5のfileタグをcssでいけてるデザインに変更してみる

from周りをコーディングする際、毎回HTML5のfileのデフォルトのデザインがダサすぎて、デザインをしたくなります。その度に、fileタグのコーディングの仕方を忘れるので備忘録代わりにメモ。 以下のソースコードにcssをあてて...
Firebase

Firestoreでドキュメントの追加・編集(更新)・検索・削除の方法

Firestoreは、Googleの柔軟でスケーラブルなNoSQLクラウドデータベースです。「オフラインデータアクセスに対応」や「リアルタイムデータ同期」などに加えてデータが非常に簡単に扱いやすくなっています。今回は、Firestoreのド...
JavaScript

Nuxt.js(Vue.js)を使って動的モーダルコンポーネントを実装

今回、動的にモーダル表示するコンポーネントを作りました。「モーダルの状態管理」「親とコンポーネント間のデータの受け渡し」「動的にモーダルの中身を変更する」といった処理が必要で勉強になったので、備忘録代わりに記事にしました。 ※ vue...
プログラミング

GoogleAdsenseのレスポンシブ広告がモバイル表示ではみ出る問題をCSSで解決

GoogleAdsenseのレスポンシブ広告を使用していて、モバイル表示の時に画面幅いっぱいに設定されてしまって困っていました。(PCだと問題なく表示したいdivの中に表示されていた) 他の記事に解決法としてよく公開されている、Ads...
JavaScript

Nuxt v2(nuxt-edge)プロジェクトで始める

Nuxtをv2(nuxt-edge)を使ってみたら、ビルドの処理速度が明らかに早くなっていました。今回は、Nuxt2でのプロジェクトの始め方について紹介します。 nuxtプロジェクトを作成 // vue-cliをインストール ...
PHP

LaravelのmigrateでロリポップMySQLにデータベース構築

前回投稿した、「ロリポップにcomposerをインストールしてLaravel5.5を公開する」の続編です。 ロリポップにLaravelを公開するまでの流れは以下をご覧ください! .envのDBの変更 .en...
PHP

ロリポップにcomposerをインストールしてLaravel5.5を公開する

当ブログでも使っているロリポップで、Laravelで作ったアプリを公開しました。(2018年9月現在開発中)その時の手順を備忘録がわりに記事にします。 【環境】 MacOS Sierra 10.13 ロリポップ ス...
Firebase

Firebase Cloud Storageへの画像アップロードアプリを実装

画像をCloud Storageへアップロードできるwebアプリを作成していて、FirebaseのCloud storageの扱い方がなんとなくわかってきました。今回は、簡単な画像アップロードフォームを備忘録として紹介していきます。 ...
Firebase

Firebase Firestoreを利用したユーザー認証のあるチャットアプリを実装する(2/2)

前回作った、チャットアプリにユーザー認証を追加していきます。 index.htmlの編集 index.htmlにlogin、logoutボタンの追加とfirebase-authのCDNを読み込みを実装していきます。 &...
Firebase

Firebase Firestoreを利用したユーザー認証のあるチャットアプリを実装する(1/2)

最近、firebaseのデータベースサービスであるfirestoreを利用してサービスを作っています。簡単なfirestoreの操作がわかってきたので、アプリをサンプルにメモします。 Firestoreを使用するにあたって Fi...
プログラミング

初心者エンジニアが0ベースでのwebサービス開発を経験して学んだこと

プログラミングを初めて1ヶ月の初心者エンジニアが、インターン先で企画提案から0ベースでのwebサービス開発を経て学んだことを備忘録に記事にします。 開発したプロダクトデータ 採用言語 Vue.js 2.5 PHP 7.2...
プログラミング

WIP(Work in Progress)Pull Requestを使った開発フロー

「WIP(Work in Progress)Pull Requestを使用した開発フロー」とは、ソースコードを書く(編集)前に空のコミットを作り、Pull Requestを投げた状態で開発していく開発フローである。僕のチームで実際に導入して...