動きのあるwebサイトを作る為のオススメの教材を教えてください。

検索しながら勉強していると一貫性がなく、思ってもないところで詰まってしまったりするのでUdemyや本などを利用して学習をしていきたいのですが、オススメの教材を教えていただけないでしょうか?
HTML,CSS,JavaScriptについて学べるものがあると助かります。

お恥ずかしながら知識が少し古く、自分は動きのあるwebサイトを作るにはjQueryが良いというザックリとした知識しかありません。今はjQueryはあまり使われていない事や僕自身がjQueryをWordPressのプラグインの1つとして扱っていた事があり、殆どDOMなどに対しての知識もありません。
HTML,CSS,JavaScript以外にもこういう知識があると良いなどのご意見も頂けると幸いです。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2019/01/07 22:30:05

回答0件)

回答はまだありません

  • id:jwrekitan
    HTMLっていうのは単なる文章の構造の定義、CSSは文章構造とは無縁な装飾全般の定義、
    ですので「動きのあるwebサイト」というのは恐らくJavaScriptの事だと思うのですが、
    まずは何を学びたいのかを明確にした方がいいと思います。

    > 思ってもないところで詰まってしまったりする

    というのが例えば、画面の外にはみ出してしまう程度の事を指しているのであれば、
    それはブラウザごとにレンダリング(=表示)結果が異なるので
    CSSでその誤差を吸収しなければならず、CSSを学ぶ必要がある
    (というよりも地道な調整作業が必要)、
    となりますから学ぶべき対象はJavaScriptではなくなります。

    jQueryの実態は、JavaScriptの塊です。
    皆が使いたいと思うような、
    「あったら便利なJavaScriptの命令の塊」を定義してあるに過ぎないという事。

    # こうした「命令の塊」の呼び方は使用言語によって異なり
    # ライブラリとかサブルーチンとか関数などと呼ばれます

    JavaScriptでのプログラミングがノコギリで板を切り出し金槌で釘を止める日曜大工だとすると、
    jQueryでのプログラミングというのは
    すでに加工してある材料をネジで止めるだけの組立家具に過ぎません。
    後者の利点は技術がなくてもそれなりのものが作れる事。
    欠点は、そうしたものに頼ってばかりではいつまで経っても本当の技術が身につかない事です。
    JavaScriptなんてちんぷんかんぷんだけどjQueryを使うとなんとなく動くものが作れるという人が、
    JavaScriptを理解したうえでjQueryを使っている人と同じ物を作りたいと思っても
    土台無理な話なわけですね。プログラミングというものを本格的に学ぶ必要があるわけです。
    この場合、作りたいものからは一度離れて、
    1つ1つの命令の意味を理解するところから始めた方がいいです。
    つまり他人のプログラムを読んで、
    「この行はこういう動作をしてるから、ここの数行はこういう事をやっているんだな」
    というのを理解できるようなレベルにまで到達する事です。

    英語を耳で聞いても意味が分からない人が、いきなり英会話ができるはずがありませんよね?。
    まずは喋れないまでも聞いて意味が分かるレベルにまで到達し、
    その後、徐々に自分の言葉で喋れるようになるのではないでしょうか?。
    それはプログラミングに関しても同じ事。近道はたぶん無いと思います。
  • id:hib3
    コメントありがとうございます。少しではありますが、椶櫚さんの答えから自分が何がしたいのかわかりつつあります。
    すみません。動きというのはそういうプログラムで動作する条件分岐的な物もありますが、今回の質問内容では単純なアニメーションも含みます。
    「何を学びたいのか」は「何があるのか」がはっきり分かっていない以上、何もしようがありませんので、明確になっていませんでした。その前の段階にいるのでこうして質問をしています。
    質問サイトでありながら、このようにコメントができるということは、会話の中で新たな答えや知識をつけることができます。
    上手く言語化できませんが、私はあなたの言葉から、質問したかった内容以外のことも沢山学ばさせて頂いています。

    「本当の技術」についてのお話ですが、私は一流の将来を約束された家具職人の息子でも建築家の息子でもありせん。貯金箱を作ってみたい、あわよくば日曜大工を趣味にしたい子供です。
    目的は、「貯金箱を作ること」であり、一流職人に必要な組み木の技法を学ぶことではありません。
    行く行くは必要になるかも知れない知識ですが、今はそれよりも、遠回りですが沢山の物を完成させて、日曜大工の魅力を知り、日曜大工に触れること自体が必要ではないかと思いました。
    便利な技術を使うのも悪くないと思います。恐らく今はノコギリで板を切り出すことができても、IKEAのベッドは作れません。組立家具には日曜大工の一部を含んでいると思います。
    組立家具を繰り返すことで、ベッドがどのような構造で出来ているのか、どんな材料で出来ているのかがわかると思います。これは、今後他の日曜大工をすることに活用できる知識ではありませんか?
    また、物を作るということがこんなに簡単に出来るという事実は、今後より深く技術を学ぶ為に、糧になるのではないでしょうか?

    以上の事を考え、jQueryにもJavaScriptの一部の要素を含んでいるのではないかと私は思いました。
    jQueryが完全にJavaScriptを含んでいないのなら、それはとても初心者思いの良い技術だと思います。(確かに学ぶにはちょっと…ですが)
    jQueryを知って、jQueryじゃできないなと思ったところをJavaScriptで書くことはダメでしょうか?

    英会話とは少し違いますが自分はGoogle翻訳を活用してテキストチャットをしています。
    最近は翻訳結果の文節がわかりつつあり、その文節の傾向を用いて翻訳なしで英文をかけるようになりました。
    オーソドックスな語学教本などを用いて言語体系を理解する流れとは違い、便利な道具を使いながら覚えました。最近は少し語学教本に記載されている文法にも興味が湧き、手に取るようになりつつあります。

    近道がないのは、重々承知であります。ですが、遠回りから得られる物も案外悪くないのではないか?と私は思いました。
    何より、語学も創作もですが「右も左も分からない」という状況下で評価をしなければならないのは独学ではとても困難で、組立家具やGoogle翻訳のような「正解」から評価方法を学ぶプロセスが私の「先生」になってくれて助かります。

    すみません。コメントがすごく長くなってしまいました。稚拙ではありますが、目を通していただけたら幸いです。

    椶櫚さんの例えはすごくわかりやすかったです。また、コメントしていただけるととても嬉しいです。
    ありがとうございました。
  • id:jwrekitan
    うーむ、なんと言えばいいのかな…

    作りたいプログラムがある場合、まずは事象を頭の中で分解してみて、
    「この命令とこの命令とこの命令をこの順番で組み合わせれば目的を達成できるはずだ」
    という流れで作ります。
    そのためにはどんな基本命令が存在するのかを最低限把握しておく必要があるわけですね。
    基本命令を一通り把握しておけば、他人の作ったプログラムであっても、
    「中身はきっとこんな風になっているんじゃないか」
    というのをソースコードを見なくてもある程度予想できたりします。

    ところが、他人の用意してくれた便利な関数ばかり利用していると、
    この基本命令を覚える機会がありません(だって覚えなくても目的が達成できるんですから…)。
    これではいくら作る回数を増やして経験を積んだ気になっていても、
    実際には何も身についていないわけです。
    だから期待した結果が得られなかった場合に、
    まずどこが問題なのかが分からず、 (← ここが最大の問題)
    自分ではどうする事もできない、となります。
    ソースが読めるなら、ちょっとした修正で治るのか、
    あるいはその関数には元々求めるような機能が存在しないのか、
    そうしたあたりが判別できるようになるというわけです。

    # というか、ソースが読めるレベルであれば
    # 求める機能が存在しなかった場合でも
    # 代替プログラムを作成する事くらいはできるはず

    前者が様々な歯車を組み合わせて時計を組み上げる時計職人だとすると、
    後者は文字盤の装飾を弄ったりベルトを交換したりして
    付加価値を付けようとしている人に過ぎないというわけ。
    そんな経験いくら積み上げたところで時計を作れるようにはならないでしょう?。

    > 思ってもないところで詰まってしまったりする

    の本質はそういうところにあるはずなんです。

    で、そうした本格的な時計作りに挑戦したいなら、
    ネット上のお手軽な入門記事などに頼らず、
    ↓のようなより多くの命令群を網羅したページを用いる事をお勧めします。

    https://developer.mozilla.org/ja/docs/Web/JavaScript

    そして、読んで分からないところがあった場合に
    「これはどういう意味でしょう?」と質問すればいいのではないでしょうか?
    「初歩的な質問ですみません」レベルでもいいと思いますよ?
    誰でも最初は初心者なのだから。
  • id:hib3
    コメントありがとうございます。返信が遅れてしまい申し訳ありません...

    まず問題として、シンプルにまず意味が分からないので、ドキュメントを読むことができない(ドキュメントを読む以前の知識が足りない)と言うことがあります。
    そして、分からないことが分からないので、助けを求めようにないことが多いです。
    テラテイルなどの質問サイトは初心者にはまず質問する時点で詰んでしまいます。
    服を買いに行く服がないような状態で、ドキュメントを読む前提知識がありませんし、「分からないこと」が何なのかすら分からないと言うこと以外何もわかりません。
    最終的な到達点として、ソースが読めることや、問題点を推測できることがあるのはもっともだと思います。
    ただ、ドキュメントを読めることも、覚えなくても目的が達成できることも、僕からしたら限りなく到達点に近い場所だと思っています。僕が躓いているのは、もっともっと最初の入り口です。
    本当に、「これはどう言う意味でしょう?」としか質問ができないんです...
    「何がどうで、どこがどう言う意味なのか?」「どう言う意図でそれを聞いているのか」と言った具体的な物には答えられません。
    それこそ完全に丸投げのような感じで、会話を通じて逆に回答者が質問者に質問して答えを推測して教えてもらう他ないです。(実際掲示板ではそうしてPythonを教えてもらっていました。)
    とはいえ、未だにオブジェクト志向や引数などは人の言葉を借りても完全には理解できませんでした。

    1+1が「1に1を加算する」と言う事実が理解できても、それを何に使うのか、それができるとどうなるのか、加算されると言うことがどう言う意味を持っているのかなど、分からないのと同じです
    加算されると言うことは、1+2ができることや、数を数えられること、それが引き算や掛け算に繋がることなど様々な事実がありますが、そう言うのはもっと知識がつかないと見つける事ができません。
    プログラムの命令のほとんどは、1+1のように汎用性があって実生活に関係しているものではないと思います。恐らく三角関数と同じぐらいの複雑さや汎用性だと思います。
    三角関数も知ってる人には簡単で、用途の多さに理解があると思います。しかし一般人の大半が理解できない、または応用する事ができないものです。

    すみません。できない理由をいくら並べたところで先には進みませんね。将来自分と同じ状況になるプログラミングの初心者にどう教えればいいのかずっと考えてしまいます。
    とりあえずサイトについては、今はcodeprepなどで時間のあるときに写経をしています。

    Pythonのスクレイピングについては、ある程度理解する事ができたので(urllib.requestなどではなく単純なseleniumですが...)、自分のしたいことを沢山広げる事ができ、最近はファイルに書きだしてブラウザーで表示をさせる事などもできました。
    ここまで来るとすごく楽しいのですが、それでもまだまだ分からない事だらけですね...

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません