初心者におすすめする
JavaScriptと
アプリケーション開発

山本照久

Software Engineer, Web Developer

Freelancer (現在2社に在籍中)

  • JavaScript(Node.js)を
    　メインにフリーランス歴約6年
  • Ebisu.jsで初心者向けの
    　学習会を開催（約3年〜）
  • Google Home開発の
    　Ebisu Voice Productionを設立

本日の内容

  • なぜJavaScriptを勧めるのか
  • どんなアプリケーション開発ができるのか
  • プログラミング言語と技術の関係
  • カバー範囲（できること）の広さに注目
  • Webアプリ、デスクトップアプリ、スマホアプリなど
  • 注意点
  • JSで開発するために
  • 事前に把握しておいてほしいこと
  • 参考：私の最近の開発スタック紹介

なぜJavaScriptを勧めるのか

プログラミング言語と技術の関係

WEB

プログラミング言語と技術の関係

機械学習、Deep Learningに向いている言語は？

Python：利用者が多い=ライブラリが豊富、知見が多い

ロボット開発に向いている言語は？

C, C++：制御系、対応ライブラリ。（最近はPythonも目立つ？）

Web開発に向いている言語は？

・・・・？

ブラウザ（フロントエンド）側と

サーバ（バックエンド）側を開発する必要がある

例えばブラウザで使うwebアプリの場合・・・

モバイル開発するための基本言語は？

Android: Java, Kotlin  iOS: Objective-C, Swift

Webアプリ開発に着目

ブラウザ（フロントエンド）側は？

→ HTML, CSS,   JavaScript のセットが基本

見た目

処理

サーバ（バックエンド）側は？

→ Java, Perl, C#, Python, PHP, Ruby, or Node.js etc...

サーバで動くJavaScript

フロントとバックで言語を統一できる

その他メリットあるが、他言語でも同じことが言える

（REPL、エコシステム、コミュニティ、普及率、etc...）

覚えなければいけない言語が1つ減ることは学習コストが大きく減るので、初学者にはかなりのメリット

JavaScriptのカバー範囲の広さ

機械学習、Deep Learning

内容

TensorFlow.js

JSライブラリ

Johnny-Five: The JavaScript Robotics & IoT Platform

IoT、ロボット開発

moddable

モバイルアプリ開発

デスクトップアプリ開発

React Native

Electron

他言語

Python

Python

C, C++, C#
Java

Swift ( iOS )

Kotlin ( Android )

Python

C++, C#
Java

JSで /Web|モバイル|デスクトップ/ アプリ開発

  • 一般的なWebサイト、ブログなど
  • ECサイト
  • ソーシャルメディア
  • 業務ツール

DB操作、Web API、ネットワーク通信、etc.

  • プッシュ通知、GPS、カメラ、マイク、スピーカーなど
  • モバイルアプリ（iOS, Android）としてリリース

Webのみの技術だけでいい場合

モバイル特有の機能を扱いたい場合

デスクトップ（PC）アプリとしてほしい場合

  • ユーザー体験がブラウザより良い場合

アプリ例

  • 企業HP, はてなブログ, Ameba, Netflix, etc... 
  • Amazon, 楽天, メルカリ,  etc...
  • Facebook, Twitter, Note, etc...
  • Google Docs/Sheets, etc...

Webアプリ例

モバイルアプリ例

  • Facebook, Instagram, Messenger, etc...

デスクトップアプリ例

  • Slack, Skype, Visual Studio Code, etc...

注意すべき点

  • カバー範囲は広いが、万能ではない
    • 並列処理や処理速度を求めるアプリには
      特性を活かせる言語を選ぼう
    • 例えば機械学習にはPython、のように
      ライブラリなどが豊富な言語がある場合
    • iOS, Android, Windows, Macなど、
      デバイス特有の機能などに依存するアプリの場合
  • できること、選択肢が多い故の悩み
    • フレームワーク、ライブラリ、実行環境などの
      選択や組み合わせの意思決定のコスト
    • 問題が起きた時の解決コスト
      （選択肢が多い＝エラーケースが少ない）

Happy Codingのために（一般論）

  • JavaScriptの持続的学習
    • JSの全てを学んでから開発するのは遅い
    • 他言語を学んで視野を広げてみる
  • 作りたいものを作り始めよう
    • 作りながら学ぼう（学ぶことは多すぎる）
    • 開発環境を整えよう
      • デプロイ環境は最後でも良い
      • エディタ、技術スタック
    • ミニマムな構成を心がけよう
      • ​まずは主要機能を。きれいなデザインは後で。
    • メンターを見つけよう
      • いつでも相談できる
      • コードレビューを受けられる

Happy Coding with JavaScript

  • 手元にJS文法を正しく参照できる物を。MDN でも。
  • 予定する動作環境を正しく把握（可能な記法、apiの把握）
    • サーバー：Node.jsのサポートバージョン
    • ブラウザ：JSやweb apiのサポートバージョン
    • その他：対象ドキュメントを次第
  • NPM（Node Package Manager）の活用
    フレームワークだけではなく、
    再利用可能な機能はライブリとして提供されていることが多い
    webアプリサーバー：Express, Koa, etc.
    フロントエンドフレームワーク：Angular, View, etc.
    FE view向けライブラリ：jQuery, React, etc.
  • エディタとLinterの活用（例：VS Code + ESLint）
    文法チェックなどプログラムを実行せずに、
    静的解析してくれるサポートツール

最近の技術スタック紹介

  • コーディング周り
    • ES2015~ES2018, TypeScript
    • ESLint ( recommended or eslint-config-airbnb )
    • Prettier
    • VSCode (プラグインは上記をサポートするものぐらい)
  • Webアプリ開発, mobile開発, デスクトップアプリ開発周り
    • Google Cloud Platform（GCF, Firestore, etc.）
    • React, React Native(Expo), Electron

最近始めた仕事

  • IoTデバイス（マイコン）のJSでの実装
  • Google IoT Coreとの連携

おわりに

JS開発、学んでみませんか？

meteor-fan.connpass.com

ebisu-js.connpass.com

Ebisu.js : 初心者向けJS全般

Meteor Fan : React等

毎週水曜19:00 ~ 21:00 ギークオフィス恵比寿にて定期的に開催

Ebisu.jsが最近開催できておらずスミマセン・・・

開催テーマなどご意見・ご要望など、お気軽にお知らせください！

Thank You

Made with Slides.com