সেটআপ — browser console, Node.js আর VS Code

১ · JavaScript লিখতে আসলে কী কী লাগে

Python বা Java শিখতে গেলে প্রথম দিনেই কিছু একটা ডাউনলোড করতে হয়। JavaScript এখানে ব্যতিক্রম। আপনি এই পাতাটি যে browser-এ পড়ছেন, তার ভেতরেই একটি পূর্ণাঙ্গ JavaScript engine বসানো আছে — Chrome ও Edge-এ V8, Firefox-এ SpiderMonkey, Safari-তে JavaScriptCore. অর্থাৎ JavaScript শেখা শুরু করতে নতুন কিছুই ইনস্টল করতে হয় না।

তাহলে Node.js আর VS Code কেন? কারণ তিনটি জিনিস তিনটি আলাদা কাজ করে। একটি চায়ের দোকানের কথা ভাবুন: চুলা ছাড়া চা হয় না, কিন্তু চুলা দোকানেও থাকতে পারে, বাসাতেও। আর ভালো কেতলি থাকলে কাজ দ্রুত ও পরিষ্কার হয়।

২ · Browser console — হাতের কাছের পরীক্ষাগার

DevTools হলো browser-এর ভেতরে ডেভেলপারদের জন্য রাখা একগুচ্ছ টুল। খোলার উপায়:

Console ট্যাবটি একটি REPL — Read, Eval, Print, Loop. আপনি একটি লাইন লেখেন, সে পড়ে, হিসাব করে, ফল দেখায়, তারপর আবার অপেক্ষা করে। এখানে একটি সূক্ষ্ম কিন্তু খুব গুরুত্বপূর্ণ ব্যাপার আছে: console প্রতিটি লাইনের মান নিজে থেকেই দেখায় (echo), আর console.log যা ছাপে সেটি আলাদা জিনিস। নিচের সেশনটি ধাপে ধাপে দেখুন:

1> 2 + 32> console.log("Hi")3> let x = 104> x * 25> $_ + 16> console.clear()

৩ · console-এর কাজের method আর এই কোর্সের runner

console.log ছাড়াও console object-এ আরও কয়েকটি method আছে, যা ডেটা দেখতে খুব কাজে লাগে:

এই কোর্সের প্রতিটি পর্বে “চালান” বোতামওয়ালা কোড বক্স আছে। JS লেখা বক্সগুলো আপনার browser-এর ভেতরেই একটি আলাদা, সুরক্ষিত iframe-এ চলে — একে বলে sandbox. নিচের কোডটি চালিয়ে দেখুন:

const name = "রহিম";
const marks = 87;
console.log("নাম:", name, "নম্বর:", marks);

// কোন পরিবেশে চলছি? browser-এ window আছে, process নেই
console.log(typeof window, typeof document, typeof process);

const students = [
  { name: "রহিম", marks: 87 },
  { name: "সুমি", marks: 92 }
];
console.table(students);
console.info("মোট শিক্ষার্থী:", students.length);

৪ · Node.js ইনস্টল — LTS না Current, installer না version manager

Browser-এর বাইরে JavaScript চালাতে Node.js লাগে। ২০০৯ সালে Ryan Dahl Chrome-এর V8 engine-কে browser থেকে বের করে এনে তার সাথে ফাইল, নেটওয়ার্ক আর process সামলানোর ক্ষমতা জুড়ে দেন — সেটিই Node.js. আজ npm-এর প্রায় সব টুল (Vite, ESLint, Prettier, TypeScript) চলতে Node.js লাগে, তাই front-end ডেভেলপারেরও এটি দরকার।

LTS আর Current — কোনটি নেবেন

nodejs.org-এ ঢুকলে সাধারণত দুই রকম version দেখবেন:

এতদিনের নিয়মে প্রতি বছর দুটি নতুন major version আসে (সাধারণত এপ্রিল ও অক্টোবরে), আর জোড় সংখ্যার version-গুলো (18, 20, 22…) পরে LTS হয়। তবে release-এর সূচি সময়ে সময়ে বদলায়, তাই কোন version এখন LTS তা মুখস্থ না করে প্রতিবার nodejs.org-এর release পাতায় দেখে নিন।

দুই পথ — সরাসরি installer, অথবা version manager

Version manager এমন একটি ছোট টুল, যা একই কম্পিউটারে একাধিক Node version রাখতে আর এক কমান্ডে বদলাতে দেয়। জনপ্রিয় কয়েকটি (সবগুলো ফ্রি, যার যেটি সুবিধা):

