Home
Language
English
Türkçe
Bahasa Indonesia
About
Privacy Policy
Terms of Service
Pricing
Sign In
Download All
Share
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
現役エンジニアが副業・転職に使えるWEB制作のお役立ち情報を発信|無料面談相談であなたに合った学習プランをご提案|html/css/JavaScript/PHP/Rubyなど全1044問の問題集を無料提供中⏩
未経験から稼げるWeb制作者・エンジニアへ『忍者CODE』
Joined October 2019
744
Following
16.7K
Followers
12.4K
Posts
Pinned Tweet
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
14 days ago
あなたは何問解ける❓ / HTML / CSS / JavaScript だけじゃない 14種類・全1044問の 無料問題集を公開中🔥 \ 忍者CODEは 未経験からWeb制作・プログラミングを学ぶ人向けの オンラインスクールです🥷💻 まずは気になる言語から 挑戦してみてください!! ⏩https://t.co/4LfWQfxGBw
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
about 10 hours ago
アコーディオンUIって 複雑そうに見えますが クリック ↓ addEventListener ↓ active切替 ↓ CSS反映です。 回答が表示されるのも JavaScriptが内容を作っているわけではなく 「高さを変えている」だけ。 ハンバーガーメニュー モーダル タブUI アコーディオン 全部同じ流れで動いています💻
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
about 22 hours ago
・ハンバーガーメニュー ・モーダル ・タブUI 全部別物だと思っていませんか? 実はやっていることはほぼ同じです。 querySelector ↓ addEventListener ↓ classList変更 ↓ CSS反映 この流れが理解できると、 UI実装の見え方が一気に変わります。 保存して復習用にどうぞ📌
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
1 day ago
タブUIって「表示を切り替えている」 と思われがちですが、 実際はactiveを移動させているだけです。 タブAのactiveを消す ↓ タブBにactiveを付ける ↓ 対応するcontentにactiveを付ける この仕組みが分かると なぜ1つだけ表示されるのか が理解できます。 タブUIで止まる人は保存推奨📌
Who to follow
りんどーFX
@rindo_fx
【FXだけで会社員のボーナスを毎月稼ぐ】28歳1姫パパ|料理人→Web制作で独立後、法人化→SSR会社へ転職→#FXLIFE 入会(R7.6月)→プロップ特化(Fintokei/FTMO/Fundora)→単月200万達成(R8.5月)|プロップ出金累計:2,002,304円|2000万口座×2|🍙最推し
くるしば | ソフトバンクよりReact本発売中
@shiba_program
プログラミング独学→半年でWebサービスを作り起業/ベンチャー2社と個人事業を創業、売却/エンジニアになりたい人、個人開発したい人に向けてプログラミングやプロダクトの作り方を発信中/SBクリエイティブより「挫折しないReactの教科書」発売中/ 公開した全てのUdemy講座がベストセラー入り
Codejump | コーディング学習サイト
@codejump_com
Web制作学習者のためのコーディング学習サイト。 模写コーディングとデザインカンプからのコーディングを通して「作れる人」を目指します。Codejumpのオフィシャルサイトはこちら →https://t.co/kH6IxXPbwW
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
2 days ago
Web制作学習で意外と多いのが 「HTMLは理解したつもり」 という状態です。 そのままCSSやJavaScriptに進むと DOM操作やUI実装でつまずく原因になります。 HTMLの構造やタグの役割を基礎から学べる 【Mozilla公式】の無料教材を共有します👇 独学中の方は保存推奨🔖 https://t.co/FuSm0DLL7G
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
2 days ago
モーダルが作れない人の多くは ・overlay(背景暗転) ・position: fixed ・z-index ・closeボタン で詰まっています。 実際のモーダルは HTML → CSS → JavaScript を組み合わせるだけ。 特に”背景が暗くなる理由”を理解すると 一気に実装しやすくなります🪟 モーダル実装でつまずく人へ保存推奨
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
3 days ago
モーダルって実はハンバーガーメニューとほぼ同じ仕組みです。 やっていることは querySelector ↓ addEventListener ↓ openクラスを追加・削除 ↓ CSS反映だけ。 画面が暗くなるのも ウィンドウが表示されるのも JavaScriptが直接描画しているわけではありません。 保存推奨📌
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
3 days ago
☰ ハンバーガーメニュー 作ってみるとシンプルです やっていることは HTMLで部品を作る ↓ CSSで表示ルールを決める ↓ JSでopenクラスを切り替える ・querySelector ・addEventListener ・toggle がどう繋がるのか理解すると モーダル、タブ切り替え、アコーディオン も作れるようになります✨
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
4 days ago
プログラミング学習 「やっと動いた🎉」 ↓ 次の日 「なんでエラー増えてるの…」
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
4 days ago
☰ ハンバーガーメニューって 難しそうに見えますが 実は querySelector addEventListener toggle CSS この4つだけで作れます。 JavaScriptで画面が動く仕組みを理解すると、 モーダル・タブ切り替え・アコーディオンも同じ考え方です。 今まで「なんとなく」で使っていたものはありましたか?👀
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
5 days ago
今まで投稿してきた ・DOM操作 ・querySelector() ・addEventListener() ・toggle() を1枚にまとめました💻 ハンバーガーメニュー モーダル タブ切り替え アコーディオンなど多くのUIは 「HTML取得 → イベント監視 → 状態変更 → CSS反映」 この流れで動いています。 保存して見返してください📌
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
5 days ago
JavaScriptを学び始めると ・DOM操作 ・addEventListener ・toggle など覚えることが増えて "結局何が作れるの?" となりがちです💭 この1枚でJavaScriptでできることをまとめました。 ✔ 表示切り替え ✔ フォームチェック ✔ スライダー ✔ API連携 ✔ Webアプリ制作 学習の全体像を掴みたい方へ🎁
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
6 days ago
JavaScript理解度チェック 解説編です💯 特に重要なのが ✔ querySelector ✔ addEventListener ✔ classList.toggle この3つ 取得 ↓ 監視 ↓ 変更 の流れを理解すると DOM操作が一気につながります🔥 “動くけど説明できない” を卒業出来たら コードを書くのがかなり楽になります👏
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
6 days ago
AIあるしプログラミング勉強いらないと思ってた 実際は AIでコード生成 ↓ とりあえず動かしてみる ↓ なんで動かないの… ってなることがかなり多い。 AIに全部やってもらうイメージが 実際はエラー読んでる時間が一番長い。 結局“コードの意味がわかる人”が AIを使いこなして活躍する時代💻
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
6 days ago
JavaScript理解度チェック☀️ “なんとなく”で進めてませんか❓ ✔ let と const の違い ✔ querySelector の役割 ✔ classList.toggle の意味 ✔ DOM操作で画面が変わる理由 など実務で使う内容を 理解度チェック形式でまとめました。 何問説明できますか? 解説は数時間後 このスレッドでチェック☑
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
7 days ago
ちなみに補足すると JavaScriptは elemet. style. display="block" のように直接styleを 変更することもできます。 ただ実務では class切替やCSS側で管理の方が ・保守しやすい ・見通しが良い ・管理しやすい のでtoggle + CSS の組み合わせが よく使われます💡 ここ理解すると UI実装が楽です🔥
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
7 days ago
JavaScriptのclassList.toggle("active") これ“なんとなく”で使ってませんか❓ 実は JS ↓ class変更 ↓ CSS発動 この流れを理解すると DOM操作が一気に分かりやすくなります。 ・ toggleの役割 ・ activeが付く瞬間 ・ 画面が変わる理由 ・ UI実装の仕組み を1枚で整理しました。 保存推奨です🔥
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
7 days ago
JavaScript初心者 『classList.toggle()』 をなんとなく使ってませんか❓ “開閉できる魔法”ではなく ✔ class追加 ✔ CSS切り替え ✔ DOM操作 ✔ 画面変化 をしてるだけです。 ハンバーガーメニューが “なぜ動くのか”を理解できると addEventListenerやDOM理解も かなり楽になります👇
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
7 days ago
addEventListener “なんとなく”で書いてる人かなり多いです でも実際は ・ボタンを監視 ・clickを待機 ・押されたら関数実行 という流れで動いてます。 特に初心者が詰まりやすいのが fn() と fn の違い 「クリックしても動かない」 の原因にも直結します。 “クリックで動く理由”をまとめました👇
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
8 days ago
初心者が思ってたプログラミング カタカタ…完成✨
忍者CODE|挫折させない無期限サポートのオンラインプログラミングスクール【公式】
@ninjacodeee
8 days ago
JavaScript 壊れた…と思ったことありませんか💭 でも初心者が詰まる原因の多くは ・ HTML要素が未取得 ・ script位置ミス ・ querySelector指定ミス ・ addEventListenerのスペル ・ console未確認 など クリックしても動かない を解決する流れを整理しました‼ DOM操作で詰まる人は保存推奨📌
Last Seen Users on Sotwe
Türbanımsı 💥
Seen from
Turkey
Y
Seen from
Malaysia
नेपाली कान्छि
ZOEY 🥰 𝐋𝐄𝐀𝐊𝐒 𝐈𝐍 𝐁𝐈𝐎
Seen from
Turkey
The Mask(मास्क )Lady
Seen from
Turkey
Denis Dosio
Seen from
Germany
The Rockman EXE Zone
Seen from
Australia
@FilthFetishVids
Seen from
United Kingdom
Olgun Sırdaş
Seen from
Turkey
ชอบสาวใหญ่ แม่หม้าย สาวแก่ สามพราน(แอคเก่า 7.8k)
Seen from
Thailand
Trends for you
1
Knicks
Under 10K tweets
2
Wemby
Under 10K tweets
3
AMAT
Under 10K tweets
4
Josh Hart
Under 10K tweets
5
ORM VEGGIE POPUP ICONSIAM
Under 10K tweets
6
Kenzie
Under 10K tweets
7
#AEWDynamite
Under 10K tweets
8
Hop Sing
Under 10K tweets
9
#82and0
Under 10K tweets
10
Betrayed
Under 10K tweets
Most Popular Users
1
Elon Musk
@elonmusk
240.1M followers
2
Barack Obama
@barackobama
119.3M followers
3
Donald J. Trump
@realdonaldtrump
111.6M followers
4
Cristiano Ronaldo
@cristiano
108.8M followers
5
Narendra Modi
@narendramodi
106.9M followers
6
Rihanna
@rihanna
97.2M followers
7
NASA
@nasa
92.1M followers
8
Justin Bieber
@justinbieber
90.5M followers
9
KATY PERRY
@katyperry
86.7M followers
10
Taylor Swift
@taylorswift13
80.5M followers
11
Lady Gaga
@ladygaga
72.1M followers
12
Kim Kardashian
@kimkardashian
69.3M followers
13
YouTube
@youtube
68.6M followers
14
Virat Kohli
@imvkohli
68.4M followers
15
Bill Gates
@billgates
63.4M followers
16
The Ellen Show
@theellenshow
62.5M followers
17
CNN
@cnn
61.9M followers
18
Neymar Jr
@neymarjr
60.9M followers
19
X
@x
60.9M followers
20
CNN Breaking News
@cnnbrk
59.9M followers
Olivia
Online
✨
⭐
💫