Javascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き


2021/12/23
2021/12/29

弊社では技術開発活動の中で活用しているナレッジを日々様々なリソースから得て、継続的に勉強を重ねています。

ソフトウェア産業の分野では、常に新しい情報を得るために多方面にアンテナを張って、貪欲に知識をビジネスに取り入れるという姿勢が必要になります。

この記事では、ブログの個人的に気になった&試してみたいJavascript/Typescriptの良質で旬な学習素材をまとめていく内容になっています。

気になる学習教材があれば、リンク先のサイトで是非ともチェックしてみてください。


Javascriptをしっかり学べるおすすめ入門書

まずJavascriptを学ぶ上でコレは読んでおきたいと思う入門書を、著者の独断でいくつかピックアップしていきます。

確かな力が身につくJavaScript「超」入門

合同会社タコスキングダム|蛸壺の技術ブログ

2019年9月頃に第2版として出版されたJavascript初学者向けの定番入門書です。

Javascriptをこれから始める人が読んだり、手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。

良いところ

            
            + プログラミングの参考書でありがちなあえて難解な言葉を避け、
    とにかく丁寧に解説することに徹し、
    なるべく初心者に分かりやすく噛み砕いて説明されている

+ レベルも控えめで、入門書としては初心者にベストマッチな内容

+ ES6(ECMAScript6)をベースに書かれた機能・文法を学べる

+ JQueryの内容も詳しく扱っている
        

悪いところ

            
            - ES6の内容であり、未だに多く使われているES5など、
    過去のJavascriptには一切触れない

- 書かれているサンプルコードには、
    ほとんどコメントのような解説は書かれていない

- コードと解説が完全に分離されているため、
    解説を探すという作業に時間を取られる読み難さがある

- JQueryの内容に重きがおかれ、そちらに充実している分、
    標準のJavascriptとは少し異なる知識に偏る

- より良く本を読み進めるには、
    多少のHTML&CSSを理解できる知識が要求されるかも知れない
        

改訂新版JavaScript本格入門

合同会社タコスキングダム|蛸壺の技術ブログ

多くのJavascript開発者がこの本で勉強された、実績のあるロングセラーのJavaScript本です。

ES6が出始めの頃となる時期の出版から五年も経とうとしていますので、少し新しい内容の本もセットで購入したほうが良いかも。

良いところ

            
            + ES5のレガシーになりつつあるJavascriptの文法・用法も良く記述してある

+ ざっと流し読みできるほど読みやすい構成になっている

+ 本の総分量はコンパクトに収められており、
    必要最低限のノウハウが簡潔に紹介されている
        

悪いところ

            
            - 用語の定義・挿入図の詳しい説明がやや省略気味に進むので、
    基礎を学びたい初心者には少し説明が欲しいかも知れない

- 既知として登場する知識も必要で、他のオブジェクト指向の言語を
    ある程度理解した読者には適度な内容になっている
        

JavaScript コードレシピ集

合同会社タコスキングダム|蛸壺の技術ブログ

2019年1月に出版された『JavaScriptによるWeb開発のための究極のレシピ集』という謳い文句で書かれたレシピブックです。

Webフロントエンドの現場で使われる定番から高度なテクニックを紹介してあります。

「あのプログラムはどう書くんだろう?」が逆引きできるように工夫を凝らした内容になっています。

Javascriptの初級レベルの勉強を終えて、そろそろ中級者コースにでも入門したい方に適した書籍です。

良いところ

            
            + Javascript中級者以上であれば、
    必要なコードの逆引き辞書的な感覚で使うことができる。

+ 実用的なコードが多数記載されているので、
    自分の手で一から写経できることが何よりのスキルアップになる
        

悪いところ

            
            - 既知として説明を省略されるコード・関数がたびたび掲載されているため、
    省略されたコードを理解していない初心者~中級者には対応できない

- レシピブックの特性上、本の分量が多く、単行本では厚さ・重さは気になる
        

ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く!

