初心者におすすめする
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

内容

JSライブラリ

IoT、ロボット開発

モバイルアプリ開発

デスクトップアプリ開発

他言語

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開発、学んでみませんか?

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

Meteor Fan : React等

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

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

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

Thank You

Made with Slides.com