f@ctor

JavaScript関連のことを調べてみた2020年01月03日

JavaScript関連のことを調べてみた2020年01月03日
目次

React/Next.jsアプリケーションを作成し、AWS EC2を使って本番環境にデプロイするまで

# 対象
* Next.js 等、Node.js で動かすアプリをローカル環境で作成することはできるが、それを本番環境で動かす方法と仕組みがわからない人
* Heroku や Zeit Now を使うと簡単にリリースできるが、その仕組がさっぱりわかっていない人

# この記事の存在意義
初心者が掲題のことをやろうと思ったときに、全体感を把握できる記事が見当たらなかったので、こういう記事があっても良いかなと思った。

# 流れ
以下のような手順で進める。
1. ローカル環境で動く Next.js を用いたサンプルアプリの作成
2. EC2 インスタンスの作成
3. EC2 インスタンス上でのサンプルアプリの起動&接続

# 1. ローカル環境で動く Next.js を用いたサンプルアプリの作成

* 事前に npm をインストール

“`bash
npm install -g npm
“`

* ↓の公式チュートリアルの Getting Started の部分を進める。
* https://nextjs.org/learn/basics/getting-started/set

元記事を表示

[連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜2章〜 簡単なページ作ってみる

## 概要
– とりあえず簡単なページ作ってみる
– キャラ画像の表示したり、入力キーに応じて表示内容変えるとかはこの後
– 以下3ステップ
– その１ 〜html作ってページ開いてみるよの巻〜
– その２ 〜jsも組み込んでみるよの巻〜
– その３ 〜フレーム処理を組み込むよの巻〜

## 補足事項
– 各ステップごとに実際のソースをQiita上に記載しています。コピペしてファイル作れば動かして確認できるはずです。
– 上記と同じくソースの実態を保存しているgitのリポジトリも記載しています。
リンクにアクセスして実際のソースをダウンロードすることができます。
ぜひダウンロードして動かしながら試してみてください！

## その１ 〜html作ってページ開いてみるよの巻〜
### ゴール
– ゲームを動かす大元のwebページを作って、Chromeなどのブラウで開けることを確認する

### 前提
– 主にwebページは以下の要素から成り立ちます
– `html` : 何を表示するか (どんな文字や画像を表示するかなど)
– `css` :

元記事を表示

連絡先の電話番号やメールアドレスを並び替える(Google Apps Scriptで)

# やること: 連絡先の電話番号やメールアドレスの並び替え
Google Apps Scriptで連絡先の電話番号やメールアドレスの並び替えをしてみたいと思います。
**連絡先(人)の並び替えではなくて**、1人の連絡先の中に複数の電話番号(携帯、家電、職場…)があったり、複数のメールアドレス(キャリア、Gmail、Yahoo、会社…)があったりするわけですが、これらの電話番号やメールアドレスを一定のルールのもと、並び替えようという試みです。

# 背景
何故かGoogle連絡先には電話番号やメールアドレスの項目順を入れ替える機能がないんですよね…加えて、僕が使っているMacOSの連絡先やiOSの連絡先にもそういった機能がなくて。サードパーティのアプリも探してみたものの、探し方が悪いのかヒットしなくて…

皆さん、あまり項目の順序なんて気にされないんですかね?
よく使う電話番号がよく使わない番号より下にあったら不便だと思うのですが。
手作業で直したり、エクスポート→Excelとかで加工→インポートしたりとかされているんでしょうか。

僕の場合、[別の投稿](https://qiita.

元記事を表示

[連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜1章〜 準備する

## 概要
– javascriptでスーパーマリオ的なゲームを作ります
– プログラミング未経験者またはちょっとかじったことがある人向けです
– 実際に動かしながら楽しくゲームを作っていけるような記事としたいです
– 特に環境の準備は不要で、メモ帳があればOK
– 後半ではリファクタしながら、こういう風に書いたら読みやすいよねまでやりたい

## 筆者紹介
– 大学では建築を学ぶ
– 就職先はなぜかIT (主にjava、サーバーサイド、自社のフレームワークを使用)
– ITベンチャーに転職する (主にjavascript、フロント & サーバーサイド、AWSを使用)
– そして今

## 背景
– 職場で初学者にパッと進められるjavascriptの参考ページがなかったから
– 楽しみながら、実際に動かしながら、初期ハードルが低く学べるといいなという思いがあったから
– 過去にスーパーマリオのゲームを実際に作ってみて楽しく学習した経験があった
– 将来の自分の子供の教材を自分で作ってみたかった (使うかは不明)
– 書いてみたかったから

## 本記事の目的
– 以下を達成すること

元記事を表示