合同会社タコスキングダム|蛸壺の技術ブログ

中高校生のために書かれたJavascriptによるゲームプログラミング入門書として書かれた書籍です。

子供たちでもより楽しく学べるようにゲームを作成していくスタイルですので、平たい表現で説明が加えられているのが、大人でも読みやすいでしょう。

2015年12月の出版で、内容的にはES5の内容で書かれているためES6以降の用法を知りたい方は別の入門書のほうが良いでしょう。

良いところ

            
            + ゲームプログラミングが題材なので、プログラミングを楽しく学習し、
    ゲームをつくり終えるまでに達成感を得やすい

+ ソースコードが基本に載ったテクニックで構成され、
    初心者にも分かりやすい

+ JavaScriptとHTML&CSSにも触れることができ、
    ゲームサンプルも13点が用意されているので、
    一冊の内容としては充実している

+ サンプルゲームのソースコードが省略されることなく全て記載されている
        

悪いところ

            
            - 初心者が必要としてような注釈や説明がやや不足な点がちらほらと存在している

- 読者が読み進めていく中盤以降は、それより前に説明されていた知識は十分理解
    されているものとして扱われるため、内容の前後関係に注意しておかないと躓きやすい
        

モダンJavaScriptの基本から始める React実践の教科書

合同会社タコスキングダム|蛸壺の技術ブログ

もっとも人気の高いjsフレームワークであるReact.js主体にJavascriptを実践的に学ぶことができます。

2021年9月に出版された現時点ではかなり鮮度の高い内容になっています。

React.jsもJavascriptも両方一緒に入門したい人にはおすすめです。

良いところ

            
            + より実務性重視のReactの使われ方に絞って、
    必要なポイントを分かりやすく説明されている。

+ 前半のパートで必要最低限のJavaScriptの内容に絞って説明されているので、
    効率的にReactを使う基礎固めの学習ができる

+ 後半ではReact特有のレンダリング・context・hooksなどの理解に躓く部分も、
    丁寧に分かりやすく解説されている
        

悪いところ

            
            - Reactで実現可能なアプリケーションの説明や最終的な学習のゴールなどの記述はなく、
    学習の達成感は弱いかも知れない

- Reactを最初に学ぶ足がかりには適しているが、
    よりReactアプリケーションに発展性を求めるには、他の教材が必要
        


Typescriptをしっかり学べるおすすめ入門書

こちらはTypescriptで注目の書籍もピックアップしていきましょう。

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

合同会社タコスキングダム|蛸壺の技術ブログ

TypeScriptに特化したTypescriptためだけの入門書です。

本書全体を通じて、TypeScriptの洗練された型システムを最大限活用するためのコードの記述方法をじっくり学べます。

Javascriptの解説は一切なので、Javscriptをある程度理解していないと読めませんのでご注意ください。

良いところ

            
            + TypeScriptについて初歩からある程度深い部分まで丁寧に解説されている

+ JavaScript中級者以上で、
    TypeScriptへのマイグレーションを考慮したいときに最適な内容
        

悪いところ

            
            - 現在、電子書籍には対応していない

- Javascriptの内容は取り上げられていないので、
    Javascriptは既に初心者卒業程度は習得しておく必要がある
        

TypeScriptハンズオン

合同会社タコスキングダム|蛸壺の技術ブログ

タイトル通り、実際に手を動かしながらTypeScriptをハンズオン形式で学ぶスタイルのts入門書籍です。

Typescriptの基礎から簡単なWebアプリ開発まで、実践的なTypescriptを学びたい人に適した内容になっています。

良いところ

            
            + 演習用のサンプルコードが適度な長さで読者の手で写経しやすい

+ Typescriptとしては内容がまだ鮮度が高く、
    近年追加になった新しい機能・用法の内容も広く網羅している
        

悪いところ

            
            - 初版であるためか演習サンプルには細かいバグや誤植が存在している

- 後半はReact・Vue・Express・NestといったJSフレームワークの内容が中心に展開されるため、
    中盤以降はTypescript自体への掘り下げは少なくなる
        

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義 ~

