- 664
- 476 864
Code Tips
Japan
เข้าร่วมเมื่อ 24 พ.ค. 2020
こんにちは！Code Tipsでは初学者向けのプログラミングに特化した動画を公開しています。
HTML、CSS、JavaScriptからReactまで、幅広い分野を取り扱っています。
超入門の内容からスクールや学習教材ではなかなか紹介されない実践的なテクニックまで、視聴者の皆さんが知りたい情報を幅広くカバーしています。
当チャンネルは以下のような方には特に親和性が高いですので、該当される方はぜひご覧ください。
「コーディングを身につけて単価を上げたいWebデザイナー」
「プログラミングを学習して個人開発やポートフォリオを作っている初学者」
「周りにメンターがいない駆け出しフリーランス」
Code Tipsはプログラミング初心者の方々が、より効率的かつ効果的な学習を行い、スキルアップにつなげるお手伝いができるよう、心をこめて動画を制作しています。
あなたもプログラミングの世界に飛び込み、スキルアップを目指しましょう！
HTML、CSS、JavaScriptからReactまで、幅広い分野を取り扱っています。
超入門の内容からスクールや学習教材ではなかなか紹介されない実践的なテクニックまで、視聴者の皆さんが知りたい情報を幅広くカバーしています。
当チャンネルは以下のような方には特に親和性が高いですので、該当される方はぜひご覧ください。
「コーディングを身につけて単価を上げたいWebデザイナー」
「プログラミングを学習して個人開発やポートフォリオを作っている初学者」
「周りにメンターがいない駆け出しフリーランス」
Code Tipsはプログラミング初心者の方々が、より効率的かつ効果的な学習を行い、スキルアップにつなげるお手伝いができるよう、心をこめて動画を制作しています。
あなたもプログラミングの世界に飛び込み、スキルアップを目指しましょう！
Node.jsとMongoDBで作ったAPIをデバックしてみる【EchoAPI】
EchoAPIはこちら↓
www.echoapi.jp/
関連動画はこちら↓
MVCとは？：th-cam.com/video/BMhThQAWdNQ/w-d-xo.html
ミドルウェアとは？：th-cam.com/video/eCS9IINbXTY/w-d-xo.html
開発者としてAPIの動作を正確に把握し、効率よく問題を解消できるスキルは非常に重要です。
デバックツールの新しい選択肢として「EchoAPI」というツールを紹介します。
この動画を通じて実践的なデバッグのコツを学び、自分のプロジェクトにも活かしてみましょう
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ：lorem-co-ltd.com/
Twitter： rubyprogram
#nodejs #mongodb #api
#web制作 #webデザイン #webデザイナー #javascript #コーディング
www.echoapi.jp/
関連動画はこちら↓
MVCとは？：th-cam.com/video/BMhThQAWdNQ/w-d-xo.html
ミドルウェアとは？：th-cam.com/video/eCS9IINbXTY/w-d-xo.html
開発者としてAPIの動作を正確に把握し、効率よく問題を解消できるスキルは非常に重要です。
デバックツールの新しい選択肢として「EchoAPI」というツールを紹介します。
この動画を通じて実践的なデバッグのコツを学び、自分のプロジェクトにも活かしてみましょう
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ：lorem-co-ltd.com/
Twitter： rubyprogram
#nodejs #mongodb #api
#web制作 #webデザイン #webデザイナー #javascript #コーディング
มุมมอง: 305
วีดีโอ
【頻出Webデザイン】ウェーブアニメーションを作ってみよう
มุมมอง 1.2K3 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1Addnz4XCSlKRC3fg2aYGmXceFI2xIiF-?usp=drive_link 関連動画はこちら↓ keyframesの使い方：th-cam.com/video/HUIlFHJ04cg/w-d-xo.html 初心者でも簡単に実装できるウェーブアニメーションの作り方をステップバイステップで解説します。 HTMLとCSSの基礎的な知識さえあれば、複雑なライブラリに頼ることなく、独自のウェーブアニメーションを作成することが可能です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオン...
【頻出Webデザイン】カードのホバーエフェクトを作ってみよう【mix-blend-mode】
มุมมอง 5313 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1z4Wc5PYorezh67IrPHd6OFrOIcgoA9Pu?usp=drive_link 関連動画はこちら↓ translateについて：th-cam.com/video/4XEETeDW_WI/w-d-xo.html WebサイトやアプリのUIデザインにおいて、カードレイアウトは頻繁に使用されるパターンの一つです。 そのカードに動きを加える「ホバーエフェクト」は、ユーザーエクスペリエンスを向上させ、デザインに魅力とインタラクティブ性をプラスします。 今回はそんなカードデザインに個性を持たせるための「ホバーエフェクト」を、CSSのmix-blend-modeプロパティを使って実装する方法を解説します。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを...
Next.js14で外部APIからデータ取得するときのローディング画面とエラー画面
มุมมอง 2723 หลายเดือนก่อน
関連動画はこちら↓ 外部APIからデータ取得する方法：th-cam.com/video/rjHeu2yqVUg/w-d-xo.html loading.tsxについて：th-cam.com/video/4Dhi_-A6_RQ/w-d-xo.html error.tsxについて：th-cam.com/video/KA9aqfl2JQQ/w-d-xo.html Next.js 14で外部APIからデータを取得する際に、ユーザーにとって分かりやすく、ストレスのないローディング画面とエラー画面をどのように実装するかを解説します。 サーバーコンポーネントを活用したエラーハンドリングまで、実践的なアプローチをステップバイステップで紹介します。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Rea...
Next.js14における外部APIからデータ取得のやり方
มุมมอง 4043 หลายเดือนก่อน
関連動画はこちら↓ async,awaitについて：th-cam.com/video/9PbVjm7FkHw/w-d-xo.html mapについて：th-cam.com/video/6OtDnwc9CIY/w-d-xo.html 今回は魅力的なWebデザインに欠かせない「いいね！ボタン」のアニメーションをコーディングする方法を解説します。 keyframesとanimationを使った動きの作り方、JavaScriptを使ったクリック制御を学びながら、ユーザーのインタラクティブな体験を向上させる方法をご紹介します。 最新バージョンのNext.js 14ではサーバーサイドでのデータフェッチやAPIのキャッシング、クライアントサイドでのデータ取得がより直感的かつ効率的に行えるようになっています。 JavaScriptの基本的な文法を使って外部APIからデータ取得する方法を見ていきましょ...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？④
มุมมอง 3883 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/13dxIkPzJMyqhgQWKUr9JrG-8MGgx73U5?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/TpisW2bKJ-k/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？③
มุมมอง 3183 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1QNLA0X4uXikIKFLm57EXI4-2C6ssA-ok?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/558ptgxv0W8/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
Next.js14におけるuse clientの注意点
มุมมอง 2423 หลายเดือนก่อน
関連動画はこちら↓ use clientとは？：th-cam.com/video/1aAxmu_atC0/w-d-xo.html Next.js 14における"use client"の仕組みや効果的な使い方、そして開発者が陥りがちなミスやパフォーマンスへの影響について詳しく解説します。 新しいアーキテクチャを取り入れスムーズな開発体験を得るためには、このディレクティブの特性をしっかり理解しておくことが重要です。 Next.js 14での"use client"を使いこなすためのポイントを一緒に見ていきましょう。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただ...
Next.js14でclient-onlyを使ってみよう
มุมมอง 1293 หลายเดือนก่อน
関連動画はこちら↓ server-onlyについて：th-cam.com/video/FxiTKQ5GlKY/w-d-xo.html Next.js 14の新機能「client-only」に興味をお持ちですか？ この機能は、クライアントサイドでのみレンダリングされるコンポーネントを簡単に管理できる、非常に便利なツールです。 従来Next.jsはサーバーサイドレンダリング（SSR）を中心としたフレームワークでしたが、クライアントサイドでの柔軟なレンダリング制御が求められるシーンが増えています。 そこで登場したのが「client-only」機能です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズ...
ReactでCSS書く基本の方法を知らないとライブラリで詰まるよね
มุมมอง 7553 หลายเดือนก่อน
関連動画はこちら↓ styles-componentsの使い方：th-cam.com/video/BEMqJV71TaI/w-d-xo.html tailwindcssの使い方：th-cam.com/video/ZcJFM-cS0pc/w-d-xo.html Reactでの開発を進めていくうちに、UIのデザインやスタイルを整えるためのCSSの扱いに戸惑ったことはありませんか？ 実はReactでのCSSの基本を理解していないと、便利なUIライブラリやスタイル関連のパッケージを導入した際に、意外なところで詰まってしまうことがあります。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂...
Reactでローディングを表示するreact-spinnersを使ってみよう
มุมมอง 1973 หลายเดือนก่อน
関連動画はこちら↓ propsについて：th-cam.com/video/uSYEF8cllw0/w-d-xo.html Reactアプリケーションで簡単にローディングアニメーションを実装できる人気ライブラリ react-spinners を紹介します。 このライブラリを使えば、さまざまなスタイルのスピナーを簡単に導入できビジュアル的にも洗練されたローディング表示を行うことが可能です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。 また僕自身がreactの予備知識は必要ありませんので、 同じような初心者の方はもちろん、 「Web制...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？②
มุมมอง 3433 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1PbC-EWpc7FkX6RAjXoUv1PTd8NlcrV8t?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/7M5C50TFvWg/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？①
มุมมอง 3953 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1eHTGWGLM1vm3UCUQtzPHKKx85Vovr7Xj?usp=drive_link 関連動画はこちら↓ GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際に、欠かせないツールとなっています。 この動画はReact初心者のWebデザイナーが勉強したこ...
GSAPの基本文法タイムライン(timeline)とは？
มุมมอง 3393 หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1-QD5eNpBSBE7izh6qH5IdNaDpVTAs567?usp=drive_link 関連動画はこちら↓ delayについて：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html staggerについて：th-cam.com/video/M6JZ9oC_0v8/w-d-xo.html アニメーションを手軽に、かつ強力に制御できるJavaScriptライブラリ「GSAP（GreenSock Animation Platform）」は、Webアニメーションを作成する際に非常に人気です。 その中でも複雑なアニメーションシーケンスを管理するために欠かせないのが タイムライン（timeline）機能です。 この動画はReact初心者のWebデザイナーが勉強し...
Next.js14でreact-slickを使ってみよう
มุมมอง 1684 หลายเดือนก่อน
関連動画はこちら↓ Next.jsのレンダリング：th-cam.com/video/R8eN1zSecqw/w-d-xo.html Next.js 14環境でreact-slickを簡単に導入し、カスタマイズ可能なスライダーを作成する方法をわかりやすく解説します。 スライダーは製品紹介や画像ギャラリーなど、視覚的にインパクトのある要素を作るのに最適です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。 また僕自身がreactの予備知識は必要ありませんので、 同じような初心者の方はもちろん、 「Web制作でコーディングは出来るけどRe...
Reactで動画プレイヤーを表示するreact-playerを使ってみよう
มุมมอง 3374 หลายเดือนก่อน
Reactで動画プレイヤーを表示するreact-playerを使ってみよう
Reactでカレンダーを表示するreact-datepickerを使ってみよう
มุมมอง 3444 หลายเดือนก่อน
Reactでカレンダーを表示するreact-datepickerを使ってみよう
Reactでクレカ風UIを表示するreact-credit-cardsを使ってみよう
มุมมอง 3354 หลายเดือนก่อน
Reactでクレカ風UIを表示するreact-credit-cardsを使ってみよう
Reactでカウントアップを表示するreact-countupを使ってみよう
มุมมอง 1574 หลายเดือนก่อน
Reactでカウントアップを表示するreact-countupを使ってみよう
Reactでホバー時の吹き出しを作るtippyjs-reactを使ってみよう
มุมมอง 2214 หลายเดือนก่อน
Reactでホバー時の吹き出しを作るtippyjs-reactを使ってみよう
リターンは、プログラムを実行するなどを実行します。 return falseは、プログラムを実行しないと言う意味です。 return trueは、プログラムを実行すると言う意味です。
2:24 これ出たことある！
マジで思ってた。。同じだって。。。
file:///ってしたら出来た
ワイもそれやらかしたｗ
解説ありがとうございます。 usestateを使わず昔ながらの書き方で良いのにと思ってしまいました。
13:04 ワイの場合は、readonly
13:04 ここら辺は、disabledまたはreadonlyで属性を追加してください
gsap 次回の使い方紹介 楽しみにしています。
チャットGPT 日本語 無料版 イイかもネ！ (^^)/
めちゃくちゃ分かりやすい。 何故埋もれてる。
まじで助かりました
ほんとに助かります！ありがとうございます！
最近GSAPを学び始めました。 すごくわかりやすくて勉強になります。 GSAPの動画もっと拝見したいです！ またアップを楽しみにしてます！！
Windows 11の動作確認は、 Chromeと FireFoxでした。 マイクロソフトエッジでは動作できませんでした。 また、Chromeのシークレットモードの場合は、deniedになります。
【注意】投稿者さんはサーバーが返すエラーとjavascriptのエラーを混同されているようなのでご注意ください。
分かりやすかったです！ありがとうございました！
フロントエンド初心者かつreact初心者で、ほんとに分割代入の意味がぴんとこなくて困ってました。この動画見て、「なるほど！」って思えました。ありがとうございます！！
そのG発音しないですね。
type="module"と属性をつけたのですがsrc=".js"のファイルパスを書くとエラーになる原因はなんでしょうか？
とても丁寧な解説ありがとうございます。 ちょうど背景画像をスクロールしたかったので助かりました😊 何かありましたら他の動画も視聴させていただきます！
いつも役に立つ動画をありがとうございます。もう投稿は終わってしまったのでしょうか?
サムネのセンスがいつも好きです（return文に、オマエ誰やねんというツッコミw）
もう更新は終わってしまったのでしょうか…？
5:39のところ、左辺や右辺と 表現されていますが、投稿主さんの 関数では 〇〇 = a || b という形をとっているので 左辺と言ってしまうと〇〇を通常は差します。 私含め混乱される方もいると 思いますから｢||の左側、右側｣と 表現されると良いと思います。
bodyにflexをかけたのは、どういう意図でしょう？
JavaScript初心者です。 append childの所でエラーが出てしまい、どうしたらいいのかわかりません😢 主さんのコードを何度も見直して全く同じにしてもエラーが出てしまいます。
変数名を変更したら無事に動きました！
なかなかJSが覚えられないアラフィフのおばさんです。とても丁寧な説明でわかりやすいです。すぐ忘れてしまうので、何回も見返しています。
わかりやすいですまじで、、、
一味違ったtableの紹介で斬新に思いました。例えばcolspanを後からつけるとセルが伸びるのって面白いですね。ありがとうございました。
主観での感想だと思いますけど、あなたの効率が悪すぎるだけですね。 自分の考えが世の中の考えのように語るのはやめたほうがいいと思います。 私はUdemyだけ何個か買いました。副業なので就職は目指していませんが完全独学で400万稼ぎました。 有料スクールにも通って自社サイトがWPの無料テーマでお問い合わせフォームがGoogleフォームってどうかと思う。 それだけで信頼性ないですよ。
実際は、独学が向いている人と、スクールに習うのが向いている人が両方いる、というのが解なのに、 「独学は絶対だめ」とか「スクールは意味ない」とか、とんでも二元論にするから、おかしな論争になる そもそも二元論じゃないよね、というのが結論かと。
初学者にとってどこが理解しづらいのかをしっかり理解されているようで、本当に分かりやすいです。感謝の気持ちだけでもお伝えさせていただきます!!! このシリーズ全部見させて頂きます☺
ありがとうございます。いつもわかりやすいです。
すごくわかりやすいです。有難うございます。
初学者が何をわからないのかわかってないなぁ
教えていただき感謝です！
gsapの動画待ってました！最高です！もっとお願いします！
とりあえず公式ドキュメントでよくね？とりあえず成果物作ってその後長期インターンとかエンジニアバイトで実践的なものを習えばいいと思う
非常にわかりやすく勉強になりました。ありがとうございます。
頭が悪くて理解力や忍耐力がないならプログラミング志さないほうがよくない・・・？