もぐら王国巣ごもりDXステップ講座情報ナビを眺める(´･ω･｀)-5

React.js 入門 2016年9月

これはstartとfinalのフォルダがあって一応演習しやすそうであったのだけれども、下記で発生するエラーの為にそう簡単にはいかなかった…つーか全然身にならなかった(ﾉ∀`)

そう言えばなんでより古いReact講座ではこうしてるのに、同じの講師のAngularやCSSの講座では完成形の単一ファイルしか提供しない方式にしたのであろうか？

使ってるブラウザがvivaldi、つまりはchromeだったので

Access to XMLHttpRequest at 'file:///C:/～ファイル名' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

みたいなエラーが出てしまう(ﾉ∀`)

FireFoxを今更入れるのは面倒くさいので、何か簡単な方法はないかぐぐる。

なるほど、ファイルの場所にnpmでhttpサーバをインストール＆起動してhttp経由でアクセスすればいいのか。(ファイルの場所じゃなくてもいいけど、パス指定が面倒くさい。故にサーバを入れたフォルダにファイル名を変えたhtmlファイル作成して演習を続けた。)
【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した

関係ないがnpmはNode Package Managerの略なのか。

これで上手く行くかと思いきや…
今度は以下のエラーが…

Uncaught TypeError: React.createClass is not a function

よくわからんが

そもそも論ですが、React.createClassは古い書き方です。Babelなども入っている環境ですし、ES6のclass構文でコンポーネントを書きましょう。
jsx内でReact.createClassが使えないとエラーが出るので、使用できるようにしたい

ということらしいので、
(※htmlのdiv要素のidは"root"に変更した。)

class CommentBox extends React.Component {
    render(){
        return (
            <div className="CommentBox">
            Comment Boxを表示
            </div>
        );
    }
}
ReactDOM.render(<CommentBox />,
    document.getElementById('root'));

みたいにしたら一応動いたので良しとしよう…

class構文じゃなくてfunction構文なら

function CommentBox () {
        const element =(
            <div className="CommentBox">
            Comment Boxを表示
            </div>
        );
   
    ReactDOM.render(element,
        document.getElementById('root'));
}
CommentBox();

でいいのかな？
一応動いたが…

ここまでは動いたけど、この後挫折する(ﾉ∀`)

Remarkableはnpmでインストールしたら"Uncaught ReferenceError: Remarkable is not defined"は消えたが、今度はbabelで"require is not defined"が出た…
ちょっとRemarkableは観るだけにしよう…(´･ω･｀) ←と言いつつ以降観るだけで終了

sample.htmlでそれぞれのライブラリの古いバージョンを指定している状態だとエラーはなく動くんだけど、新しいバージョンに指定し直すと何かエラーが出る。なんか間違えてるのかな？ urlが違うとか後方互換性を無視したアップデートとかがあったのだろうか？

関係ないけどメイリオフォントとか使ってるとemタグで斜体にならないのか。

環境の違いやら何やらで演習をせず、Reactについてはほとんど何も得ることがなかった。AngularのRxJS辺りから、つまりはなんだか上手く動かない感じになってからやる気が激減している模様(ﾉ∀`)

最新のコードにせず、これらの講座が作られた当時のコードのままでやれば全部上手く行くのかもしれないが、古い内容を覚えてもあんまり意味ないからなぁ…

仕事で触る人なら古いシステムの改修とかするかもしれないから多少の意味はあるか…いや、でも新しい情報は結局改めて得ないといけないから大差ないか。

改めて、他の企業等が経済産業省に対して新刊やそれに近い物を提供してるのに、Linkedinは古本を提供してる感じだと思った(ﾉ∀`)

Vue.js 入門 2017年5月

2-4でなんか警告出てたけど、まあ警告だからいいか(　゜σ･ﾟ）ﾎｼﾞﾎｼﾞ
データオプションかクラスベースのコンポーネントでこのプロパティが初期化されてリアクティブなのか確認しろってとか言ってるのかな？

[Vue warn]: Property or method "todo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in )
warn @ vue:634

日本語訳の説明を読んだけど、わかったようなわからんような(ﾉ∀`)

この制限の背後には技術的な理由があります。それは依存性追跡システムにおける一連のエッジケースを排除し、また Vue インスタンスと型チェックシステムとの親和性を高めます。しかしコードの保守性の観点からも重要な事項があります。data オブジェクトはコンポーネントの状態のスキーマのようなものです。前もって全てのリアクティブなプロパティを宣言しておくと、後から見直したり別の開発者が読んだりしたときにコンポーネントのコードを簡単に理解することができます。
reactivity

取り敢えず、data:{}内に todo:{text:"",done:false} を追加したら消えたので、まあそういうことなのかな(´･ω･｀)

徐々に説明の重複部分や挙動を先に確かめて実演動画部分を飛ばし始める(ﾉ∀`)
やっぱり俺氏は動画よりもテキストの方が勉強しやすいタイプなのかもしれない。

vueはJavascriptの講座で触っていたことと、vue自体がシンプルなせいか、特にひっかかることもなく終了∩(・ω・)∩

GitHub 入門 2020年5月

プッシュしたらエラーが…(´･ω･｀)

git push時のerror: src refspec master does not match anyについて

ってほんとだ、masterじゃなくてmainになってるｗ

networkとかはgithub PROじゃないと使えない？

特に問題がなく終わった模様。

最後の方は若干、投げやり感があるが、そもそもこの三講座はそれぞれ2時間弱くらいのものなので、言及することが少なかった。

取り敢えずまあ終わったのでめでたしめでたし(´･ω･｀)？
まあ前半のHTMLやcssやJavascriptは非常に偏ってる知識の補完には良かった。AngularとVueはなんとなーくわかったような気がしないこともないくらいにはなったし、良しとするか…

Reactは上手く動かなくてよくわからないというか苦手なイメージがついただけだがｗ
そもそもHTMLとJavascriptを混ぜて書くのって、どうメンテナンスしてるのか気になったけど、一人の人間が対応する感じなのかな…？

無料期間の終了が近づいているので、簡単そうな講座を2～3観て、ラーニングは抜けておかないと請求されても支払うお金ないねん(´･ω･｀)

関連