合同会社タコスキングダム|蛸壺の技術ブログ

TypeScriptの「型付け」を体系的に学ぶための一冊、とされています。

JavaScript・TypeScriptをある程度使いこなし、アプリケーションを作った経験がある人が読者ターゲットとされています。

TypeScriptの型システムにフォーカスし、その基礎から「Next.js」・「Nuxt.js」フレームワークと連携した活用方法までをより深く解説しています。

よりTypescriptの「型システム」を活用したいjsフレームワークを使った開発者への入門書です。

良いところ

            
            + React・Vue・Express・Next・Nuxt等のフレームワークを使った
    プロジェクトを最適化したいプログラマーに適している

+ ジェネリック・Conditional Types・Utility Typesより高度な型定義を学習できる
        

悪いところ

            
            - 各章の内容構成が独特でクセが強く感じる人が多く、説明の順序関係で躓きやすい

- 実践的なTypescriptの内容が中心であり、基礎としては他の教材を利用したほうが良い

- 元々洋書の翻訳版であり、日本語翻訳が甘かったり、校正や説明不足も目立つ他、
    脈絡のない文章が存在していて読みづらい面がある
        


JavascriptS/Typescriptがしっかり入門できるおすすめ学習サービス

今の時代、JavascriptもTypescriptも本から学ぶだけが入門の手段ではありません。

先程まで紹介していた書籍には、シェルスクリプト入門レベルから上級者向けコースまでとレベルが様々ありますが、初学者からするとどう難しいのか判断は付きません。

一人で勉強すると理解するまで時間のかかるし、気づけばスッとクリアできるポイントもなかなか気づかないままでスムーズに学習が進まないことにもなりかねません。

ここではより効率的にjs/tsを学ぶためにオンライン型のいくつかの学習手法をご紹介していきましょう。

TechAcademyのオンライン教室

合同会社タコスキングダム|蛸壺の技術ブログ

色々と情報を仕入れながら、自分に最適な勉強プランを設計していくのも、それはそれで時間がかかります。

さらに日々のスケジュールに追われて少し間が空いてしまうと持続性が失われ長続きしません。

『TechAcademy』では、JQueryを含むjavascriptの総合的ノウハウを教えてもらえる全ておまかせ学習サービスの『TechAcademy | フロントエンドコース』が開講しています。

オンラインプログラミングスクール形式ですので、決まった時間に決められたカリキュラムをメンターに教わりながら自分のペースで進められることが大きな利点です。

確実に講座受講後に、学習効果が成果として求められる、企業内の新人エンジニアの社内教育に以下がかと思います。

また最終的に挫折することなく、確実に成果としてJqueryを中心にJavascriptを手っ取り早く覚えてみたい方におすすめです。

Udemyのオンライン教材

合同会社タコスキングダム|蛸壺の技術ブログ

『Udemy』はアメリカに本社を構える世界最大級のオンライン学習プラットフォームサービスを世界展開している企業です。

日本国内では事業パートナーとしてベネッセ社が協業をしています。

Udemyの学習プラットフォームの大きな特徴は、
教えたい講師側と教わりたい生徒側のマッチングを行う「C2C(Consumer-to-Consumer)」型のサービスを実現させていることにあります。

これによりプラットフォーム内に非常に豊富で多彩な講座が存在し、個人レベルの学習ニーズに応じたニッチな題材の学びを発見できるかもしれません

今回はJS/TS関連の講座で気になったものをいくつかピックアップしてみます。

Javascriptをマスターしたいとは思っても、最終的に達成したいゴールは人それぞれです。

まずはしっかりと、「Javascriptで何をどうしたいのか?」ということを整理されておくとより良いオンライン講座選びができるはずです。

Udemyにあるほんの一部の講座ですが、純粋にJavascriptという言語そのものを原理的に基礎から深く学びたい人には
『【JS】ガチで学びたい人のためのJavaScriptメカニズム』という講座が適しています。

Webサイトなどのフロントエンド開発者を目指しておられる方には、以下の
『【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)』という講座も参考になるでしょう。

Webデザインの業務に携わりたい人なら、JavascriptとあわせてHTML&CSSをセットで学ぶことになりますが、これらをバランス良く学べ、スムーズにjQuery/Vue.jsへと学習を移行できるような
『【HTML/CSS/JavaScript】フロントエンドエンジニアになりたい人の Webプログラミング入門』という講座も検討できます。

他方で、Typescriptを学べる講座も充実しています。

現在のJS系のフレームワークや実行環境では、Typescript主体のプログラミングが主流です。

JavaScriptを発展させて、Vue・React・AngularやNode.jsを学ぶ足がかりにしたい方は、ぜひ
『超TypeScript入門 完全パック(2021) 』という講座を受講してみてください。

レバテックカレッジのプログラミング教室

合同会社タコスキングダム|蛸壺の技術ブログ

『レバテックカレッジ』は、新卒でITエンジニアになりたい大学生・大学院生向けのWebエンジニア特化プログラミング教室です。

最大の特徴としては、プログラミングスキルを学べるだけではなく、最終的にカリキュラム卒業者が希望すれば就職活動までサポートするユニークな点にあります。

運営しているレバテック社は、様々な企業のITエンジニア採用支援での15年以上の実績があり、IT企業の求める人材を熟知している点で、将来のITエンジニア希望者のキャリアを見据えた学習サービスを提供することが可能になっています。

レバテックカレッジの入門カリキュラムも実務レベルを意識した内容になっており、プログラミング未経験でも最短3カ月でそのレベルが目指せるカリキュラムになっています。

この手のITエンジニア育成向けのプログラミング教室では、卒業までの受講料がトータル数十万程度かかることも普通ですが、レバテックカレッジは求人先として提携している企業から予めスポンサー援助料を得ているため、コースによっては10万円程度から始められ圧倒的に安価な受講料を実現しています。

WebエンジニアはPHPをベースとした受講内容になっていますが、当然としてJavascript、HTML&CSSの基礎もしっかりと身につく学習内容になっていますので、安心して受講できます。

CodeCampのオンラインプログラミング教室

合同会社タコスキングダム|蛸壺の技術ブログ

『CodeCamp(コードキャンプ)』は、オンライン完結型のプログラミング学習サービスになります。

プログラミングの初心者でも、Webエンジニアを志す人なら誰でも仕事や学業と両立しながら最も効率よく、確実に学べる環境を提供します。

CodeCampを利用する最大のメリットとして、経験豊富な現役エンジニアが講師となり、リモート通話による個人レッスン形式で受講できるため、時間や場所を選ばずに毎日・世界中のどこでも利用できる点です。

早くよりオンライン・マンツーマン指導のプログラミングスクールとしてNo.1の実績を持つサービスとして定評があり、未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。

学習コースは選択制になっており、目標とするエンジニア相当のスキルレベルに応じて必要なプログラミング技能などを設定することが可能なプランになっています。

合同会社タコスキングダム|蛸壺の技術ブログ

これまでも多くの受講生が、確実にプログラミングを習得した後で、キャリアアップ・転職・独立起業などの目標を実現しているとのことですので、後から回収できる自己投資と考えて、全てのWebエンジニアデザイナーのノウハウを一通り学ぶことのできる「プレミアムプラス」コースを選択するのも有りかも知れません。

昨今ではWebエンジニア人材の求人人気も高まり、転職コース・『CodeCampGATE』のように、就職・転職特化型の学習カリキュラムにも力を入れており、受講者の就職や転職を成功させるまでの万全のサポート体制でITエンジニアを目指す人たちを全力サポートする学習コースも人気になっています。

新規無料カウンセリングを受講されると受講料が1万円割引が利用できるキャンペーンもありますので、興味がある方はまず、以下の無料カウンセリングを申し込まれてはいかがかと思います。