৫ · যাচাই, Node REPL আর node app.js

ইনস্টলের পর প্রথম কাজ যাচাই। নতুন একটি terminal খুলে লিখুন:

node -v
npm -v

# উদাহরণ আউটপুট — আপনার সংখ্যা আলাদা হবে
v22.12.0
10.9.0

প্রথম সংখ্যাটি Node.js-এর version, দ্বিতীয়টি npm-এর (Node-এর সাথেই আসে, তার version নম্বর আলাদা)। দেখার বিষয় একটাই: প্রথম অংশ (major) আপনি যে LTS নামিয়েছেন তার সাথে মিলছে কি না। নাদিয়া LTS নামিয়েও যদি অনেক পুরোনো একটি সংখ্যা দেখেন, বুঝতে হবে কম্পিউটারে আগের কোনো Node রয়ে গেছে এবং PATH-এ সেটি আগে আসছে। আর 'node' is not recognized এলে হয় ইনস্টল হয়নি, নয়তো terminal পুরোনো — নতুন করে খুলুন।

Node REPL — terminal-এ console

শুধু node লিখে Enter চাপলে browser console-এর মতোই একটি REPL খোলে, প্রম্পট >. এখানেও echo হয়, আর শেষ ফল থাকে _ নামে (browser-এর $_-এর মতো)। নিজস্ব কমান্ডগুলো বিন্দু দিয়ে শুরু হয়:

$ node
Welcome to Node.js v22.12.0.   ← উদাহরণ
Type ".help" for more information.
> 7 / 2
3.5
> _ * 2
7
> .help        ← সব কমান্ডের তালিকা (.editor, .load, .save …)
> .exit        ← বের হওয়া (অথবা Ctrl+C দুবার, বা Ctrl+D)

node app.js — ফাইল চালানো

REPL-এ যা লেখেন, বন্ধ করলেই হারায়। স্থায়ী কোড লেখা হয় ফাইলে। ধরুন app.js নামে একটি ফাইলে আছে কয়েকটি log আর একটি টাইমার। node app.js লিখলে ভেতরে কী ঘটে, ধাপে ধাপে দেখুন:

$ node app.js
OS: node প্রোগ্রামটি খুঁজে (PATH থেকে) নতুন process চালু করল

console.log("শুরু");
setTimeout(() => console.log("টাইমার"), 100);
console.log("ফাইলের শেষ লাইন");

শুরু
ফাইলের শেষ লাইন
↑ setTimeout শুধু টাইমার “রেজিস্টার” করল, এখনো চলেনি

শুরু
ফাইলের শেষ লাইন
টাইমার
↑ event loop দেখল আর কোনো টাইমার বা কাজ বাকি নেই

$ ← process শেষ, exit code 0 মানে “সফল”

এবার Node.js-এর নিজস্ব জিনিস একটু ছুঁয়ে দেখুন। নিচের বক্সটি সত্যিকারের Node.js 20-এ চলে:

const major = Number(process.versions.node.split(".")[0]);
console.log("Node major version:", major);
console.log("platform:", process.platform);

// browser-এর উল্টো: এখানে process আছে, window নেই
console.log(typeof window, typeof document, typeof process);

let ticks = 0;
const timer = setInterval(() => {
  ticks++;
  if (ticks === 3) clearInterval(timer);
}, 10);

process.on("exit", (code) => {
  console.log(`exit code ${code}, ticks = ${ticks}`);
});
console.log("ফাইলের শেষ লাইন — কিন্তু প্রোগ্রাম এখনো শেষ নয়");

৬ · VS Code — প্রথম project সাজানো

Notepad-এও JavaScript লেখা যায়, কিন্তু একটি ভালো editor ভুল হওয়ার আগেই ধরিয়ে দেয়। VS Code (Visual Studio Code) Microsoft-এর একটি ফ্রি, open-source editor; JavaScript আর TypeScript-এর সাপোর্ট এর ভেতরেই আছে। code.visualstudio.com থেকে নামিয়ে ইনস্টল করুন (Windows-এ “Add to PATH” আর “Open with Code” অপশন টিক দিয়ে রাখা সুবিধাজনক)।

তিনটি অভ্যাস যা প্রথম দিন থেকেই রাখবেন

1. ফাইল নয়, ফোল্ডার খুলুন। File → Open Folder. একটি project মানে একটি ফোল্ডার; VS Code তখন পুরো project চেনে, terminal-ও সেই ফোল্ডারে খোলে।
2. Integrated terminal ব্যবহার করুন। Ctrl+` (backtick) চাপলে নিচে একটি integrated terminal খোলে — আলাদা উইন্ডো লাগে না, আর সেটি ইতিমধ্যে project ফোল্ডারে থাকে।
3. Auto Save চালু রাখুন। File → Auto Save. Save না করা ফাইল চালিয়ে “কিছুই বদলাল না কেন” — নতুনদের সবচেয়ে সাধারণ বিভ্রান্তি।

কয়েকটি কাজের extension

প্রথম ওয়েব project — দুটি ফাইল

js-practice নামে একটি ফোল্ডার বানিয়ে VS Code-এ খুলুন, তারপর দুটি ফাইল তৈরি করুন:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>আমার প্রথম পাতা</title>
</head>
<body>
  <h1 id="title">স্বাগতম</h1>
  <script src="script.js"></script>
</body>
</html>

console.log("script.js লোড হয়েছে");
document.getElementById("title").textContent = "হ্যালো, ঢাকা!";

index.html ফাইলটি browser-এ খুলুন — Explorer থেকে double-click, অথবা Live Server দিয়ে। পাতায় “হ্যালো, ঢাকা!” দেখাবে, আর F12 → Console-এ দেখবেন script.js লোড হয়েছে. <script> ট্যাগটি <body>-এর একদম শেষে রাখা হয়েছে যাতে h1 আগে তৈরি হয়ে যায় — এর কারণ পর্ব ০৪-এ খুলে বলা হবে। Node.js-এর জন্য project হলে শুধু app.js বানিয়ে integrated terminal-এ node app.js চালান।

৭ · Debugging-এর শুরু — breakpoint দিয়ে বানান-ভুল ধরা

তানভীর একটি দোকানের হিসাবের ছোট function লিখলেন। দুটি পণ্যের দাম 50 আর 30, যোগফল আসার কথা 80. কিন্তু console-এ এলো NaN (Not a Number). কোনো error নেই, কোনো লাল লেখা নেই — শুধু ভুল উত্তর। এখানে console.log ছড়িয়ে দেওয়ার চেয়ে ভালো উপায় হলো breakpoint: একটি লাইনে প্রোগ্রাম থামিয়ে ভেতরের সব variable-এর মান চোখে দেখা।

Browser-এ: DevTools → Sources ট্যাব (Firefox-এ Debugger) → বাঁ দিক থেকে script.js খুলে লাইন নম্বরে ক্লিক করুন — নীল চিহ্ন বসবে। তারপর পাতা reload করুন। নিচে তানভীরের debugging সেশনটি ধাপে ধাপে দেখুন:

1function total(items) {2  let sum = 0;3  for (const item of items) {4    sum += item.prcie;5  }6  return sum;7}8console.log(total([{ price: 50 }, { price: 30 }]));

আরও দুটি উপায় জেনে রাখুন:

• debugger; statement: কোডের যেকোনো জায়গায় debugger; লিখলে DevTools খোলা থাকলে প্রোগ্রাম সেখানে থামে — হাতে breakpoint বসানোর মতোই। DevTools বন্ধ থাকলে এটি কিছুই করে না। কাজ শেষে মুছে ফেলতে ভুলবেন না; ESLint-এর no-debugger নিয়ম এটি মনে করিয়ে দেয়।
• VS Code-এর debugger: লাইন নম্বরের বাঁ পাশে ক্লিক করলে লাল বিন্দু (breakpoint). Node ফাইলের জন্য Run and Debug (Ctrl+Shift+D) থেকে চালান, অথবা terminal-এর “+” মেনু থেকে JavaScript Debug Terminal খুলে সেখানে node app.js লিখুন — breakpoint-এ নিজে থেকেই থামবে। কী-বোর্ড প্রায় একই: F5 চালাও/চালিয়ে যাও, F10 step over, F11 step into.

৮ · অনলাইন playground, OS-ভেদের সমস্যা আর টিমে একই version

অনলাইন playground — দ্রুত পরীক্ষার জন্য

কোনো ধারণা দুই মিনিটে পরখ করতে, বা কাউকে কোড দেখাতে playground খুব কাজের: CodePen আর JSFiddle — HTML, CSS, JS পাশাপাশি লিখে সাথে সাথে ফল; StackBlitz — browser-এর ভেতরেই পুরো Node.js project চালাতে পারে। সীমাবদ্ধতা: ইন্টারনেট লাগে, আর পাবলিক pen-এ রাখা কোড অন্যরাও দেখতে পারে — কোনো password বা API key সেখানে রাখবেন না।

OS-ভেদে যেসব সমস্যা দেখা যায়

PowerShell-এর ব্যাপারটি একটু সাবধানে বুঝুন। Windows-এর ডেস্কটপ সংস্করণে ডিফল্ট policy সাধারণত .ps1 script চলতে দেয় না, আর npm-এর কিছু version Windows-এ npm.ps1 নামের একটি script রাখে — তাই কিছু কম্পিউটারে এই বার্তা আসে। অনেকে নিচের কমান্ডটি ব্যবহার করেন, যা শুধু আপনার নিজের অ্যাকাউন্টে স্থানীয় script চালাতে দেয় এবং ইন্টারনেট থেকে নামানো script-এর জন্য digital signature চায়:

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

এটি একটি নিরাপত্তা-সেটিং বদলানো, তাই অফিসের কম্পিউটারে IT বিভাগের অনুমতি নিন। ঝুঁকি নিতে না চাইলে সহজ বিকল্প: VS Code-এর terminal-এর ধরন বদলে Command Prompt করে নিন।

টিমে সবার একই version — .nvmrc আর engines

“আমার কম্পিউটারে তো চলছে!” — টিমে কাজের সবচেয়ে পুরোনো অভিযোগ। প্রায়ই কারণ হলো ভিন্ন Node version. সমাধান: version-এর সিদ্ধান্ত মানুষের মনে না রেখে project-এর ভেতরে লিখে রাখা।

# .nvmrc ফাইলে শুধু একটি লাইন — nvm ও fnm এটি পড়ে
echo "22" > .nvmrc
nvm use        # .nvmrc দেখে সঠিক version-এ চলে যায়

{
  "name": "js-practice",
  "engines": { "node": ">=20" }
}

package.json (পর্ব ৪৬-এ বিস্তারিত) ফাইলের engines অংশ জানিয়ে দেয় project কোন Node version চায়। npm ডিফল্টভাবে মিল না হলে শুধু সতর্ক করে, থামায় না — কড়া হতে চাইলে আলাদা সেটিং লাগে। এ দুটি মিলিয়ে নতুন সদস্য প্রথম দিনেই সঠিক পরিবেশ পান।

৯ · AI-এর যুগে সেটআপ — সহকারী আছে, বোঝা আপনার

VS Code-এ এখন GitHub Copilot-এর মতো AI সহকারী extension হিসেবে বসানো যায় — লিখতে লিখতে পরের লাইন প্রস্তাব করে, chat-এ প্রশ্নের উত্তর দেয়। এগুলো সত্যিই সময় বাঁচায়। কিন্তু দুটি জিনিস মাথায় রাখুন। প্রথমত, শেখার সময় প্রস্তাবটি গ্রহণ করার আগে নিজে বলতে পারছেন কি না যে লাইনটি কী করছে — না পারলে এই কোর্সের সংশ্লিষ্ট পর্ব দেখে নিন। দ্বিতীয়ত, অফিসের কোড বা গোপন তথ্য AI সার্ভিসে যাওয়ার আগে প্রতিষ্ঠানের নীতি দেখুন।

সেটআপের ক্ষেত্রে AI-এর একটি পরিচিত দুর্বলতা আছে: তার জানা তথ্য পুরোনো হতে পারে। AI হয়তো এমন একটি Node version-কে “সর্বশেষ LTS” বলবে যার সাপোর্ট শেষ হয়ে গেছে, বা Linux-এ এমন একটি পুরোনো PPA/script দেবে যা এখন আর রক্ষণাবেক্ষণ হয় না। তাই AI-এর দেওয়া install কমান্ড অন্ধভাবে কপি-পেস্ট করবেন না।

AI-এর দেওয়া সেটআপ-নির্দেশ চালানোর আগে — চেকলিস্ট

• Version নম্বরটি nodejs.org-এর release পাতার সাথে মিলিয়েছি — সত্যিই এখন LTS কি না
• ডাউনলোডের লিংক অফিসিয়াল সাইটের (nodejs.org, code.visualstudio.com, বা টুলের নিজস্ব GitHub পাতা)
• curl … | bash ধরনের কমান্ড হলে আগে script-টি খুলে পড়েছি এবং উৎস চিনি
• sudo বা execution policy বদলানোর মতো নিরাপত্তা-সেটিং কেন লাগছে, বুঝেছি
• শেষে node -v, npm -v আর একটি ছোট node app.js চালিয়ে নিজে যাচাই করেছি